/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/
/* ------------------------------------------------------------------------
 * Eigene Anpassungen the-joy-of-a-lifetime (Doku: Obsidian, Projekt „Website")
 * --------------------------------------------------------------------- */

/* Lightbox: Seite im Hintergrund nicht scrollen lassen (zusätzlich zu js/lightbox.js) */
html.lg-on {
	overflow: hidden !important;
}

/* Lightbox: Hintergrund weichzeichnen statt fast deckendem Schwarz (Unschärfe 24 → 40 px am 26.10.2026, damit die Kachelkanten nicht durchscheinen).
 * top/bottom über den Rand hinaus: Im Vollbild auf dem iPad passt Safari die fest positionierte
 * Ebene nicht an die neue Höhe an – ohne Überstand blieben oben/unten Streifen frei. */
.lg-backdrop {
	top: -25vh;
	bottom: -25vh;
	background-color: rgba(0, 0, 0, 0.85);
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
}
.lg-backdrop.in {
	opacity: 1;
}

/* Burgermenü (Overlay): Hintergrund weichzeichnen statt nur leicht transparent.
 *
 * Desktop: Uncode blendet das ganze Overlay über opacity ein. Solange ein Elternelement nicht voll
 * deckend ist, rechnen Browser backdrop-filter nicht – die Unschärfe "ploppte" erst am Ende rein,
 * danach wartete Uncode noch ~0,45 s, bevor die Menüpunkte kamen (gesamt ~1,1 s).
 * Daher: Overlay sofort sichtbar, Schleier + Unschärfe blenden selbst ein, Menüpunkte starten mit
 * dem Öffnen (Klasse .open) statt mit Uncodes später gesetzter Klasse .open-items. */
@media (min-width: 960px) {
	.overlay.overlay-menu.open {
		opacity: 1 !important;
		transition: none !important;
	}
	/* beim Schließen erst ausblenden lassen, dann Overlay weg */
	.overlay.overlay-menu:not(.open) {
		transition: opacity 0s 0.35s, visibility 0s 0.35s, z-index 0s 0.35s !important;
	}
	.overlay-menu .overlay-bg {
		background-color: rgba(255, 255, 255, 0) !important;
		opacity: 1 !important;
		-webkit-backdrop-filter: blur(0);
		backdrop-filter: blur(0);
		transition: background-color 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out, backdrop-filter 0.3s ease-out;
	}
	.overlay-menu.open .overlay-bg {
		background-color: rgba(255, 255, 255, 0.85) !important;
		-webkit-backdrop-filter: blur(40px);
		backdrop-filter: blur(40px);
	}
	.overlay.overlay-sequential.overlay-menu.open .menu-sidebar-inner .menu-smart > li {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.3s ease-out 0.1s, transform 0.3s ease-out 0.1s;
	}
}

/* Mobil (Uncode-Umbruch 959px) zeigt Uncode statt der Fläche oben ein deckend weißes Menü-Panel,
 * das von oben aufklappt – dort Schleier und Unschärfe direkt auf das Panel */
@media (max-width: 959px) {
	.overlay-menu .overlay-bg {
		background-color: rgba(255, 255, 255, 0.85) !important;
		opacity: 1 !important;
		-webkit-backdrop-filter: blur(40px);
		backdrop-filter: blur(40px);
	}
	.menu-overlay .overlay-menu .main-menu-container {
		background-color: rgba(255, 255, 255, 0.85) !important;
		-webkit-backdrop-filter: blur(40px);
		backdrop-filter: blur(40px);
	}
	.menu-overlay .overlay-menu .menu-sidebar-inner,
	.menu-overlay .overlay-menu .menu-primary-inner {
		background-color: transparent !important;
	}
}

/* Scrollleiste: Beim Öffnen von Burgermenü oder Lightbox setzen Uncode bzw. lightGallery
 * overflow: hidden auf <html>. Bei sichtbaren Scrollleisten (macOS mit Maus, Windows) verschwand
 * die Leiste dann und die Seite sprang um ihre Breite nach rechts. "stable" hält den Platz frei. */
