/* GLX Galerie - Vorschau und Vollbild. ===================================================================== DIE EINE REGEL, AN DER DER SLIDER GESCHEITERT IST ===================================================================== Gordon, 05.09.2026: "Der Raum passt sich immer noch nicht an bei dem eingestellten Pop-up." Im Slider hatte das Popup eine eingestellte Breite, und das Bild lag darin. Bei einem hochkant aufgenommenen Foto stand links und rechts ein dunkler Streifen - der Kasten war da, das Bild passte nicht. Hier gibt es keine eingestellte Breite. Das Bild bestimmt die Größe, die Bühne legt sich darum. Rahmen, Ecken und das Kreuz hängen am Bild, nicht an einem Kasten. Damit passt es bei jedem Bildformat - ohne dass irgendwer irgendetwas einstellt. ===================================================================== */ /* ===================================================================== 1. DIE VORSCHAU IM BEITRAG ===================================================================== */ .glx-ga { display: grid; grid-template-columns: repeat( var( --glxg-spalten, 4 ), 1fr ); gap: var( --glxg-abstand, 10px ); margin: 1.4em 0; } .glx-ga-kachel { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: var( --glxg-ecken, 8px ); line-height: 0; position: relative; transition: transform .18s ease, box-shadow .18s ease; } .glx-ga-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Quadratische Kacheln: ein ruhiges Raster, auch wenn hoch- und querformatige Bilder gemischt sind. Wer die Originalform will, wählt sie im Seitenmenü - dann steht hier nichts im Weg. */ .glx-ga-quadrat .glx-ga-kachel { aspect-ratio: 1 / 1; } .glx-ga-kachel:hover, .glx-ga-kachel:focus-visible { transform: translateY( -2px ); box-shadow: 0 6px 20px rgba( 0, 0, 0, .35 ); outline: none; } .glx-ga-kachel:focus-visible { box-shadow: 0 0 0 3px var( --glxg-rahmenfarbe, #38b6dd ); } /* Auf schmalen Geräten passen vier Spalten nicht. Zwei sind dort richtig - kleiner wird jedes Bild zum Briefmarkenrätsel. */ @media ( max-width: 640px ) { .glx-ga { grid-template-columns: repeat( 2, 1fr ); } /* Auf dem Telefon die volle Breite: 55 Prozent von 360 Pixeln waeren eine Briefmarke, auf die niemand zielen kann. */ .glx-ga-deck { width: 100%; } } /* ===================================================================== EIN VORSCHAUBILD STATT EINES RASTERS ===================================================================== Gordon, 05.09.2026: "Jetzt hab ich da vierundachtzig Bilder untereinander in einer Contentbox. Ich meinte eine Galerie mit EINEM Vorschaubild. Und wenn ich das anklicke, dann wird das komplett groß." Er hat recht, und für eine Seite mit vielen Bildern ist es auch das Richtige: Ein Deckbild sagt "hier ist eine Galerie", 84 Kacheln sagen "hier ist eine Bleiwüste". Die anderen 83 stehen trotzdem im Quelltext - sonst wüsste das Vollbild nicht, was es zeigen soll. Sie sind nur ausgeblendet und werden dank loading="lazy" gar nicht erst geladen. ===================================================================== */ .glx-ga-deck { display: block; position: relative; /* Die Breite ist einstellbar. Gordon, 05.09.2026: "Das ist eigentlich jetzt viel zu gross auf der Seite. Das muss anpassbar sein in der Groesse." Vorgabe sind 55 Prozent - ein Deckbild ueber die volle Breite ist kein Hinweis auf eine Galerie mehr, sondern ein Aufmacher. */ width: var( --glxg-deck-breite, 55% ); max-width: 100%; } /* Ausrichtung. Bei weniger als voller Breite muss entschieden werden, wo das Bild steht - sonst klebt es immer links. */ .glx-ga-deck-mitte { margin-left: auto; margin-right: auto; } .glx-ga-deck-rechts { margin-left: auto; margin-right: 0; } .glx-ga-deck-links { margin-left: 0; margin-right: auto; } /* Alle Bilder stehen im Quelltext, sichtbar ist nur das Deckbild. Sie muessen dastehen, damit das Vollbild weiss, was es zeigen soll - geladen werden sie wegen loading="lazy" und display:none nicht. */ .glx-ga-deck .glx-ga-kachel { display: none; } .glx-ga-start { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; overflow: hidden; border-radius: var( --glxg-ecken, 8px ); aspect-ratio: var( --glxg-deck-form, 16 / 9 ); } /* Originalform: Das Bild bringt seine eigene Hoehe mit, nichts wird beschnitten. Dann darf es auch nicht mehr formatfuellend skaliert werden - sonst waere der Ausschnitt wieder da. */ .glx-ga-deck-original .glx-ga-start { aspect-ratio: auto; height: auto; } .glx-ga-deck-original .glx-ga-start img { height: auto; object-fit: contain; } .glx-ga-start img { width: 100%; height: 100%; object-fit: cover; display: block; } .glx-ga-deck:hover .glx-ga-start img { transform: scale( 1.02 ); } .glx-ga-start img { transition: transform .3s ease; } /* Der Hinweis auf dem Deckbild. Ohne ihn sieht es aus wie ein gewöhnliches Bild, und niemand kommt auf die Idee zu klicken - genau das war Gordons zweiter Punkt: "Geschweige denn seh ich, dass da was zum Anklicken ist, dass das eine Galerie ist." */ .glx-ga-deck::after { content: attr( data-hinweis ); position: absolute; inset: auto 0 0 0; padding: 42px 16px 14px; font: 600 16px/1.3 system-ui, sans-serif; color: #fff; text-align: left; text-shadow: 0 1px 4px rgba( 0, 0, 0, .9 ); background: linear-gradient( to top, rgba( 0, 0, 0, .78 ), rgba( 0, 0, 0, 0 ) ); border-radius: 0 0 var( --glxg-ecken, 8px ) var( --glxg-ecken, 8px ); pointer-events: none; } /* Die Lupe oben rechts - das Zeichen, das jeder kennt. */ .glx-ga-deck::before { content: ""; position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; z-index: 2; border-radius: 50%; background: rgba( 20, 22, 25, .72 ) no-repeat center / 22px 22px; border: 2px solid rgba( 255, 255, 255, .85 ); background-image: url( "data:image/svg+xml;utf8," ); pointer-events: none; transition: transform .18s ease; } .glx-ga-deck:hover::before { transform: scale( 1.08 ); } /* ===================================================================== 2. DAS VOLLBILD ===================================================================== */ .glx-gv { position: fixed; inset: 0; z-index: 2147483000; display: none; place-items: center; /* BLASSGRAU, NICHT PECHSCHWARZ. Gordon: "Der darf da nur leicht verblassen und nicht so schwarzes Teil werden. Das sieht scheisse aus." Er hat recht: Bei gemischten Hoch- und Querformaten steht neben jedem Bild eine grosse Flaeche, und in Schwarz wirkt die wie ein Loch. Ein blasser Schleier mit Unschaerfe laesst die Seite ahnen, ohne vom Bild abzulenken. */ background: var( --glxg-grund, rgba( 236, 238, 240, .88 ) ); -webkit-backdrop-filter: blur( 10px ) saturate( .7 ); backdrop-filter: blur( 10px ) saturate( .7 ); overscroll-behavior: contain; /* Der Platz fuer die untere Leiste wird reserviert, nicht nur von der Bildhoehe abgezogen. Nachgemessen ohne diese Zeile: Fenster 801, Bild 673 hoch - aber ueber die VOLLE Hoehe zentriert, also von 64 bis 737, waehrend die Leiste bei 718 anfaengt. 19 Pixel Ueberlappung. Mit dem Innenabstand zentriert sich das Bild im verbleibenden Raum und sitzt sauber darueber. */ box-sizing: border-box; padding-bottom: var( --glxg-leiste, 96px ); } .glx-gv.ist-offen { display: grid; } /* DAS LAUFENDE BILD ALS HINTERGRUND. Gordon: "Du nimmst das jeweilige Bild, was gerade da ist, als verblassten Hintergrund." Unschaerfe und ein dunkler Schleier machen daraus eine Flaeche, die zum Bild gehoert, statt eines Lochs neben ihm. scale(1.1) deckt die Raender ab, die die Unschaerfe sonst ausfranst. */ .glx-gv-grund { position: absolute; inset: 0; background: no-repeat center / cover; filter: blur( 30px ) brightness( .42 ) saturate( .85 ); transform: scale( 1.1 ); transition: background-image .25s ease; z-index: 0; } .glx-gv-buehne, .glx-gv-leiste, .glx-gv-zu, .glx-gv-zaehler { z-index: 1; } .glx-gv-buehne { position: relative; } /* WARUM HIER FENSTERMASSE STEHEN UND KEINE PROZENT ===================================================================== Prozent wäre schöner - dann hinge die Größe am Kasten und nicht am Fenster. Nachgemessen funktioniert es aber nicht: Die Bühne ist ein Grid-Feld ohne feste Höhe, und ein max-height in Prozent hat daran keinen Bezugspunkt. Es wird stillschweigend ignoriert. Ergebnis der Messung bei einem 1280x800-Fenster: ein 400x900-Foto wurde 904 Pixel hoch - hundert Pixel mehr, als der Bildschirm hat. Also Fenstermaße. Das bringt das bekannte iPhone-Problem mit: 100vh ist dort die Höhe OHNE Adressleiste, das Bild reicht darunter. Dafür gibt es dvh - die Höhe, die wirklich zu sehen ist. Ältere Browser kennen die Einheit nicht und bleiben bei vh; deshalb steht beides da, das Neuere überschreibt das Ältere. ===================================================================== */ /* DIE BÜHNE - sie ist genau so groß wie das Bild. inline-block statt Block: ein Blockelement wäre so breit wie der Bildschirm, und alles daran Hängende säße am Bildschirmrand statt am Bild. Genau das war der dunkle Streifen im Slider. */ .glx-gv-buehne { position: relative; display: inline-block; margin: 0; line-height: 0; max-width: calc( 100vw - 32px ); max-height: calc( 100vh - 32px - var( --glxg-leiste, 96px ) ); } .glx-gv-buehne img { display: block; width: auto; height: auto; /* Der Rahmen zählt zur Größe, nicht dazu. Ohne diese Zeile misst max-height nur den Bildinhalt, und die zwei Rahmenlinien kommen obendrauf - das Bild wird vier Pixel höher als die Bühne, und unten steht der Rahmen über. Nachgemessen: Bühne 688, Bild 692. Mit border-box sind es beide Male 688. */ box-sizing: border-box; max-width: calc( 100vw - 32px ); max-height: calc( 100vh - 32px - var( --glxg-leiste, 96px ) ); border-radius: var( --glxg-ecken, 8px ); border: var( --glxg-rahmen, 2px ) solid var( --glxg-rahmenfarbe, #38b6dd ); /* Der Schein nimmt die Rahmenfarbe. Vorher stand hier fest Tuerkis - wer den Rahmen auf Gold stellt, bekam einen tuerkisen Schein dazu. Die erste Zeile ist der Rueckfall fuer Browser ohne color-mix. */ box-shadow: 0 0 var( --glxg-gluehen, 26px ) rgba( 56, 182, 221, .45 ), 0 18px 50px rgba( 0, 0, 0, .45 ); box-shadow: 0 0 var( --glxg-gluehen, 26px ) color-mix( in srgb, var( --glxg-rahmenfarbe, #38b6dd ) 45%, transparent ), 0 18px 50px rgba( 0, 0, 0, .45 ); transition: opacity .25s ease; background: #111; } .glx-gv-blende .glx-gv-buehne img { opacity: 0; } /* Die neueren Einheiten, wo es sie gibt. Auf dem iPhone ist das der Unterschied zwischen "das Bild endet unter der Adressleiste" und "das Bild passt". */ @supports ( height: 100dvh ) { .glx-gv-buehne, .glx-gv-buehne img { max-width: calc( 100dvw - 32px ); max-height: calc( 100dvh - 32px - var( --glxg-leiste, 96px ) ); } } /* Die Beschriftung liegt IM Bild, nicht darunter. Darunter würde sie die Bühne höher machen als das Bild - und schon sitzt das Kreuz wieder daneben statt am Bildrand. */ .glx-gv-text { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 30px 16px 12px; line-height: 1.4; font-size: 15px; color: #fff; text-align: left; text-shadow: 0 1px 3px rgba( 0, 0, 0, .9 ); background: linear-gradient( to top, rgba( 0, 0, 0, .72 ), rgba( 0, 0, 0, 0 ) ); border-radius: 0 0 var( --glxg-ecken, 8px ) var( --glxg-ecken, 8px ); pointer-events: none; } .glx-gv-text[hidden] { display: none; } /* ===================================================================== 3. DIE BEDIENUNG ===================================================================== */ /* Oben rechts in der BILDSCHIRMecke, nicht am Bild. Gordon, 05.09.2026: "Dann kannst du das Kreuz zum Schliessen oben rechts in die Ecke machen." Vorher hing es am Bildrand und wanderte bei jedem Hochformat mit - man musste es suchen. */ .glx-gv-zu { position: fixed; top: 14px; right: 16px; width: 44px; height: 44px; padding: 9px; border: 2px solid rgba( 255, 255, 255, .8 ); border-radius: 50%; cursor: pointer; color: #fff; background: rgba( 0, 0, 0, .55 ); -webkit-backdrop-filter: blur( 3px ); backdrop-filter: blur( 3px ); line-height: 0; } .glx-gv-zu:hover { background: rgba( 0, 0, 0, .92 ); } .glx-gv-zu svg { width: 100%; height: 100%; } /* DIE UNTERE LEISTE: Pfeil - Miniaturen - Pfeil. Gordon: "Die Pfeil-Button muessen unten links und rechts von den Miniaturansichten." Das haelt alles Bedienbare an einem Ort beieinander, statt es ueber den Bildschirm zu verteilen. */ .glx-gv-leiste { position: fixed; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba( 18, 20, 23, .55 ); -webkit-backdrop-filter: blur( 10px ); backdrop-filter: blur( 10px ); border-top: 1px solid rgba( 255, 255, 255, .12 ); } .glx-gv-leiste[hidden] { display: none; } .glx-gv-pfeil { position: static; flex: 0 0 auto; /* Deutlich sichtbar - auf hellem Grund genauso wie auf dunklem. Deshalb ein dunkler Knopf mit hellem Ring: Der Ring traegt ihn auf dunklen Bildern, die Fuellung auf hellem Hintergrund. */ width: 62px; height: 62px; padding: 13px; border: 2px solid rgba( 255, 255, 255, .85 ); border-radius: 50%; cursor: pointer; color: #fff; background: rgba( 20, 22, 25, .72 ); box-shadow: 0 4px 18px rgba( 0, 0, 0, .35 ); -webkit-backdrop-filter: blur( 3px ); backdrop-filter: blur( 3px ); line-height: 0; } .glx-gv-pfeil:hover { background: rgba( 0, 0, 0, .92 ); transform: scale( 1.06 ); } .glx-gv-pfeil svg { width: 100%; height: 100%; } .glx-gv-pfeil[hidden] { display: none; } /* Die Miniaturleiste. Bei sechzig Bildern muss sie rollen können - und das laufende Bild muss sich selbst hineinrollen, sonst sucht man es. Das erledigt das Skript mit scrollIntoView. */ .glx-gv-mini { flex: 1 1 auto; min-width: 0; /* sonst sprengt die Leiste bei 84 Bildern die Zeile */ display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scroll-behavior: smooth; } .glx-gv-mini[hidden] { display: none; } .glx-gv-mini button { flex: 0 0 auto; width: 64px; height: 46px; padding: 0; border: 2px solid transparent; border-radius: 5px; background: none; cursor: pointer; opacity: .55; line-height: 0; transition: opacity .15s ease, border-color .15s ease; } .glx-gv-mini button img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; } .glx-gv-mini button:hover { opacity: .9; } .glx-gv-mini button.ist-da { opacity: 1; border-color: var( --glxg-rahmenfarbe, #38b6dd ); } /* Der Zähler. Bei sechzig Bildern ist "14 von 60" die Antwort auf die Frage, die man sich sonst stellt: Wie lange geht das noch? */ .glx-gv-zaehler { position: fixed; top: 14px; left: 16px; padding: 5px 12px; border-radius: 20px; font-size: 14px; font-variant-numeric: tabular-nums; color: #fff; background: rgba( 20, 22, 25, .72 ); -webkit-backdrop-filter: blur( 3px ); backdrop-filter: blur( 3px ); } .glx-gv-zaehler[hidden] { display: none; } /* ===================================================================== 4. WER NICHTS TUT, SCHAUT ZU ===================================================================== Maus bewegen: Bedienung da, Wechsel haelt an. Maus still: Bedienung nächste Bewegung holt sie zurück. Der Bildwechsel läuft weiter - das ist der Sinn der Sache. Vier Sekunden, nicht zweieinhalb: Wer das Vollbild gerade geöffnet hat, soll sehen, dass es eine Bedienung GIBT, bevor sie verschwindet. ===================================================================== */ .glx-gv-zu, .glx-gv-leiste, .glx-gv-zaehler { transition: opacity .35s ease, visibility .35s ease; } .glx-gv.ruht .glx-gv-zu, .glx-gv.ruht .glx-gv-leiste, .glx-gv.ruht .glx-gv-zaehler { opacity: 0; visibility: hidden; } .glx-gv.nur-pfeile .glx-gv-mini { display: none; } .glx-gv.nur-mini .glx-gv-pfeil { display: none; } /* IST DIE LEISTE WEG, GEHOERT IHR PLATZ DEM BILD. ===================================================================== Gordon, 05.09.2026: "Wenn man die Maus nicht bewegt, geht unten das Menueband weg, das ist top. Aber dann muss das Bild ja auch volle Hoehe haben von der Ansicht her." Genau. Sonst bleibt unten ein leerer Streifen stehen, wo eben noch die Miniaturen waren - und das Bild ist kleiner, als es sein muesste, aus Ruecksicht auf etwas, das gar nicht mehr da ist. Der Uebergang laeuft ueber dieselbe Zeit wie das Ausblenden, damit das Bild mitwaechst, waehrend die Leiste geht, statt danach zu springen. */ .glx-gv.ruht { padding-bottom: 0; } .glx-gv.ruht .glx-gv-buehne, .glx-gv.ruht .glx-gv-buehne img { max-height: calc( 100vh - 32px ); } @supports ( height: 100dvh ) { .glx-gv.ruht .glx-gv-buehne, .glx-gv.ruht .glx-gv-buehne img { max-height: calc( 100dvh - 32px ); } } /* Ausgeschrieben statt ueber die Variable. Der Weg ueber --glxg-leiste waere kuerzer, aber diese Regel muss die Berechnung im @supports-Block ueberbieten, und dafuer braucht sie eigene Spezifitaet. Beim Nachmessen blieb die Bildhoehe sonst auf dem alten Wert stehen. */ .glx-gv { transition: padding-bottom .35s ease; } .glx-gv-buehne, .glx-gv-buehne img { transition: max-height .35s ease, opacity .25s ease; } @media ( prefers-reduced-motion: reduce ) { .glx-gv-buehne img, .glx-gv-zu, .glx-gv-pfeil, .glx-gv-mini, .glx-gv-zaehler, .glx-ga-kachel { transition: none; } } /* Ohne Leiste - ein einzelnes Bild - darf das Bild den Platz nutzen. */ .glx-gv:has( .glx-gv-leiste[hidden] ) { --glxg-leiste: 0px; } .glx-gv.nur-pfeile { --glxg-leiste: 86px; } /* Im Editor stört das Vollbild nur - dort wird gesetzt, nicht geschaut. */ .block-editor-block-list__layout .glx-gv { display: none !important; } /* ===================================================================== 9. KEIN THEMESCHMUCK AN DEN EIGENEN KNOEPFEN ===================================================================== Manche Themes haengen jedem