/* ===================================================================== WANDKALENDER ===================================================================== */ /* ===================================================================== FONTS ===================================================================== */ @font-face { font-family: "GT-Standard-L-Standard-Heavy"; src: url("../fonts/GT-Standard-L-Standard-Heavy.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "JaliLatin-Regular"; src: url("../fonts/JaliLatin-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JaliLatin-SemiBoldItalic"; src: url("../fonts/JaliLatin-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } /* ===================================================================== VARIABLES ===================================================================== */ :root { --ink: #3689d5; --accent: #3689d5; --ink-line: #000000; --paper: #ffffff; /* * Bewusst hier statt auf .hud--bc: die Pop-ups werden per JS an * umgehängt (siehe main.js) — eine nur lokal auf .hud--bc * definierte Variable wäre dort nicht mehr geerbt worden * (CSS-Vererbung folgt der tatsächlichen DOM-Position, nicht der * ursprünglichen HTML-Quelltextposition). Das war die Ursache * für das transparent wirkende Impressum-Pop-up. */ --imprint-color: #9aa1ad; /* Hauptschrift */ --font: "GT-Standard-L-Standard-Heavy", sans-serif; --font-size: 36px; /* Schrift für Info / Impressum */ --info-font: "JaliLatin-Regular", sans-serif; --info-font-size: 36px; /* Zeichenabstand */ --letter-spacing: /* -0.025em; */ -0.01em; /* Abstand zum Fensterrand */ --hud-pad: clamp(20px, 3.2vw, 40px); /* Abstand des Posters */ --stage-pad-top: clamp(90px, 12svh, 140px); --stage-pad-bottom: clamp(90px, 12svh, 140px); --stage-pad-x: clamp(40px, 9vw, 280px); /* Poster */ --poster-gap: 40px; color-scheme: light; } /* ===================================================================== RESET ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* * Verhindert den elastischen "Bounce"-Effekt am Scroll-Ende * (Gummiband-Nachfedern), der den Seiteninhalt kurz verschiebt. */ overscroll-behavior-y: none; /* * Zuverlässigere, native Ergänzung zu den JS-Handlern in main.js * (disablePinchZoom): erlaubt nur vertikales Scrollen. Pinch- UND * Doppeltipp-Zoom sind damit gar nicht erst im erlaubten * Gesten-Set enthalten — deutlich robuster als das Abfangen * einzelner Touch-Events, gerade auf iOS Safari. */ touch-action: pan-y; } body { margin: 0; font-family: var(--font); font-size: var(--font-size); font-weight: 400; color: var(--ink); background: #ffffff; overflow-x: hidden; overscroll-behavior-y: none; touch-action: pan-y; -webkit-font-smoothing: antialiased; } /* ===================================================================== SCREENREADER ===================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ===================================================================== BACKGROUND ===================================================================== */ .backdrop { position: fixed; inset: 0; z-index: 0; background: #ffffff; } .backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; } /* ===================================================================== MAIN / SCROLL ===================================================================== */ main { position: relative; /* * Erzeugt einen eigenen Stapelkontext — fängt dadurch .stage * (siehe dort) ein: ein z-index dort wirkte bisher nur INNERHALB * von main, nie gegen .hud (z-index 20) auf der äußeren Ebene. * Das war der eigentliche Grund, warum die Badges beim * Hochfahren weiterhin hinter "coming soon"/Datum verschwanden. * Jetzt selbst über .hud gesetzt. */ z-index: 21; /* * main deckt durch .scroll-track (480svh) praktisch die gesamte * Seite ab. Jetzt, wo main über den HUD-Buttons liegt, würde es * sonst deren Klicks abfangen (obwohl es visuell transparent * ist) — genau das hat eben "peu à peu" und alle Buttons * lahmgelegt. pointer-events:none lässt Klicks ungehindert * durch; die beiden Badges (einzige klickbare Elemente hier * drin) holen sich ihre Klickbarkeit gezielt zurück. */ pointer-events: none; } .scroll-track { height: 480svh; } /* ===================================================================== STAGE ===================================================================== */ .stage { position: sticky; top: 0; /* * position:sticky erzeugt einen eigenen Stapelkontext. Der * z-index hier wirkt aber nur INNERHALB von main (siehe dort) — * main selbst muss über .hud (z-index 20) liegen, sonst * verlieren die Badges beim Hochfahren (siehe updatePetitReveal * in main.js) immer gegen "Wandkalender"/Datum oben rechts, egal * welchen z-index sie selbst oder .stage haben. */ z-index: 21; height: 100svh; padding: var(--stage-pad-top) var(--stage-pad-x) var(--stage-pad-bottom); container-type: size; display: flex; align-items: center; justify-content: center; } /* ===================================================================== POSTER ===================================================================== */ .poster { position: relative; margin: 0; flex: none; height: min( calc(100cqh - 20px), calc(100cqw * 841 / 594) ); width: auto; aspect-ratio: 594 / 841; transform: translateZ(0); } .layer { position: absolute; inset: 0; display: block; } /* ===================================================================== PETIT-PLAKAT (A2) — ÜBERLAPPEND AUF DEM HAUPTPLAKAT ===================================================================== */ /* * DIN A2 ist linear exakt Faktor 420/594 ≈ 0,7071 kleiner als * DIN A1 (halbe Fläche, gleiches Seitenverhältnis). Als Kind von * #poster positioniert und in Prozent von dessen eigener Box * skaliert, bleibt das Verhältnis bei jeder Bildschirmgröße exakt * erhalten. Steht zwar im DOM vor den Haupt-Layern, bekommt aber * bewusst ein eigenes z-index, um DAVOR (statt dahinter) zu liegen — * an der vorherigen Position (unten rechts überstehend) ragte es * sonst bis ins Impressum hinein. Jetzt vertikal mittig, leicht * schräg gestellt, nur rechts knapp überstehend. */ .petit-poster { position: absolute; inset: auto; height: 70.7%; width: auto; aspect-ratio: 594 / 841; top: -3%; right: -6%; z-index: 1; transform: rotate(7deg); flex: initial; } .petit-poster .layer--paper { box-shadow: 0 0 1px rgba(20, 22, 26, 0.15), 0 0 20px rgba(20, 22, 26, 0.14), 0 10px 22px -10px rgba(20, 22, 26, 0.38); } /* ===================================================================== RUNDES BADGE — "NEW SIZE: PETIT | A2" ===================================================================== */ /* * Auf Mobile blendet der Browser beim Antippen standardmäßig ein * graues/schwarzes Tap-Highlight-Rechteck ein (bei den gedrehten, * runden Badges sichtbar wie ein kurz aufblitzender schwarzer * Rahmen um die eigentlich rechteckige Button-Fläche). Hier gezielt * unterdrückt — der :focus-visible-Rahmen bleibt für * Tastatur-Bedienung trotzdem erhalten (erscheint nur bei Tab, * nicht bei Maus-/Touch-Klick). */ .petit-badge, .landing-badge { -webkit-tap-highlight-color: transparent; outline: none; } .petit-badge:focus-visible, .landing-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .petit-badge { position: absolute; z-index: 2; /* * Elternelement main ist jetzt pointer-events:none (siehe dort) * — hier gezielt wieder aktiviert, da dieses Badge klickbar sein * soll (dreht auf Klick um, siehe main.js). */ pointer-events: auto; top: -2%; right: -10%; width: 30%; aspect-ratio: 1; /* * Erlaubt cqw-Einheiten (Container-Query-Breite) für den Text * relativ zur EIGENEN Badge-Breite statt zum Viewport — dadurch * skaliert die Schrift beim Verkleinern des Fensters exakt im * selben Verhältnis wie das Badge selbst (wie bei einer * statischen Grafik). Vorher folgte die Schrift --info-font-size * (Viewport-Skalierung), das Badge selbst aber der Plakatgröße * (Container-Skalierung) — beide liefen bei manchen * Fenstergrößen auseinander, wodurch der Text über den Rand * hinausragen konnte. */ container-type: inline-size; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6%; color: #ffffff; /* * translateZ(0) + backface-visibility erzwingen eine eigene * GPU-Kompositierungsebene — behebt in vielen Browsern * Rendering-Nähte, die bei rotierten Elementen mit * filter:drop-shadow() (siehe .petit-badge__shape) sonst * auftreten können. */ transform: rotate(-9deg) translateZ(0); backface-visibility: hidden; /* * Jetzt ein