html {
	scrollbar-gutter: stable;
}

/* Burgermenü, Desktop: weiße Kopfzeile synchron zum Schleier aus- und wieder einblenden.
 * Uncode macht die Kopfzeile bei offenem Menü transparent (html.overlay-open), auf Seiten ohne
 * Seitenkopf aber ohne Übergang – und setzt sie beim Schließen erst ~0,6 s nach dem Klick zurück,
 * wenn der Schleier längst weg ist: Das Weiß "ploppte" rein. Daher: Sobald das Menü schließt
 * (Overlay verliert .open), Kopfzeile wieder weiß, mit gleicher Blende wie der Schleier. */
@media (min-width: 960px) {
	html.overlay-open body.uncode-loaded .menu-container.menu-hide.style-color-xsdn-bg {
		transition: transform 0.5s ease-in-out, background-color 0.3s ease-out !important;
	}
	html.overlay-open body:has(.overlay-menu:not(.open)) .menu-container.menu-hide.style-color-xsdn-bg {
		background-color: #ffffff !important;
	}
}

/* Navigationslogik (Burgermenü und Kategorieleiste der Startseite), Wunsch David 26.10.2026:
 * Akzentfarbe = Zustand (aktuelle Seite bzw. gewählte Kategorie),
 * leichte Vergrößerung = Bewegung (Mouseover/Tastaturfokus). Kein Farbwechsel beim Mouseover.
 * Vergrößerung nur bei Geräten mit echter Maus – auf Touchgeräten bliebe :hover nach dem Tippen hängen. */
