/* * Szene-Darstellung fuer die Startseite von HaJo-Kluge.de. * * Grundprinzip: Beide Bilder (Tag/Nacht) liegen deckungsgleich * uebereinander in #hajo-scene. Standardzustand ohne JavaScript: die * Tagversion ist sichtbar (opacity: 1), die Nachtversion unsichtbar * (opacity: 0). Die Klasse "is-night" auf - gesetzt durch das * Inline-Script in inc/day-night.php bzw. spaeter durch assets/js/scene.js - * kehrt das um. */ :root { --hajo-scene-bg: #05060a; --hajo-scene-transition-duration: 0.6s; } html, body { height: 100%; } body { background-color: var( --hajo-scene-bg ); } .hajo-scene { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var( --hajo-scene-bg ); } /* * Beide Bilder werden absolut uebereinandergelegt und ueber * object-fit: contain unverzerrt, proportional und zentriert in den * verfuegbaren Platz eingepasst - auf grossen Bildschirmen so gross wie * moeglich, auf kleinen vollstaendig ohne Beschnitt. */ .hajo-scene__image { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity var( --hajo-scene-transition-duration ) ease; } .hajo-scene__image--day { opacity: 1; } .hajo-scene__image--night { opacity: 0; } html.is-night .hajo-scene__image--day { opacity: 0; } html.is-night .hajo-scene__image--night { opacity: 1; } /* * Ab 1200px Fensterbreite ("geeignete Desktop-Breite", oberhalb typischer * Tablet-Breiten bis 1024px): die Szene soll ca. 90% der Browserbreite * einnehmen statt wie bisher an der Fensterhoehe ausgerichtet zu werden * (das fuehrte auf breiten Bildschirmen zu grossen schwarzen Flaechen * links/rechts, weil das 3:2-Bild ausschliesslich auf 100vh begrenzt war). * * Der Container verlaesst dafuer die feste Vollbild-Positionierung und * bekommt stattdessen eine feste Breite (90% der Body-Inhaltsbreite) mit * dem exakten Bild-Seitenverhaeltnis (3:2) als Hoehe (aspect-ratio) - so * bleibt das Bild unverzerrt und unbeschnitten, unabhaengig von der * Fensterhoehe. * Wird die daraus resultierende Hoehe groesser als der sichtbare Bereich, * scrollt die Seite ganz normal (kein overflow:hidden, kein * position:fixed mehr in diesem Modus). */ @media ( min-width: 1200px ) { .hajo-scene { position: relative; inset: auto; display: block; /* * 90% statt 90vw: vw-Einheiten schliessen in vielen Browsern die * Scrollbar-Breite nicht aus, was hier - da diese Ansicht bei * grossen Screens vertikal scrollen kann - zu einer sichtbar * asymmetrischen Zentrierung fuehren wuerde. 90% bezieht sich auf * die tatsaechliche Inhaltsbreite von (Scrollbar bereits * abgezogen) und zentriert dadurch exakt. */ width: 90%; aspect-ratio: 3 / 2; margin: 0 auto; overflow: visible; } .hajo-scene__image { width: 100%; height: 100%; } } /* Dezente Ueberblendung: bei reduzierten Bewegungswuenschen kein Fade. */ @media ( prefers-reduced-motion: reduce ) { .hajo-scene__image { transition: none; } } /* * Klickbare Figuren-Hotspots (SVG-Overlay). * * Das SVG liegt deckungsgleich ueber beiden Szenenbildern und nutzt * dieselbe viewBox wie die Bildgroesse (1536 x 1024) mit * preserveAspectRatio="xMidYMid meet" - dadurch skaliert und zentriert * es sich exakt wie die Bilder selbst (object-fit: contain), sowohl im * mobilen Vollbild-Modus als auch in der 90%-Desktop-Breite. Es sind * bewusst keine festen Pixelkoordinaten in CSS notwendig. */ .hajo-scene__hotspots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* Klicks fallen standardmaessig durch; nur die Hotspots selbst (s.u.) nehmen sie an. */ pointer-events: none; } .hajo-hotspot { /* Die eigentliche Klickflaeche; siehe .hajo-hotspot polygon fuer die Groesse. */ pointer-events: none; } .hajo-hotspot--active { cursor: pointer; } .hajo-hotspot--active polygon { /* * Praktisch unsichtbare, aber "gemalte" Fuellung: SVG-Elemente mit * fill: none nehmen keine Zeigerereignisse an, ein transparenter * Fill dagegen schon. So bleibt die Flaeche unsichtbar, ist aber * vollstaendig klick-/tippbar - keine dauerhaft sichtbaren Kaesten. */ fill: rgba( 255, 255, 255, 0.001 ); pointer-events: fill; transition: filter var( --hajo-scene-transition-duration ) ease; } /* * Dezentes, warmes Gold-Leuchten bei Hover UND Tastaturfokus. Dient * gleichzeitig als markentypische, gut sichtbare Fokusanzeige (SVG- * hat browserabhaengig keinen zuverlaessigen Standard-Outline) - daher * wird der Browser-Outline bei :focus-visible bewusst durch dieses * eigene Leuchten ersetzt statt zusaetzlich angezeigt. */ .hajo-hotspot--active:hover polygon, .hajo-hotspot--active:focus-visible polygon { filter: drop-shadow( 0 0 6px rgba( 255, 205, 110, 0.95 ) ) drop-shadow( 0 0 18px rgba( 255, 170, 40, 0.65 ) ); } .hajo-hotspot--active:focus-visible { outline: none; } @media ( prefers-reduced-motion: reduce ) { .hajo-hotspot--active polygon { transition: none; } } /* Inaktive Hotspots (Ziel noch nicht final): keine Interaktion, kein Fokus, unsichtbar. */ .hajo-hotspot--inactive { pointer-events: none; fill: none; } /* Standard-Utility fuer Screenreader-only-Inhalte, z. B. die H1. */ .hajo-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0, 0, 0, 0 ); white-space: nowrap; border: 0; }