/* Theme Name: holgerFX Theme URI: https://holgerfx.com Author: Holger Lentz Description: Minimalistisches Block-Theme fuer das Fotografie-Portfolio holgerFX. Schwarzer Hintergrund, grosse Bilder, Akzentfarbe Gruen. Ohne Page-Builder, ausschliesslich native Gutenberg-Bloecke. Schrift Manrope selbst gehostet (kein Google-CDN). Version: 1.0.0 Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: holgerfx Tags: portfolio, photography, block-patterns, full-site-editing, one-column */ /* -------------------------------------------------------------- Nur was theme.json nicht abbilden kann. Farben/Abstaende/Schrift kommen alle aus theme.json. -------------------------------------------------------------- */ /* ============================================================== Farbschema -------------------------------------------------------------- Hell ist der Normalfall und steht als Palette in theme.json. Dunkel wird ueber 'data-theme="dark"' am -Element gesetzt – entweder vom Knopf im Kopfbereich (gemerkt in localStorage) oder direkt beim Seitenaufbau vom Skript in functions.php. Die Preset-Farben aus theme.json gibt WordPress unter ':root' aus (Spezifitaet 0,1,0). 'html[data-theme="dark"]' liegt mit 0,1,1 darueber – dadurch gewinnen die Werte hier unabhaengig davon, in welcher Reihenfolge die Stylesheets geladen werden. Halbtransparente Flaechen und Schriftfarben, die sich nicht aus dem Preset ableiten lassen, bekommen eigene Variablen. ============================================================== */ :root { --hfx-veil: rgba(255, 255, 255, 0.82); /* Kopfbereich beim Scrollen */ --hfx-overlay: rgba(250, 250, 248, 0.97); /* Grossbild-Ansicht */ --hfx-lightbox-titel: rgba(17, 17, 17, 0.92); --hfx-lightbox-exif: rgba(17, 17, 17, 0.6); --hfx-lightbox-count: rgba(17, 17, 17, 0.45); --hfx-placeholder: #8f8f8f; --hfx-copyright: #6f6f6f; /* Auf Weiss wirken abgedunkelte Bilder schmutzig statt ruhig. */ --hfx-img-dim: 0.96; /* Ruhezustand der Galeriebilder */ color-scheme: light; } html[data-theme="dark"] { --wp--preset--color--base: #000000; --wp--preset--color--contrast: #ffffff; --wp--preset--color--surface: #161616; --wp--preset--color--border: #393939; --wp--preset--color--muted: #d8d8d8; /* Auf Schwarz traegt das volle Limettengruen. Die helle Fassung nutzt denselben Farbton abgedunkelt, weil er auf Weiss sonst nur auf ein Kontrastverhaeltnis von etwa 1,2:1 kaeme. */ --wp--preset--color--accent: #c5ff48; --hfx-veil: rgba(0, 0, 0, 0.72); --hfx-overlay: rgba(0, 0, 0, 0.96); --hfx-lightbox-titel: rgba(255, 255, 255, 0.92); --hfx-lightbox-exif: rgba(255, 255, 255, 0.62); --hfx-lightbox-count: rgba(255, 255, 255, 0.4); --hfx-placeholder: #7a7a7a; --hfx-copyright: #8a8a8a; --hfx-img-dim: 0.88; color-scheme: dark; } /* Alles, was ueber einem Foto liegt, ist in beiden Schemata hell: Startseiten-Kopf, Bildunterschriften, Slider-Text und die drei schwebenden Leisten. Statt jede Regel zu verdoppeln, wird hier nur die Variable im Geltungsbereich gesetzt. */ /* '.hfx-tile' und nicht nur '.hfx-tile__caption': der Knopf "View series" liegt im Inhaltscontainer des Cover-Blocks, also ausserhalb der Bildunterschrift – er stand sonst dunkel auf dem Foto. */ body.home .hfx-header, .hfx-slide, .hfx-tile, .hfx-social, .hfx-dots, .hfx-arrows { --wp--preset--color--contrast: #ffffff; --wp--preset--color--accent: #c5ff48; /* Auch 'base': die Abdunkelung der Cover-Bloecke ist als Preset-Farbe 'base' hinterlegt (Klasse 'has-base-background-color'). Mit hellem Standard wurde daraus eine weisse Schicht, die die Fotos ausgeblichen hat. Sie soll in beiden Schemata schwarz sein. */ --wp--preset--color--base: #000000; color: #ffffff; } /* Navigation: gruene Unterstreichung wie auf der alten Seite ------ */ .wp-block-navigation .wp-block-navigation-item__content { position: relative; padding-bottom: 0.35rem; } .wp-block-navigation .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s ease; } .wp-block-navigation .wp-block-navigation-item__content:hover::after, .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after, .wp-block-navigation .current_page_item > .wp-block-navigation-item__content::after { transform: scaleX(1); } /* Aktiver Menuepunkt bleibt weiss, nur die Linie markiert ---------- */ .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); } /* Kopfbereich klebt oben, leicht abgedunkelt beim Scrollen -------- */ /* Wichtig: KEIN backdrop-filter direkt an diesem Element. Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer position:fixed-Nachfahren – das Mobil-Menue (fixed, soll den ganzen Bildschirm fuellen) wurde dadurch auf die Hoehe des Kopfbereichs zusammengestaucht und zeigte nur den ersten Menuepunkt. Die Weichzeichnung liegt deshalb auf ::before. */ .hfx-header { position: sticky; top: 0; z-index: 100; } .hfx-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hfx-veil); backdrop-filter: blur(12px); pointer-events: none; } /* Copyright-Zeile im Fussbereich. Die Farbe steht bewusst hier und nicht als Inline-Stil im Block: ein Inline-Stil laesst sich beim Wechsel des Farbschemas nicht mehr ueberschreiben. */ .hfx-copyright { color: var(--hfx-copyright); } /* Umschalter fuer das Farbschema, rechts neben der Navigation ----- */ .hfx-header__rechts { align-items: center; } .hfx-theme-toggle { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: 0.65; transition: opacity 0.25s ease, color 0.25s ease; /* Der Knopf sitzt in einer Zeile mit Grossbuchstaben-Navigation; ohne festen line-height zieht er die Zeile auseinander. */ line-height: 0; /* Die Navigationslinks tragen unten 0.35rem Innenabstand fuer die gruene Unterstreichung. Beide Elemente werden mittig ausgerichtet, dadurch sass das Zeichen genau um die halbe Strecke (2,8 px) tiefer als die Schrift. Derselbe Innenabstand bringt beide auf eine Linie – 'content-box', damit die 2rem weiterhin fuer die Zeichenflaeche gelten. */ box-sizing: content-box; padding-bottom: 0.35rem; } .hfx-theme-toggle:hover, .hfx-theme-toggle:focus-visible { opacity: 1; color: var(--wp--preset--color--accent); } .hfx-theme-toggle svg { width: 18px; height: 18px; display: block; } .hfx-theme-toggle__sonne { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .hfx-theme-toggle__mond { fill: currentColor; } /* Gezeigt wird immer das Ziel, nicht der Ist-Zustand: im Hellen der Mond, im Dunkeln die Sonne. Die Selektoren nennen bewusst Klasse UND Elementtyp. Mit '.hfx-theme-toggle svg { display: block }' weiter oben liegt sonst eine Regel mit hoeherer Spezifitaet auf demselben Merkmal – es waeren beide Zeichen zu sehen. */ .hfx-theme-toggle svg.hfx-theme-toggle__sonne { display: none; } html[data-theme="dark"] .hfx-theme-toggle svg.hfx-theme-toggle__sonne { display: block; } html[data-theme="dark"] .hfx-theme-toggle svg.hfx-theme-toggle__mond { display: none; } /* Logo ----------------------------------------------------------- */ .wp-block-site-logo img { height: auto; display: block; } /* Die in WordPress hinterlegte Logodatei ist weisse Schrift auf transparentem Grund und waere auf dem hellen Standard unsichtbar. Getauscht wird deshalb die Bilddatei, NICHT per 'filter: invert(1)': ein Filter macht aus dem Bild eine eigene Kompositionsebene, und die zeichnete sich innerhalb des weichgezeichneten Kopfbereichs als hellerer Kasten um das Logo ab. Die schwarze Datei ist 300 px breit, also doppelt so gross wie die Anzeige – 'content' wertet kein srcset aus. */ .wp-block-site-logo img { content: url(../../assets/img/holgerfx-logo-schwarz.png); } /* Im dunklen Schema und auf der Startseite, wo der Kopfbereich ueber dem Foto liegt, bleibt das weisse Original. */ html[data-theme="dark"] .wp-block-site-logo img, body.home .wp-block-site-logo img { content: normal; } /* Galerie: ruhiges Raster, sanftes Aufhellen beim Hover ---------- */ .hfx-gallery .wp-block-image, .hfx-gallery figure.wp-block-image { overflow: hidden; margin: 0; } /* Der Kernblock setzt flex-grow:1 – dadurch zieht ein einzelnes Bild in einer angebrochenen letzten Reihe ueber die volle Breite und sprengt das Raster. Die Klassen des Kernblocks muessen hier mit aufgefuehrt werden, sonst gewinnt dessen hoehere Spezifitaet. */ .wp-block-gallery.has-nested-images.hfx-gallery figure.wp-block-image { flex-grow: 0; } /* height:auto statt 100% – Bilder OHNE festen Zuschnitt sollen ihr echtes Seitenverhaeltnis behalten. Wo ein Zuschnitt gewollt ist, setzt der Block aspect-ratio und object-fit direkt am Bild; daraus rechnet der Browser die Hoehe selbst. */ .hfx-gallery img { display: block; width: 100%; height: auto; filter: brightness(var(--hfx-img-dim)); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease; } .hfx-gallery a:hover img, .hfx-gallery figure:hover img { transform: scale(1.035); filter: brightness(1); } /* Projekt-Kacheln ------------------------------------------------ */ /* Kein display-Wert hier: der Cover-Block zentriert seinen Inhalt ueber display:flex + align-items:center. Ein 'display: block' an dieser Stelle hat die Zentrierung ausgehebelt – die Ueberschrift klebte dadurch mit 15px Abstand an der Oberkante statt in der Mitte zu stehen. */ .hfx-tile { position: relative; overflow: hidden; } .hfx-tile img { transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } .hfx-tile:hover img { transform: scale(1.04); } /* Textblock ueber dem Bild, unten links ------------------------- */ .hfx-tile__caption { position: absolute; inset: auto 0 0 0; padding: clamp(1.25rem, 3vw, 2.5rem); background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0)); pointer-events: none; } .hfx-tile__caption * { pointer-events: auto; } /* Grossbild-Kopf einer Galerieseite ------------------------------ */ .hfx-hero { min-height: min(78vh, 900px); } /* Lightbox von WordPress dunkel einfaerben ----------------------- */ .wp-lightbox-overlay { background-color: var(--hfx-overlay); } /* Bewegung reduzieren, wenn das System es verlangt --------------- */ @media (prefers-reduced-motion: reduce) { .hfx-gallery img, .hfx-tile img, .wp-block-navigation .wp-block-navigation-item__content::after { transition: none; } .hfx-gallery a:hover img, .hfx-gallery figure:hover img, .hfx-tile:hover img { transform: none; } } /* Tastatur-Fokus sichtbar halten (Barrierefreiheit) -------------- */ :where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } /* Lange Titel wie "ARCHITECTURE" liefen auf schmalen Displays ueber den Rand hinaus. Umbrechen statt ueberlaufen. */ h1, h2, .wp-block-post-title, .wp-block-query-title { overflow-wrap: break-word; hyphens: auto; } /* ============================================================== Startseite: Vollbild-Slider Nachbau des alten yprm_banner_vertical-Widgets, aber ohne Page-Builder: CSS scroll-snap statt JavaScript-Slider. ============================================================== */ /* Scroll rastet pro Slide ein – das ergibt das Slider-Gefuehl, ohne das Mausrad zu kapern. Nur auf der Startseite. */ html:has(body.home) { scroll-snap-type: y mandatory; /* Bewusst KEIN scroll-behavior: smooth hier. Zusammen mit mandatory snap fuehrt das dazu, dass der Browser das Einrasten selbst als langsame Animation faehrt – das wirkt zaeh. Die sanften Spruenge loest slider.js gezielt aus. */ } .hfx-slide { scroll-snap-align: start; scroll-snap-stop: always; /* Cover-Block bringt 15px Innenabstand mit – die verschieben die Rasterpunkte gegen die Fensterhoehe. */ padding-top: 0; padding-bottom: 0; } /* Der Abstand zwischen Kopfbereich und Inhalt wuerde die erste Bildstrecke um 32px nach unten schieben und alle Rasterpunkte gegen die Fensterhoehe verschieben. */ body.home main { margin-top: 0; } body.home footer { scroll-snap-align: end; } /* Kopfbereich liegt auf der Startseite transparent UEBER dem Bild und nimmt keine Hoehe weg – sonst begaenne die erste Bildstrecke erst unterhalb der Navigation statt am oberen Rand. */ body.home .hfx-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; } /* Auf der Startseite liegt der Kopfbereich klar ueber dem Bild – dort waere die abgedunkelte Flaeche im Weg. */ body.home .hfx-header::before { display: none; } /* Kein Verlauf hinter dem Text mehr: Auf den dunklen Motiven war er unsichtbar, auf dem hellen Elba-Bild zeichnete er sich als Kreis ab. Die Lesbarkeit uebernimmt jetzt ein Schatten direkt an der Schrift – der wirkt nur dort, wo Text steht, und laesst das Foto unangetastet. */ .hfx-slide > .wp-block-cover__inner-container { position: relative; z-index: 1; } /* Titel: 60px / 700 / 3px Laufweite, nach unten fluide */ .hfx-slide h2 { font-size: clamp(2rem, 4.6vw, 3.75rem); font-weight: 700; letter-spacing: 3px; line-height: 1.2; text-transform: uppercase; margin: 0; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.45); } /* Beschreibung: 16px, hoechstens 560px breit, zentriert */ .hfx-slide p { font-size: 1rem; font-weight: 400; line-height: 1.5; max-width: 560px; margin-inline: auto; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5); } /* Button mit gruenem Rahmen wie im Original */ /* Leicht abgedunkelter Grund statt voellig transparent: ueber dem hellen Elba-Bild war die weisse Schrift im Button kaum zu lesen. Der gruene Rahmen und die Wirkung bleiben, nur der Untergrund traegt jetzt. */ .hfx-slide .wp-block-button__link { border: 1px solid var(--wp--preset--color--accent); background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); color: var(--wp--preset--color--contrast); font-size: 0.75rem; padding: 10px 20px; letter-spacing: 0.08em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); } .hfx-slide .wp-block-button__link:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); } /* --- Social-Leiste links, vertikal ---------------------------- */ .hfx-social { position: fixed; left: 1.75rem; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; pointer-events: none; } /* Icons wie im Fussbereich, nur untereinander. Die gruenen Trennpunkte stammen aus dem Original und bleiben. */ .hfx-social a { pointer-events: auto; opacity: 0.7; /* Schatten, damit die Icons auch auf hellen Motiven stehen bleiben – auf dem Elba-Bild verschwanden sie im Himmel. */ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75)); } .hfx-social a:hover, .hfx-social a:focus-visible { opacity: 1; color: var(--wp--preset--color--accent); } .hfx-social a:not(:last-child)::after { content: ""; display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--wp--preset--color--accent); margin: 0.85rem auto 0; } .hfx-social.hfx-socials { gap: 0.9rem; margin-top: 0; } .hfx-social .hfx-social-icon svg { width: 18px; height: 18px; } /* --- Punkt-Navigation rechts ---------------------------------- */ .hfx-dots { position: fixed; right: 1.75rem; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 0.75rem; } .hfx-dots a { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); transition: background 0.25s ease, transform 0.25s ease; } .hfx-dots a:hover, .hfx-dots a.is-active { background: var(--wp--preset--color--accent); transform: scale(1.35); } /* --- Pfeile unten rechts -------------------------------------- */ .hfx-arrows { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; display: flex; flex-direction: column; gap: 0.15rem; } .hfx-arrows a { width: 2.25rem; height: 1.75rem; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75)); display: grid; place-items: center; color: var(--wp--preset--color--contrast); opacity: 0.7; transition: opacity 0.25s ease, color 0.25s ease; } .hfx-arrows a:hover { opacity: 1; color: var(--wp--preset--color--accent); } .hfx-arrows svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; } /* Auf schmalen Displays stoeren die seitlichen Leisten – ausblenden */ @media (max-width: 900px) { .hfx-social, .hfx-dots, .hfx-arrows { display: none; } } @media (prefers-reduced-motion: reduce) { html:has(body.home) { scroll-snap-type: none; scroll-behavior: auto; } } /* Text nur fuer Screenreader (Punkt-Navigation braucht Beschriftungen) */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================== Galerie-Reihen: Quer- und Hochformat nebeneinander Querformat 2/3, Hochformat 1/3. Die Reihenhoehe gibt das Hochformat (3:4) vor, das Querformat (3:2) fuellt sie aus. ============================================================== */ .hfx-row { margin-block: 0; } .hfx-row + .hfx-row { margin-top: var(--wp--preset--spacing--30); } /* Spalten auf gleiche Hoehe ziehen, damit die Reihe unten buendig schliesst */ .hfx-row.wp-block-columns { align-items: stretch; } .hfx-row .wp-block-column { display: flex; } .hfx-row .wp-block-image { width: 100%; margin: 0; overflow: hidden; } .hfx-row .wp-block-image img { width: 100%; height: 100%; object-fit: cover; } /* Auf schmalen Displays stapeln die Spalten (Kernverhalten). Dann stoert ein erzwungenes Seitenverhaeltnis – die Bilder duerfen atmen. Gesetzt wird das ECHTE Verhaeltnis aus '--hfx-ar' (kommt aus build-content.php), nicht 'auto'. 'aspect-ratio: auto' ueberschreibt auch die vom Browser aus width/height abgeleitete Angabe: ein noch nicht geladenes Bild hatte damit die Hoehe 0, und solange WordPress' sizes="auto" aktiv war, sprang stattdessen dessen Platzhalter von 1500 px ein – jedes verzoegerte Bild wurde dadurch extrem lang gezogen und beschnitten. */ @media (max-width: 781px) { .hfx-row .wp-block-image img { height: auto; aspect-ratio: var( --hfx-ar, auto ) !important; } } /* ============================================================== Bildansicht (eigene Lightbox) Blaettert ueber alle Bilder einer Seite hinweg – die Kern- Lightbox kann das nur innerhalb eines Galerie-Blocks. ============================================================== */ .hfx-lightbox { position: fixed; inset: 0; z-index: 10000; display: grid; /* minmax(0, 1fr) statt 1fr: ohne die Null-Untergrenze darf die Spalte bzw. Zeile mit dem Inhalt mitwachsen und das Bild laeuft ueber den Bildschirmrand hinaus. */ grid-template-columns: auto minmax(0, 1fr) auto; /* Zweite Zeile fuer Titel, Aufnahmedaten und Zaehler. Frueher hing der Block absolut am unteren Rand und der Platz dafuer war als zusaetzliches padding-bottom geschaetzt. Seit dort bis zu drei Zeilen stehen, reichte die Schaetzung nicht mehr: der Titel lag unter dem Bild. Als eigene Rasterzeile nimmt er sich genau die Hoehe, die er braucht. */ grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: clamp(0.5rem, 2vw, 1.5rem); padding: clamp(1rem, 4vw, 3rem); background: var(--hfx-overlay); opacity: 0; transition: opacity 0.2s ease; } .hfx-lightbox.is-open { opacity: 1; } .hfx-lightbox[hidden] { display: none; } .hfx-lightbox__figure { grid-column: 2; grid-row: 1; margin: 0; /* Flexbox statt Grid: in einem Grid waechst die implizite Zeile auf die Bildhoehe mit, und max-height:100% des Bildes bezieht sich dann auf diese mitgewachsene Zeile statt auf die Fensterhoehe. Im Flex-Container greift die Begrenzung. */ display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; } /* Buehne: Die Vorschau traegt das Layout (sie ist sofort da und hat dasselbe Seitenverhaeltnis), das scharfe Bild liegt deckungsgleich darueber und blendet ein, sobald es geladen ist. */ .hfx-lightbox__buehne { position: relative; max-width: 100%; max-height: 100%; line-height: 0; /* Die Vorschau ist leicht vergroessert, damit die Weichzeichnung nicht ausfranst – ohne diese Begrenzung ragt sie ueber den Bildbereich. */ overflow: hidden; } .hfx-lightbox__vorschau { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; filter: blur(16px); /* Etwas groesser skaliert, sonst franst die Weichzeichnung am Rand aus. */ transform: scale(1.04); transition: opacity 0.4s ease; cursor: default; } .hfx-lightbox__voll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.4s ease; cursor: default; } .hfx-lightbox__buehne.ist-scharf .hfx-lightbox__voll { opacity: 1; } /* Vorschau erst ausblenden, wenn das scharfe Bild vollstaendig da ist – sonst blitzt kurz der schwarze Hintergrund durch. */ .hfx-lightbox__buehne.ist-scharf .hfx-lightbox__vorschau { opacity: 0; transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { .hfx-lightbox__vorschau, .hfx-lightbox__voll { transition: none; } } /* Pfeile und Schliessen: duenn, zurueckhaltend, gruen beim Darueberfahren */ .hfx-lightbox button { background: none; border: 0; padding: 0.5rem; cursor: pointer; color: var(--wp--preset--color--contrast); opacity: 0.45; transition: opacity 0.25s ease, color 0.25s ease; display: grid; place-items: center; } .hfx-lightbox button:hover, .hfx-lightbox button:focus-visible { opacity: 1; color: var(--wp--preset--color--accent); } .hfx-lightbox button[hidden] { display: none; } .hfx-lightbox svg { width: clamp(1.5rem, 3vw, 2.25rem); height: clamp(1.5rem, 3vw, 2.25rem); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } .hfx-lightbox__prev { grid-column: 1; grid-row: 1; } .hfx-lightbox__next { grid-column: 3; grid-row: 1; } .hfx-lightbox__close { position: absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem); /* Ohne diese Stapelangabe liegt das Kreuz HINTER dem Foto. Der Knopf steht im Markup vor der Buehne, und die Buehne ist 'position: relative' – damit malt der Browser sie darueber. Auf dem Telefon, wo das Bild bis an den oberen Rand reicht, war das Kreuz dadurch nicht mehr zu treffen. */ z-index: 3; } .hfx-lightbox__close svg { width: 1.5rem; height: 1.5rem; } /* Zaehler unten mittig, bewusst leise */ .hfx-lightbox__count { margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--hfx-lightbox-count); } /* Auf schmalen Displays wandern die Pfeile neben den Zaehler, damit das Bild die volle Breite behaelt. */ @media (max-width: 600px) { .hfx-lightbox { grid-template-columns: 1fr; padding: 0.75rem; } .hfx-lightbox__figure { grid-column: 1; } .hfx-lightbox__prev, .hfx-lightbox__next { position: absolute; bottom: clamp(0.75rem, 2vw, 1.5rem); grid-column: 1; z-index: 3; } .hfx-lightbox__prev { left: 1.5rem; } .hfx-lightbox__next { right: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .hfx-lightbox { transition: none; } } /* ============================================================== Kontaktformular (Contact Form 7) CF7 liefert nur nacktes HTML – Gestaltung kommt von hier. ============================================================== */ .hfx-form { max-width: 520px; margin-top: var(--wp--preset--spacing--40); } .hfx-form p { margin: 0 0 var(--wp--preset--spacing--30); } .hfx-form input[type="text"], .hfx-form input[type="email"], .hfx-form textarea { width: 100%; box-sizing: border-box; background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--border); border-radius: 0; padding: 0.85rem 1rem; font-family: inherit; font-size: 0.9375rem; font-weight: 300; line-height: 1.6; transition: border-color 0.25s ease; } .hfx-form textarea { resize: vertical; min-height: 9rem; } .hfx-form ::placeholder { color: var(--hfx-placeholder); opacity: 1; } .hfx-form input:focus, .hfx-form textarea:focus { outline: none; border-color: var(--wp--preset--color--accent); } /* Absendeknopf im Stil der uebrigen Buttons */ .hfx-form input[type="submit"] { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--accent); border-radius: 0; padding: 0.85rem 2.25rem; font-family: inherit; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; } .hfx-form input[type="submit"]:hover, .hfx-form input[type="submit"]:focus-visible { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); } /* Rueckmeldungen von CF7 ---------------------------------------- */ .wpcf7 form .wpcf7-response-output { margin: var(--wp--preset--spacing--30) 0 0; padding: 0.85rem 1rem; border: 1px solid var(--wp--preset--color--border); font-size: 0.875rem; } .wpcf7 form.sent .wpcf7-response-output { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #c96a6a; color: #e29393; } .wpcf7-not-valid-tip { color: #e29393; font-size: 0.8125rem; margin-top: 0.35rem; } .wpcf7-spinner { background-color: var(--wp--preset--color--accent); } /* ============================================================== Social-Icons Glyphen aus dem Simple-Icons-Set (CC0) – ein Set, damit die vier Marken nebeneinander nicht wie Fundstuecke wirken. Sie sind als Flaechen gezeichnet, deshalb fill statt stroke. ============================================================== */ .hfx-socials { display: flex; align-items: center; gap: 0; margin-left: -0.75rem; margin-top: var(--wp--preset--spacing--30); } .hfx-social-icon { display: grid; place-items: center; /* Das Sinnbild bleibt klein, die Tippflaeche wird gross. 17 px waren mit dem Daumen kaum zu treffen; die Norm nennt 24 px als Untergrenze und 44 px als Ziel. Ueber min-width/min-height statt Innenabstand, damit die Reihe nicht auseinanderfaellt. */ min-width: 44px; min-height: 44px; color: var(--wp--preset--color--contrast); opacity: 0.55; transition: opacity 0.25s ease, color 0.25s ease; } .hfx-social-icon:hover, .hfx-social-icon:focus-visible { opacity: 1; color: var(--wp--preset--color--accent); } .hfx-social-icon svg { display: block; width: 20px; height: 20px; fill: currentColor; } /* Im Fussbereich zurueckhaltender: kleiner und blasser */ footer .hfx-socials { margin-top: 0; gap: 0; /* Die Tippflaechen tragen den Abstand jetzt selbst. Der negative Aussenabstand haelt das erste Zeichen buendig am Rand. */ margin-right: -0.75rem; } footer .hfx-social-icon { opacity: 0.38; } footer .hfx-social-icon svg { width: 17px; height: 17px; } /* Auf About me sind die Icons eigener Inhalt und kein Beiwerk wie im Fussbereich: groesser und in reinem Weiss statt gedaempft. */ .entry-content .hfx-socials { gap: 2.4rem; } .entry-content .hfx-socials .hfx-social-icon { opacity: 1; color: var(--wp--preset--color--contrast); } .entry-content .hfx-socials .hfx-social-icon svg { width: 30px; height: 30px; } .entry-content .hfx-socials .hfx-social-icon:hover, .entry-content .hfx-socials .hfx-social-icon:focus-visible { color: var(--wp--preset--color--accent); } /* Links im Fliesstext erkennbar machen. Sie waren weiss und ohne Unterstreichung – von normalem Text also nicht zu unterscheiden. Dezente Linie in der Rahmenfarbe, gruen beim Darueberfahren. Bewusst nur Absaetze: Navigation, Buttons und Social-Icons bleiben unberuehrt. */ .entry-content p a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--wp--preset--color--border); text-underline-offset: 0.22em; transition: color 0.25s ease, text-decoration-color 0.25s ease; } .entry-content p a:hover, .entry-content p a:focus-visible { color: var(--wp--preset--color--accent); text-decoration-color: var(--wp--preset--color--accent); } /* Optischer Ausgleich zwischen den Marken. Die vier Glyphen sitzen zwar auf demselben Raster, decken darin aber sehr unterschiedlich viel Flaeche ab: der Instagram-Rahmen fuellt das Quadrat fast aus, die Flickr-Punkte und der 500px-Schriftzug kaum. Rein geometrisch gleich gross wirken sie deshalb ungleich gross. Bei 30px auf About me faellt das auf, im kleinen Fussbereich nicht. */ .entry-content .hfx-socials [aria-label="Flickr"] svg { transform: scale(1.18); } .entry-content .hfx-socials [aria-label="500px"] svg { transform: scale(1.3); } .entry-content .hfx-socials [aria-label="VSCO"] svg { transform: scale(1.06); } /* Bilder blenden beim Hochscrollen sanft ein. Die Klasse hfx-reveal setzt erst JavaScript – ohne JavaScript bleiben die Bilder normal sichtbar und nichts geht verloren. */ .hfx-row figure.wp-block-image.hfx-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } .hfx-row figure.wp-block-image.hfx-reveal.is-sichtbar { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hfx-row figure.wp-block-image.hfx-reveal { opacity: 1; transform: none; transition: none; } } /* Aufnahmedaten und Zaehler am unteren Rand der Bildansicht */ .hfx-lightbox__fuss { grid-column: 1 / -1; grid-row: 2; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; max-width: 90vw; } .hfx-lightbox__exif { margin: 0; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--hfx-lightbox-exif); } .hfx-lightbox__exif[hidden] { display: none; } /* Bildtitel ueber den Aufnahmedaten – etwas heller und groesser, damit die beiden Zeilen sich unterscheiden: was es ist, und wie es entstand. */ .hfx-lightbox__titel { margin: 0; font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hfx-lightbox-titel); } .hfx-lightbox__titel[hidden] { display: none; } /* ============================================================== Galerie als Kontaktbogen -------------------------------------------------------------- Uebernommen am 04.08.2026 aus dem Entwurf, nachdem Holger ihn abgenommen hat. Der Seitenname bleibt gross, aber nicht mehr so gross wie im gekauften Theme: dort stand er mit 112 px und schob das erste Foto auf 453 von 900 Pixeln, also auf die Haelfte des ersten Bildschirms. Jetzt 68 px, erstes Foto bei 337. Neu sind zwei Dinge, und beide zeigen nur, was ohnehin wahr ist: eine Datenzeile unter dem Seitennamen (Anzahl der Aufnahmen, Zeitraum) und unter jedem Foto sein Name mit seinen Aufnahmedaten. Letztere lagen vorher hinter einem Klick in der Grossansicht. Das System dahinter: links steht, was es ist, rechts stehen die Fakten. Einmal fuer die Serie, einmal fuer jedes Foto. ============================================================== */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../../assets/fonts/jetbrains-mono.woff2) format("woff2"); } :root { /* Der Grund soll so neutral sein, dass die Farbe allein aus den Fotos kommt. Ein Hauch waermer als reines Weiss, damit Schwarzweiss nicht klinisch wirkt. */ --papier: #fafaf8; --tinte: #14140f; --grau: #6e6e66; --linie: #e2e2dd; --daten: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } html[data-theme="dark"] { --papier: #0b0b0a; --tinte: #f2f2ee; --grau: #8a8a80; --linie: #262622; } body { background: var(--papier); color: var(--tinte); } /* --- Kopfzeile der Serie --------------------------------------- Der Seitenname bleibt gross, das war Holgers Wunsch und es passt zur Seite. Nur nicht mehr so gross wie im Original: dort stand er mit 112 px und schob das erste Foto auf die Haelfte des ersten Bildschirms. Neu ist die Zeile darunter. Sie traegt, was wahr ist, und fuehrt die Schreibmaschinenschrift ein, die weiter unten jedes Foto beschriftet. Rechts steht der Beschreibungssatz, auf derselben Grundlinie. */ .hfx-serie { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 3rem; padding: 2.75rem 0 1.1rem; border-bottom: 1px solid var(--linie); margin-bottom: 2.25rem; } .hfx-serie__block { min-width: 0; } .hfx-serie__name { margin: 0; /* Rund zwei Drittel der urspruenglichen Groesse. Gross genug, um die Seite anzufuehren, klein genug, dass das erste Foto oben bleibt. */ font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 200; letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; } .hfx-serie__daten { margin: 0.7rem 0 0; font-family: var(--daten); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--grau); line-height: 1; white-space: nowrap; } .hfx-serie__satz { margin: 0; max-width: 40ch; font-size: 0.875rem; font-weight: 300; line-height: 1.5; color: var(--grau); text-align: right; } /* --- Bildunterschrift ------------------------------------------ Die Signatur des Entwurfs. Name links, Aufnahmedaten rechts, dazwischen nichts. Auf einer Haarlinie, damit die Reihe unten abschliesst. */ .hfx-row .wp-block-column { flex-direction: column; } .hfx-row .wp-block-image { flex: 1 1 auto; min-height: 0; } .hfx-bildzeile { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 0.55rem 0 0; border-top: 1px solid var(--linie); margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.3; } /* Die Datenzeile braucht rund 330 px am Stueck. In der schmalen Drittel- Spalte gibt es die nicht, dort brach sie schon vorher mitten in der Aufzaehlung um ("... f/5.6 ·" / "1/8 s · ISO 5600"). Statt nach der Fensterbreite zu gehen, fragt die Regel die SPALTE: nur wo Platz ist, stehen die Daten. Sonst bleiben sie in der Grossansicht, einen Klick entfernt. Browser ohne Container-Abfragen zeigen sie wie bisher. */ .hfx-row .wp-block-column { container-type: inline-size; } @container (max-width: 430px) { .hfx-bildzeile__daten { display: none; } } .hfx-bildzeile__name { letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; white-space: nowrap; } .hfx-bildzeile__daten { font-family: var(--daten); color: var(--grau); letter-spacing: 0.02em; text-align: right; } /* Auf schmalen Displays steht im Raster nur noch der Name. Nebeneinander passen Name und Aufnahmedaten dort nicht, untereinander verdoppeln sie die Hoehe jeder Bildunterschrift, und die Datenzeile ist laenger als das halbe Display. Die Daten sind damit nicht verloren: sie stehen weiterhin in der Grossansicht, einen Fingertipp entfernt. */ @media (max-width: 780px) { /* Die Unterschrift muss sichtbar zum Bild DARUEBER gehoeren. Vorher lag sie 17 px unter ihrem Bild und 16 px ueber dem naechsten, also praktisch mittig zwischen beiden, und las sich wie eine Ueberschrift. Jetzt 12 px nach oben, 40 px nach unten. */ .hfx-bildzeile { margin-top: 5px; padding-top: 7px; } .hfx-row .wp-block-column { padding-bottom: 1.5rem; } } @media (max-width: 600px) { .hfx-bildzeile__daten { display: none; } .hfx-serie { grid-template-columns: 1fr; } .hfx-serie { grid-template-columns: 1fr; } .hfx-serie__satz { text-align: left; } } /* --- Ruhe drumherum -------------------------------------------- Die Bilder trugen bisher eine Abdunklung im Ruhezustand und hellten beim Darueberfahren auf. Auf hellem Grund ist das ein Effekt ohne Aufgabe: Ein Foto soll sofort so aussehen, wie es gemeint ist. */ .hfx-gallery img { filter: none; } .hfx-gallery a:hover img, .hfx-gallery figure:hover img { transform: none; filter: none; } /* Stattdessen zeigt die Unterschrift, dass hier etwas anklickbar ist. */ .hfx-row .wp-block-column:hover .hfx-bildzeile__name { color: var(--wp--preset--color--accent); } .hfx-row .wp-block-image img { cursor: zoom-in; transition: opacity 0.3s ease; } .hfx-row .wp-block-column:hover .hfx-bildzeile, .hfx-row .wp-block-column:hover img { transition: none; } @media (prefers-reduced-motion: reduce) { .hfx-row .wp-block-image img { transition: none; } } /* Trefferflaechen fuer den Finger --------------------------------- Der Menueknopf mass 24x24 px. Das ist das Minimum aus WCAG 2.2, nicht die 44 px, die Apple und Google vorsehen, und Holger hat ihn auf dem Telefon nicht getroffen. Das Zeichen bleibt gleich gross, nur die Flaeche waechst. */ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Der Umschalter daneben soll dieselbe Flaeche haben, damit die beiden nebeneinander nicht unterschiedlich gross zu treffen sind. */ @media (max-width: 600px) { .hfx-theme-toggle { min-width: 44px; min-height: 44px; padding-bottom: 0; } } /* ============================================================== Ausruestung auf About -------------------------------------------------------------- Uebernommen am 04.08.2026, nachdem Holger den Entwurf abgenommen hat. Statt zweier Saetze Fliesstext stehen die Kameras als Datenblock: links das Geraet in der Schreibmaschinenschrift, also derselben Stimme wie die Aufnahmedaten unter den Fotos, rechts wann es dabei ist. ============================================================== */ .hfx-ausruestung { margin: 1.25rem 0 0; border-top: 1px solid var(--linie); } .hfx-ausruestung div { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: 0.6rem 0; border-bottom: 1px solid var(--linie); } .hfx-ausruestung b { font-family: var(--daten); font-size: 0.8125rem; letter-spacing: 0.04em; font-weight: 400; } .hfx-ausruestung span { font-size: 0.8125rem; font-weight: 300; color: var(--grau); text-align: right; } /* --- Weiter zur naechsten Serie -------------------------------- Am Ende jeder Galerie stand bisher sofort der Footer: vier Sackgassen. Diese Zeile macht daraus einen Rundgang. Gleiche Sprache wie der Seitenkopf: Haarlinie, Mono-Zeile, Name in der Anzeigeschrift. */ .hfx-weiter { display: block; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 0.55rem; border-top: 1px solid var(--linie); } .hfx-weiter__zeile { margin: 0; font-family: var(--daten); font-size: 0.75rem; letter-spacing: 0.06em; line-height: 1; color: var(--grau); } .hfx-weiter__block { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 0.85rem; } .hfx-weiter__name { font-size: clamp(1.9rem, 4vw, 3.4rem); font-weight: 200; letter-spacing: 0.02em; text-transform: uppercase; line-height: 0.95; } .hfx-weiter__pfeil { flex: 0 0 auto; width: clamp(1.6rem, 2.5vw, 2.2rem); height: auto; fill: none; stroke: currentColor; stroke-width: 1.1; transition: transform 0.25s ease; } .hfx-weiter:hover .hfx-weiter__pfeil, .hfx-weiter:focus-visible .hfx-weiter__pfeil { transform: translateX(0.4rem); } @media (prefers-reduced-motion: reduce) { .hfx-weiter__pfeil { transition: none; } .hfx-weiter:hover .hfx-weiter__pfeil, .hfx-weiter:focus-visible .hfx-weiter__pfeil { transform: none; } } /* Unter etwa 330 px passt "Architecture" in der Mindestgroesse nicht mehr neben den Pfeil, der dann rechts ueber die Haarlinie hinausragt. */ @media (max-width: 400px) { .hfx-weiter__block { gap: 1rem; } .hfx-weiter__name { font-size: 1.6rem; } } /* --- Fehlerseite: der leere Frame ------------------------------ Ein Kontaktbogen kennt keine fehlenden Seiten, nur leere Frames. Der Rahmen ist bewusst leer, die Bildzeile darunter spricht. */ .hfx-fehler { max-width: 720px; } .hfx-fehler__rahmen { aspect-ratio: 3 / 2; border: 1px solid var(--linie); } .hfx-fehler__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding-top: 0.55rem; border-top: 1px solid var(--linie); margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.3; } .hfx-fehler__name { margin: 0; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; line-height: 1.3; } .hfx-fehler__nummer { margin: 0; font-family: var(--daten); color: var(--grau); letter-spacing: 0.02em; } .hfx-fehler__hinweis { margin-top: 2.25rem; font-size: 0.875rem; font-weight: 300; color: var(--grau); } .hfx-fehler__hinweis a { border-bottom: 1px solid var(--linie); padding-bottom: 0.1em; } /* --- Weiche Seitenuebergaenge ---------------------------------- Beim Wechsel von Seite zu Seite tritt die alte Seite schnell ab und der Inhalt der neuen steigt sanft von unten ein; der Kopf bleibt stehen. Eine reine Ueberblendung war hier unsichtbar: zwei Galerieseiten sehen sich zu aehnlich. Browser ohne View Transitions ignorieren alles hier, es geht nichts verloren. */ @view-transition { navigation: auto; } @keyframes hfx-abgang { to { opacity: 0; } } @keyframes hfx-auftritt { from { opacity: 0; transform: translateY(16px); } } ::view-transition-old(root) { animation: hfx-abgang 0.15s ease both; } ::view-transition-new(root) { animation: hfx-auftritt 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; } .hfx-header { view-transition-name: hfx-kopf; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* --- About: Portraet neben dem Text ----------------------------- Text links in einer Flucht mit der Ueberschrift, das einzige Foto der Seite rechts. Unter dem Foto steht KEINE Bildzeile: auf einer Seite mit genau einem Bild benennt sie nichts, was man unterscheiden muesste. Titel und Aufnahmedaten bleiben in den data-Attributen und damit in der Grossansicht. Die Textspalte ist oben und unten verankert: Absaetze oben, Verweise nach anderswo unten auf Hoehe der Bildunterkante. Der Freiraum liegt dadurch ZWISCHEN zwei gesetzten Bloecken statt unter dem Text. */ .hfx-portraet { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--40); align-items: stretch; margin-bottom: var(--wp--preset--spacing--50); } /* Im Markup steht das Bild vor dem Text, damit es auf dem Telefon direkt unter der Ueberschrift steht. Auf breiten Schirmen tauschen die beiden ihre Spalten. */ .hfx-portraet__bild { grid-column: 2; grid-row: 1; } .hfx-portraet__text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; } .hfx-portraet__bild figure { margin: 0; } .hfx-portraet__bild img { display: block; width: 100%; height: auto; } .hfx-portraet__text > :first-child { margin-top: 0; } /* Schiebt sich an den Fuss der Spalte. Ohne freien Platz (gestapelt auf dem Telefon) bleibt nur der Innenabstand. */ .hfx-anderswo { margin-top: auto; padding-top: 2.5rem; } .hfx-anderswo__marke { margin: 0; padding-top: 0.55rem; border-top: 1px solid var(--linie); font-family: var(--daten); font-size: 0.75rem; letter-spacing: 0.06em; line-height: 1; color: var(--grau); } @media (max-width: 780px) { .hfx-portraet { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40); } /* Gestapelt zaehlt wieder die Reihenfolge im Markup: Bild, dann Text. */ .hfx-portraet__bild, .hfx-portraet__text { grid-column: 1; grid-row: auto; } .hfx-anderswo { padding-top: 2rem; } } /* --- Schemawechsel ohne haengende Farben ------------------------ Waehrend des Umschaltens setzt das Skript im Seitenkopf kurz die Klasse 'hfx-schaltet' auf . Ohne sie behalten Elemente mit 'transition: color', deren Farbe aus einer Schema-Variablen stammt, in Chrome ihren alten berechneten Wert: Umschalter, Textlinks und Social-Icons blieben dunkel auf dunklem Grund, bis die Seite neu geladen wurde. Der Uebergang beim Darueberfahren bleibt davon unberuehrt, die Klasse liegt nur fuer eine einzige Neuberechnung an. */ .hfx-schaltet, .hfx-schaltet * { transition: none !important; } /* Fotos sind seit 05.08.2026 auch mit der Tastatur zu oeffnen (siehe lightbox.js). Dann muessen sie im Tabulatorlauf auch sichtbar sein. */ .hfx-gallery img:focus-visible, .hfx-row img:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } /* --- Unsichtbare Hauptueberschrift ------------------------------ Startseite und Travel Journal fuehren mit Bildern und tragen keine sichtbare Ueberschrift. Fuer Screenreader und Suchmaschinen steht dort trotzdem eine h1, ausgeblendet ueber .screen-reader-text. Sie darf aber das Layout nicht verschieben: als erstes Kind nimmt sie dem folgenden Block den Zustand ':first-child', und der bekam dadurch 2 rem Abstand nach oben (gemessen: alles rutschte um 32 px). */ main > h1.screen-reader-text + * { margin-block-start: 0; }