.overlay-menu .menu-primary-inner > li > a,
.isotope-filters .isotope-nav-link {
	color: #303133 !important;
	transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.overlay-menu .menu-primary-inner > li.current-menu-item > a,
.isotope-filters .isotope-nav-link.active {
	color: #fa637b !important;
}
.isotope-filters .isotope-nav-link {
	display: inline-block; /* transform wirkt nicht auf Inline-Elemente */
}
@media (hover: hover) {
	.overlay-menu .menu-primary-inner > li > a:hover,
	.isotope-filters .isotope-nav-link:hover {
		transform: scale(1.08);
	}
}
.overlay-menu .menu-primary-inner > li > a:focus-visible,
.isotope-filters .isotope-nav-link:focus-visible {
	transform: scale(1.08);
}

/* Kategorieleiste der Seite „Moments" (ID 131031): Akzentfarbe in der kleinen Schrift etwas dunkler –
 * wirkte in 13 px heller als flächig. Im Farbraum OKLCH nur die Helligkeit gesenkt (L 0,698 → 0,638),
 * Buntheit und Farbton unverändert; eine Mischung mit Grau (#d2596d) wirkte entsättigt/schmutzig.
 * Kontrast 2,9 → 3,7 : 1. Burgermenü (große Schrift) behält das Original #fa637b. Wunsch David 26.10.2026. */
.page-id-131031 .isotope-filters .isotope-nav-link.active {
	color: #e44f69 !important;
}

/* Kategorieleiste: Tippziele auf Handy/Tablet mindestens 24 px hoch (Lighthouse „target-size": 23 px).
 * Uncode setzt dort 5 px Polsterung; die Leiste wird dadurch 2 px höher. 26.10.2026 */
@media (max-width: 959px) {
	.isotope-filters .isotope-nav-link {
		padding-top: 5.5px !important;
		padding-bottom: 5.5px !important;
	}
}

/* Scrollsperre bei offener Lightbox bzw. offenem Burgermenü (Klasse setzt js/lightbox.js).
 * Ergänzt die Lenis-Sperre im Skript; overscroll-behavior verhindert das Durchreichen an die Seite. */
html.joal-scroll-gesperrt,
html.joal-scroll-gesperrt body {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* Eingangsanimation beim Seitenaufbau (Wunsch David 26.10.2026): Logo und Burger gleiten von oben
 * herein, die Kategorien (Startseite) einzeln als Welle von unten; dabei löst sich eine leichte Unschärfe.
 *
 * Start erst mit body.uncode-loaded (+0,2 s; Tempo am 26.10.2026 auf Wunsch David um ~25 % erhöht): Safari zeichnet vorher kaum Bilder (Seitenaufbau, danach
 * ~0,25 s Blockade durch Uncodes Startcode) – eine früher gestartete Animation war beim ersten sichtbaren
 * Bild schon fast fertig und wirkte wie "aufpoppen, einrasten".
 * Sicherheitsnetz: Kommt uncode-loaded nie (Skriptfehler), macht "joal-notfall" nach 3 s alles sichtbar.
 * Nur opacity, filter und die eigene Eigenschaft "translate" (nicht "transform") – keine Kollision mit
 * Uncodes Bewegungen oder der Mouseover-Vergrößerung; Füllmodus "backwards" kann nicht hängen bleiben. */
@keyframes joal-einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes joal-scharf     { from { filter: blur(6px); } to { filter: blur(0); } }
@keyframes joal-von-oben   { from { translate: 0 -18px; } to { translate: 0 0; } }
@keyframes joal-von-unten  { from { translate: 0 14px; } to { translate: 0 0; } }
@keyframes joal-notfall    { to { opacity: 1; } }

body:not(.uncode-loaded) #main-logo,
body:not(.uncode-loaded) .mmb-container,
body:not(.uncode-loaded) .isotope-filters .menu-smart > li {
	opacity: 0;
	animation: joal-notfall 0s 3s forwards;
}
body.uncode-loaded #main-logo,
body.uncode-loaded .mmb-container {
	animation:
		joal-einblenden 0.75s cubic-bezier(0.25, 0.1, 0.25, 1) var(--joal-start, 0.2s) backwards,
		joal-scharf 0.7s ease-out var(--joal-start, 0.2s) backwards,
		joal-von-oben 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--joal-start, 0.2s) backwards;
}
body.uncode-loaded .mmb-container { --joal-start: 0.32s; }
body.uncode-loaded .isotope-filters .menu-smart > li {
	animation:
		joal-einblenden 0.7s cubic-bezier(0.25, 0.1, 0.25, 1) var(--joal-start, 0.4s) backwards,
		joal-scharf 0.6s ease-out var(--joal-start, 0.4s) backwards,
		joal-von-unten 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--joal-start, 0.4s) backwards;
}
body.uncode-loaded .isotope-filters .menu-smart > li:nth-child(2) { --joal-start: 0.445s; }
body.uncode-loaded .isotope-filters .menu-smart > li:nth-child(3) { --joal-start: 0.49s; }
body.uncode-loaded .isotope-filters .menu-smart > li:nth-child(4) { --joal-start: 0.535s; }
body.uncode-loaded .isotope-filters .menu-smart > li:nth-child(5) { --joal-start: 0.58s; }
body.uncode-loaded .isotope-filters .menu-smart > li:nth-child(6) { --joal-start: 0.625s; }
body.uncode-loaded .isotope-filters .menu-smart > li:nth-child(7) { --joal-start: 0.67s; }
body.uncode-loaded .isotope-filters .menu-smart > li:nth-child(n+8) { --joal-start: 0.715s; }

@media (prefers-reduced-motion: reduce) {
	body:not(.uncode-loaded) #main-logo,
	body:not(.uncode-loaded) .mmb-container,
	body:not(.uncode-loaded) .isotope-filters .menu-smart > li {
		opacity: 1;
		animation: none;
	}
	body.uncode-loaded #main-logo,
	body.uncode-loaded .mmb-container,
	body.uncode-loaded .isotope-filters .menu-smart > li {
		animation: none;
	}
}

