/* * Die Markenbilder hinter Anmeldung und Hauptseiten. * * Welches Bild wo liegt, entscheidet BackgroundExtension anhand der Route; die * Adresse steht als `--marke-bild` am . Diese Datei kümmert sich nur * darum, dass darüber noch etwas zu lesen ist. * * Wird von base.html.twig auf jeder Seite geladen. Sie ist klein, und die * Alternative — ein eigenes nur auf zehn Seiten — hieße dieselbe * Fallunterscheidung ein zweites Mal zu pflegen. */ /* ---- Gemeinsames -------------------------------------------------------- */ /* * Bild und Schleier liegen zusammen in **einem** festen Element hinter der * Seite — nicht als Hintergrund am . * * Der naheliegende Weg wäre `background-attachment: fixed` am . Auf iOS * wird die Eigenschaft aber seit Jahren falsch umgesetzt — das Bild wird dort * verzerrt oder bleibt beim Scrollen hängen. Ein mit `position: fixed` * gesetztes Element und `cover` tut dasselbe und tut es überall gleich. * * Der Schleier ist die erste Schicht, das Foto die zweite: Ohne ihn stünde * dunkler Text stellenweise auf dunklem Holz, und die weißen Karten schwömmen * ohne Kante im Bild. */ body.has-marke::before { content: ""; position: fixed; z-index: 0; inset: 0; background-image: linear-gradient(rgb(241 243 246 / .72), rgb(241 243 246 / .72)), var(--marke-bild); background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; } /* * Der Seiteninhalt gehört über den Schleier. * * Aufgezählt, nicht pauschal über `> *`: Eine solche Regel trifft auch alles, * was JavaScript später an den hängt — die Abdunkelung und die * Sprechblase des Rundgangs etwa. Deren eigene Werte (90 und 92) wären damit * auf 1 gesetzt, und die Sprechblase verschwände hinter der Seite. Genau das * war der Fall, gemessen: Ein Klick auf die Blase traf den Hauptbereich. */ body.has-marke > .site-main, body.has-marke > .schema-warning { position: relative; z-index: 1; } /* * Die Kopfzeile bleibt undurchsichtig — und liegt über dem Inhalt. * * Sie trägt Marke, Menü und Suchfeld; ein Foto dahinter macht aus beidem ein * Durcheinander. Der Hintergrund beginnt darunter. * * Der höhere `z-index` ist kein Feinschliff, sondern eine Reparatur: Sobald * alle direkten Kinder des denselben Wert tragen, gewinnt das im * Dokument spätere — also der Hauptbereich. Die Hilfebox hängt in der * Kopfzeile, und die verschwand dadurch hinter der Seite. Gemessen: Ein Klick * mitten in die geöffnete Box traf `site-main` statt der Box. */ body.has-marke > .site-header { z-index: 3; background: var(--c-surface); } @media (prefers-color-scheme: dark) { /* Im dunklen Erscheinungsbild dunkelt der Schleier ab, statt aufzuhellen — ein aufgehelltes Foto unter hellem Text wäre unlesbar. */ :root:not([data-theme="light"]) body.has-marke::before { background-image: linear-gradient(rgb(16 20 26 / .78), rgb(16 20 26 / .78)), var(--marke-bild); } } /* Dieselben Werte fuer die ausdrueckliche Wahl „dunkel". Eine Medienabfrage laesst sich nicht mit einem Attributselektor verunden, deshalb steht der Block zweimal da; erzeugt aus dem Block darueber. */ /* Im dunklen Erscheinungsbild dunkelt der Schleier ab, statt aufzuhellen — ein aufgehelltes Foto unter hellem Text wäre unlesbar. */ :root[data-theme="dark"] body.has-marke::before { background-image: linear-gradient(rgb(16 20 26 / .78), rgb(16 20 26 / .78)), var(--marke-bild); } /* ---- Die Anmeldeseite --------------------------------------------------- */ /* * Hier darf das Bild wirken: Statt eines gleichmäßigen Schleiers liegt ein * Verlauf von links darüber. Er trägt das Formular und lässt die rechte * Bildhälfte mit Logo und Schriftzug frei. * * Nur `background-image` wird ersetzt, nicht `background` — sonst fielen * `size`, `position` und `repeat` der Grundregel mit weg, und das Foto stünde * ungedehnt in der linken oberen Ecke. */ body.marke--anmeldung::before { background-image: linear-gradient( 100deg, rgb(241 243 246 / .94) 0%, rgb(241 243 246 / .90) 26%, rgb(241 243 246 / .55) 42%, rgb(241 243 246 / .08) 56%, rgb(241 243 246 / 0) 68% ), var(--marke-bild); } /* * Das Formular rückt nach links. * * Im Bild steht die Marke rechts — Logo und Schriftzug auf dem Notebook. Ein * mittig zentriertes Formular läge genau darüber. `place-items: center` aus * .page-centered wird deshalb hier durch eine eigene Ausrichtung ersetzt. * * Die Breite in `vw` und nicht in Prozent: Prozente bezögen sich auf .site-main * samt dessen Innenabstand, und der Abstand vom linken Rand fiele je nach * Fenstergröße anders aus. */ body.marke--anmeldung .site-main { display: grid; place-items: center start; padding-left: min(8vw, 6rem); } /* * Auf schmalen Fenstern gibt es keine freie Bildhälfte mehr. Dann steht das * Formular wieder mittig, und der Schleier deckt das ganze Bild ab — sonst * stünde die Anmeldung über dem Notebook. */ @media (max-width: 60rem) { body.marke--anmeldung .site-main { place-items: center; padding-left: 1.5rem; } body.marke--anmeldung::before { background-image: linear-gradient(rgb(241 243 246 / .88), rgb(241 243 246 / .88)), var(--marke-bild); } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.marke--anmeldung::before { background-image: linear-gradient( 100deg, rgb(16 20 26 / .95) 0%, rgb(16 20 26 / .92) 26%, rgb(16 20 26 / .60) 42%, rgb(16 20 26 / .12) 56%, rgb(16 20 26 / 0) 68% ), var(--marke-bild); } @media (max-width: 60rem) { :root:not([data-theme="light"]) body.marke--anmeldung::before { background-image: linear-gradient(rgb(16 20 26 / .9), rgb(16 20 26 / .9)), var(--marke-bild); } } } /* Dieselben Werte fuer die ausdrueckliche Wahl „dunkel". Eine Medienabfrage laesst sich nicht mit einem Attributselektor verunden, deshalb steht der Block zweimal da; erzeugt aus dem Block darueber. */ :root[data-theme="dark"] body.marke--anmeldung::before { background-image: linear-gradient( 100deg, rgb(16 20 26 / .95) 0%, rgb(16 20 26 / .92) 26%, rgb(16 20 26 / .60) 42%, rgb(16 20 26 / .12) 56%, rgb(16 20 26 / 0) 68% ), var(--marke-bild); } @media (max-width: 60rem) { :root[data-theme="dark"] body.marke--anmeldung::before { background-image: linear-gradient(rgb(16 20 26 / .9), rgb(16 20 26 / .9)), var(--marke-bild); } }