/* Lightbox auf iPhone/iPad (Safari ab iOS 26, Wunsch David 27.10.2026): Safari zeichnet die Seite
 * unter seinen durchsichtigen Leisten (Statusleiste oben, Adressleiste unten) weiter, fest positionierte
 * Ebenen wie die Lightbox enden aber an deren Kante. Die Fläche unter der Leiste füllt Safari selbst
 * deckend mit der Hintergrundfarbe einer fest positionierten Ebene am Rand – ohne Unschärfe.
 * Folgen: (1) oben weiß, weil Uncodes weiße Kopfzeile (fest, unter der Lightbox) am Rand liegt;
 * (2) unten harte Kante zwischen weichgezeichnetem Hintergrund und schwarzer Leiste.
 * Abhilfe: (1) Kopfzeile ausblenden, solange die Lightbox offen ist (Safari nimmt dann Schwarz);
 * (2) Hintergrund oben und unten in Schwarz auslaufen lassen. Die Ränder liegen wegen des iPad-Überstands
 * (siehe .lg-backdrop oben) 25vh innerhalb der Ebene. Nur Touchgeräte; das Foto liegt darüber, bleibt unberührt. */
html.lg-on .menu-container {
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity 0.3s ease-in, visibility 0s 0.3s !important;
}
@media (hover: none) and (pointer: coarse) {
	.lg-backdrop {
		background-image: linear-gradient(to bottom,
			#000 25vh,
			rgba(0, 0, 0, 0) calc(25vh + 120px),
			rgba(0, 0, 0, 0) calc(100% - 25vh - 120px),
			#000 calc(100% - 25vh));
	}
}

/* Foto-Kacheln (alle Kacheln, die ein Foto in der Lightbox öffnen: Startseite, Alben, More-Projekte):
 * Mouseover ruhiger und fotografischer (Wunsch David 31.10.2026, zunächst nur Startseite, am selben Tag global).
 * Grundsatz: Fotos bleiben flach, ruhig und unverfälscht; Räumlichkeit und Farbverlauf bleiben den
 * Ordner-Übersichten vorbehalten (Memories, More – deren Kacheln öffnen keine Lightbox und bleiben unberührt).
 * (1) Kein dunkler Schleier, kein Plus-Symbol (Uncode: .t-entry-visual-overlay, .t-overlay-icon).
 * (2) Weicher Zoom 105 % in 1,2 s auslaufend statt 0,3 s anlaufend – auch dort, wo Uncode gar keinen Zoom
 *     eingestellt hat (More-Projekte ohne .tmb-image-anim). Uncode-Kurve bleibt für filter/opacity.
 * Ein "Scheinwerfer" (andere Fotos treten zurück) war am 31.10.2026 kurz live und wurde auf Wunsch David wieder entfernt. */
.tmb.tmb-lightbox .t-entry-visual-overlay,
.tmb.tmb-lightbox .t-overlay-icon {
	display: none !important;
}
.tmb.tmb-lightbox:not(.tmb-image-anim-magnetic) .t-entry-visual img:not(.avatar):not(.has-secondary-featured-image) {
	backface-visibility: hidden;
	transition-property: transform, filter, opacity;
	transition-duration: 1.2s, 0.3s, 0.3s;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.57, 0.21, 0.69, 1), cubic-bezier(0.57, 0.21, 0.69, 1);
}
.no-touch .tmb.tmb-lightbox:not(.tmb-image-anim-magnetic) .t-entry-visual:hover img:not(.avatar):not(.has-secondary-featured-image),
.no-touch .tmb.tmb-lightbox:not(.tmb-image-anim-magnetic) .t-entry-visual:focus-within img:not(.avatar):not(.has-secondary-featured-image) {
	transform: scale(1.05, 1.05);
}
@media (prefers-reduced-motion: reduce) {
	.no-touch .tmb.tmb-lightbox:not(.tmb-image-anim-magnetic) .t-entry-visual:hover img:not(.avatar):not(.has-secondary-featured-image),
	.no-touch .tmb.tmb-lightbox:not(.tmb-image-anim-magnetic) .t-entry-visual:focus-within img:not(.avatar):not(.has-secondary-featured-image) {
		transform: none;
	}
}

/* Schriften Inter und Jost vom eigenen Server statt von Google (Wunsch David 31.10.2026; Abschalten des
 * Google-Abrufs in functions.php). Variable Schriften, je eine Datei für alle Stärken; nur Zeichensätze
 * latin + latin-ext. Quelle Google Fonts, Lizenz SIL Open Font License. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/jost-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Jost';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/jost-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}