/*
Theme Name: chdes
Description: Custom editorial theme for chdes.com
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: chdes
*/

/* ── Variables ─────────────────────────────────────────────── */
:root {
	--color-primary: #761028;
	--font-sans:     sans-serif;
	--font-serif:    serif;
	--outer:         clamp(20px, 4vw, 90px);
	--content:       680px;
	--wide:          980px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
	overscroll-behavior-x: none;
	touch-action: pan-y;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	overscroll-behavior-x: none;
	touch-action: pan-y;
	user-select: none;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	-webkit-user-drag: none;
	pointer-events: none;
}

a { color: inherit; pointer-events: auto; }

/* Slider: beide Richtungen erlaubt damit vertikales Scrollen nicht blockiert wird */
.chdes-slider-outer {
	touch-action: pan-x pan-y;
}

/* ── FSE Wrapper ───────────────────────────────────────────── */
.wp-site-blocks {
	overflow: visible !important;
}

/* ── Header ────────────────────────────────────────────────── */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transform: translateY(0);
	transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}
/* Auto-Hide: JS togglet diese Klasse beim Runterscrollen. Beim Hochscrollen
   wird sie wieder entfernt → Header schiebt sich rein. */
.site-header.is-hidden {
	transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
}
.wp-site-blocks {
	padding-top: var(--header-height, 72px);
}
body.single .wp-site-blocks {
	padding-top: 0;
}
.site-header-inner {
	background: rgba(22, 22, 22, 0.82);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 1.25rem var(--outer);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.site-branding { display: flex; align-items: center; }
.site-title {
	font-family: var(--font-sans);
	font-weight: 900;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
}
.site-title a { text-decoration: none; color: #fff; }
.site-title a:hover { text-decoration: underline; }

/* Nav */
.main-nav ul {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 2rem;
	align-items: center;
}
.main-nav a {
	color: #fff;
	text-decoration: none;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.95rem;
}
.main-nav a:hover { text-decoration: underline; }

.nav-toggle { display: none; }

/* ── Layout ────────────────────────────────────────────────── */
.site-main { min-height: 60vh; }

.content-wrap {
	max-width: calc(var(--content) + 2 * var(--outer));
	margin: 0 auto;
	padding: 0 var(--outer);
}
.wide-wrap {
	max-width: calc(var(--wide) + 2 * var(--outer));
	margin: 0 auto;
	padding: 0 var(--outer);
}

/* Gutenberg align support */
.entry-content .alignwide {
	margin-left: calc(-1 * var(--outer));
	margin-right: calc(-1 * var(--outer));
	max-width: unset;
}
.entry-content .alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

/* ── Single Post: Header schwebt über dem Hero ─────────────── */
body.single .site-header {
	position: fixed;
	width: 100%;
	top: 0;
}

/* ── Post Hero ─────────────────────────────────────────────── */
.post-hero {
	position: relative;
	height: 100svh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0 clamp(20px, 4vw, 90px);
}
.post-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
}
.post-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.4);
}
.post-hero-content {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
}
.post-hero-meta {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}
.post-hero-meta a { color: #fff; text-decoration: none; }
.post-hero-meta a:hover { text-decoration: underline; }
.post-hero-meta .sep { opacity: 0.4; }

body.single .site-main,
.post-hero {
	margin-top: 0 !important;
}
.post-hero .wp-block-cover__inner-container {
	width: 100%;
	text-align: center;
	padding: 0 clamp(20px, 4vw, 90px);
}

.editor-styles-wrapper .post-hero-title {
	opacity: 1 !important;
}

.post-hero-title {
	font-size: clamp(2.5rem, 10vw, 10rem);
	font-family: var(--font-sans);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
	opacity: 0;
	text-align: center;
}
/* Subline im Single-Hero: Block setzt Farbe/Typo inline (siehe Block-Defaults
   in functions.php). Hier nur noch das Spacing zum Titel + Fade-In nach der
   Titel-Sequenz (Title-Fade 0.9s + Marker 1s + 0.2s Pause = 2.1s Delay). */
.post-hero-excerpt {
	margin: 1rem 0 0 !important;
	opacity: 0;
	animation: chdes-subtitle-fade-in 0.6s ease 2.1s forwards;
}
@keyframes chdes-subtitle-fade-in {
	to { opacity: 1; }
}
.post-hero-excerpt a { color: inherit; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
	.post-hero-excerpt {
		opacity: 1;
		animation: none;
	}
}

/* ── Gruppen Padding ────────────────────────────────────────── */
.entry-content .wp-block-group {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

/* ── Single Post Content ───────────────────────────────────── */
.entry-content {
	padding: 4rem 0;
	font-size: 1.125rem;
}
.entry-content p {
	line-height: 1.9;
	margin-bottom: 1.75rem;
}
.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 3rem;
	margin-bottom: 1.25rem;
}
.entry-content h2.wp-block-heading {
	display: inline-block;
	background-color: rgb(0, 175, 135);
	color: #000;
	padding: 5px 12px;
	border-radius: 28px;
	font-weight: bold;
	text-transform: uppercase;
	margin: 10px 0;
}

/* ── Featured Top Post ─────────────────────────────────────── */
.post-featured-top {
	padding: 5rem var(--outer) 4rem;
	text-align: center;
}
.post-featured-top-inner {
	max-width: var(--content);
	margin: 0 auto;
}
.post-featured-top-title {
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 1.25rem;
}
.post-featured-top-title a {
	text-decoration: none;
	color: inherit;
}
.post-featured-top-title a:hover { text-decoration: underline; }
.post-featured-top-sub {
	font-size: 1.1rem;
	line-height: 1.7;
	color: #555;
	margin: 0 0 2rem;
}
.post-featured-top-link {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--color-fg);
	padding-bottom: 2px;
	letter-spacing: 0.04em;
}
.post-featured-top-link:hover { opacity: 0.6; }

/* ── Block Pattern: Startseite ─────────────────────────────── */
/* Titel des ersten Beitrags */
.wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}
.wp-block-post-title a:hover { text-decoration: underline; }

/* Excerpt + Read more Link */
.wp-block-post-excerpt__excerpt { margin-bottom: 0.75rem; }
.wp-block-post-excerpt__more-link {
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	color: inherit;
	border-bottom: 2px solid var(--color-fg);
	padding-bottom: 2px;
	letter-spacing: 0.04em;
	margin-top: 1.25rem;
}
.wp-block-post-excerpt__more-link:hover { opacity: 0.6; }

/* ── Posts List ────────────────────────────────────────────── */
.posts-list {
	list-style: none;
	margin: 0 0 4rem;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.posts-list-item {
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.posts-list-item a {
	display: block;
	padding: 1rem 0;
	text-decoration: none;
	font-size: 1.125rem;
	font-weight: 700;
	color: inherit;
	transition: padding-left 0.2s ease;
}
.posts-list-item a:hover {
	padding-left: 0.5rem;
	text-decoration: underline;
}

/* ── Blog Listing ──────────────────────────────────────────── */
.page-header {
	padding: 4rem var(--outer) 2rem;
	text-align: center;
}
.page-header h1 {
	font-size: clamp(2rem, 6vw, 4rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0;
}
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2.5rem;
	padding: 3rem var(--outer) 5rem;
	max-width: calc(var(--wide) + 2 * var(--outer));
	margin: 0 auto;
}
.post-card { display: block; text-decoration: none; color: inherit; }
.post-card-image {
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 28px;
	margin-bottom: 1rem;
	background: #f0f0f0;
}
.post-card-image img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.post-card:hover .post-card-image img { transform: scale(1.05); }
.post-card-title {
	font-size: 1.375rem;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
}
.post-card:hover .post-card-title { text-decoration: underline; }
.post-card-excerpt {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.6;
	margin: 0 0 0.5rem;
}
.post-card-meta { font-size: 0.85rem; color: #888; }

/* No posts */
.no-results { padding: 4rem var(--outer); text-align: center; }

/* ── Post Navigation ───────────────────────────────────────── */
.post-navigation {
	padding: 3rem 0;
	border-top: 1px solid rgba(0,0,0,0.1);
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}
.post-navigation a {
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
}
.post-navigation a:hover { text-decoration: underline; }
.nav-prev, .nav-next { max-width: 45%; }
.nav-next { text-align: right; margin-left: auto; }
.nav-label { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }
.nav-title { font-size: 1.1rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.3; }

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
	padding: 4rem var(--outer) 2rem;
	border-top: 1px solid rgba(0,0,0,0.08);
	font-size: 0.875rem;
}
.site-footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	max-width: calc(var(--wide) + 2 * var(--outer));
	margin: 0 auto;
}
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }


/* ── Spacing between top-level sections ────────────────────── */
.wp-site-blocks > * + * { margin-top: 5rem; }
/* Slider-Wraps sind 100vh-„Kapitel" und sollen ohne Section-Abstand
   direkt am Vorgänger ankleben. */
.chdes-slider-wrap,
.chdes-slider2-wrap {
	margin-top: 0 !important;
}

/* ── Animation Framework ─────────────────────────────────────
   Zwei Mechaniken kombiniert:
   1. fade-in/zoom-in/slide-left/slide-right/reveal: IO-getriggert + timed
      transition. Element ist hidden, sobald sichtbar fügt JS .is-visible
      hinzu → CSS-Transition läuft einmal über die Dauer ab. Funktioniert
      auf allen Browsern, läuft unabhängig von Scroll-Geschwindigkeit.
   2. stagger > *: Scroll-Driven via animation-timeline: view(). Jedes
      Kind ist an seine eigene View-Progress gekoppelt — perfekt für
      lange Listen, weil pro Kind getriggert wird.

   translate/scale werden als eigenständige Properties verwendet, damit
   sie NICHT mit `transform`-Werten kollidieren (z.B. das
   `transform: translateX(-50vw)` der `.chdes-gruppe.is-full`). */

.chdes-fade-in,
.chdes-zoom-in,
.chdes-slide-left,
.chdes-slide-right {
	transition:
		opacity   1.1s cubic-bezier(0.22, 1, 0.36, 1),
		translate 1.1s cubic-bezier(0.22, 1, 0.36, 1),
		scale     1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.chdes-reveal {
	transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.chdes-fade-in     { opacity: 0; translate: 0 80px; }
.chdes-zoom-in     { opacity: 0; scale: 0.92; }
.chdes-slide-left  { opacity: 0; translate: 80px 0; }
.chdes-slide-right { opacity: 0; translate: -80px 0; }
.chdes-reveal      { clip-path: inset(0 100% 0 0); }

.chdes-fade-in.is-visible     { opacity: 1; translate: 0 0; }
.chdes-zoom-in.is-visible     { opacity: 1; scale: 1; }
.chdes-slide-left.is-visible,
.chdes-slide-right.is-visible { opacity: 1; translate: 0 0; }
.chdes-reveal.is-visible      { clip-path: inset(0 0% 0 0); }

/* Stagger bleibt Scroll-Driven — pro Kind getriggert über View-Timeline. */
@keyframes chdes-anim-stagger {
	from { opacity: 0; translate: 0 40px; }
	to   { opacity: 1; translate: 0 0; }
}
.chdes-stagger > * {
	animation-name: chdes-anim-stagger;
	animation-timeline: view();
	animation-range: entry 0% entry 60%;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	animation-duration: auto;
}
@supports not (animation-timeline: view()) {
	.chdes-stagger > * { animation: none !important; }
}

/* Opt-Out: Animation komplett abschalten. */
.chdes-anim-noshift {
	transition: none !important;
	opacity: 1 !important;
	translate: none !important;
	scale: none !important;
	clip-path: none !important;
}

/* chdes-expand: Cover expandiert beim Scrollen auf volle Breite (eigene JS-Logik). */
.chdes-expand {
	will-change: clip-path;
}
.chdes-expand .wp-block-cover__background {
	transition: opacity 0.15s ease;
}

/* ── Custom tags ───────────────────────────────────────────── */
rund, .rounded-box {
	font-family: var(--font-sans);
	font-size: 20px;
}

/* ── WooCommerce ───────────────────────────────────────────── */
.woocommerce-page .site-main,
.woocommerce .site-main {
	padding: 3rem var(--outer);
	max-width: calc(var(--wide) + 2 * var(--outer));
	margin: 0 auto;
}

/* ── Slider Nav Start-Animation ─────────────────────────────── */
/* 3-Phasen-Morph, startet erst nach vollem Slider-Fade-In (0.9s Delay):
   1. Kreis erscheint unter der Navi, steigt auf → 2. Morpht zu Pill-Breite
   → 3. Pill fadet aus, während echte Buttons/Dots staggered reinpoppen. */

/* Apple-Pattern: dedicated Sticky-Reise-Container über die unteren 75% des Wraps.
   pointer-events: none → Slides bleiben darunter klickbar.
   align-items: flex-end + display:flex → Controls sitzen am Bottom dieses Bereichs.
   position: absolute → komplett aus dem Wrap-Flex-Layout raus, kein Konflikt mit safe-center. */
.chdes-slider-sticky-zone,
.chdes-slider2-sticky-zone {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 75%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
	z-index: 5;
}

/* Controls innerhalb der Sticky-Zone: kleben am Viewport-Bottom solange Zone sichtbar. */
.chdes-slider-controls,
.chdes-slider2-controls {
	position: sticky;
	bottom: 24px;
	min-height: 56px;
	width: fit-content;
	pointer-events: auto;
}

/* Echte Buttons/Dots: initial unsichtbar (visibility + opacity), oberhalb der Pill. */
.chdes-slider-controls > button,
.chdes-slider2-controls > button,
.chdes-slider-controls > .chdes-dot,
.chdes-slider2-controls > .chdes-slider2-dot {
	position: relative;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
}

/* Pfeil-Buttons: sanfter Fade-In ohne dramatisches Scale (sonst werden sie winzig). */
.chdes-slider-controls > button:not(.chdes-dot),
.chdes-slider2-controls > button:not(.chdes-slider2-dot) {
	transform: translateY(4px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.chdes-slider-controls.chdes-pill-ready > button:not(.chdes-dot),
.chdes-slider2-controls.chdes-pill-ready > button:not(.chdes-slider2-dot) {
	visibility: visible;
	animation: chdes-nav-arrow-in 0.4s cubic-bezier(.25,.46,.45,.94) forwards;
	transition: none;
}
@keyframes chdes-nav-arrow-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Dots: bouncender Pop-In + smooth active-state morph.
   transition für width/border-radius/background = active-state morph (Dot → Strich).
   animation für opacity/transform/visibility = initial Pop-In bei pill-ready. */
.chdes-slider-controls > .chdes-dot,
.chdes-slider2-controls > .chdes-slider2-dot {
	transform: translateY(8px) scale(0.3);
	transition: width .4s ease, border-radius .4s ease, background .4s ease;
}
.chdes-slider-controls.chdes-pill-ready > .chdes-dot,
.chdes-slider2-controls.chdes-pill-ready > .chdes-slider2-dot {
	visibility: visible;
	animation: chdes-nav-pop 0.45s cubic-bezier(0.68, -0.1, 0.27, 1.25) forwards;
}
@keyframes chdes-nav-pop {
	0%   { opacity: 0; transform: translateY(8px) scale(0.3); }
	60%  { opacity: 1; transform: translateY(-3px) scale(1.2); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stagger der Navi-Kinder (60ms zwischen jedem Element) */
.chdes-slider-controls.chdes-pill-ready > *:nth-child(1),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(1)   { animation-delay: 0.00s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(2),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(2)   { animation-delay: 0.06s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(3),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(3)   { animation-delay: 0.12s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(4),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(4)   { animation-delay: 0.18s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(5),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(5)   { animation-delay: 0.24s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(6),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(6)   { animation-delay: 0.30s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(7),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(7)   { animation-delay: 0.36s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(8),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(8)   { animation-delay: 0.42s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(9),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(9)   { animation-delay: 0.48s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(10),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(10)  { animation-delay: 0.54s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(11),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(11)  { animation-delay: 0.60s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(12),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(12)  { animation-delay: 0.66s; }
.chdes-slider-controls.chdes-pill-ready > *:nth-child(n+13),
.chdes-slider2-controls.chdes-pill-ready > *:nth-child(n+13){ animation-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
	.chdes-slider-controls > *,
	.chdes-slider2-controls > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* ── Pill-Morph: wiederverwendbare Klasse für alle Module ──── */
/* Wird vom JS-Modul ChdesPillMorph orchestriert. CSS-Vars:
   --pill-s   = scale (0 → 1, opacity folgt)
   --pill-w   = aktuelle Breite (initial 56px = Kreis)
   --pill-h   = Höhe (Standard 56px wie Apple AAP)
   --pill-r   = border-radius (28px = halb von 56)
   --pill-ring= blauer Ring spread (px) */
.chdes-pill-bg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--pill-w, 56px);
	height: var(--pill-h, 56px);
	border-radius: var(--pill-r, 28px);
	background: rgba(50, 50, 50, 0.72);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	box-shadow:
		inset 0 0 .5px 0 rgba(232, 232, 237, 0.11),
		0 0 0 calc(var(--pill-ring, 0) * 1px) #4071de;
	transform: translate3d(-50%, -50%, 0) scale(var(--pill-s, 0));
	opacity: var(--pill-s, 0);
	z-index: 0;
	pointer-events: none;
	will-change: transform, opacity, box-shadow, width, height, border-radius;
	transition:
		width         0.45s cubic-bezier(.22, 1, .36, 1),
		height        0.45s cubic-bezier(.22, 1, .36, 1),
		border-radius 0.45s cubic-bezier(.22, 1, .36, 1);
}
.chdes-pill-bg.chdes-pill-morphing {
	box-shadow: inset 0 0 .5px 0 rgba(232, 232, 237, 0.11) !important;
	/* iOS/iPad-Fix: scale(1) im transform weglassen, sobald Width-Morph läuft.
	   Grund: translate3d(-50%) hängt von Width ab; in Kombination mit scale + will-change
	   produziert WebKit Sub-Pixel-Drift, der nach Animation-Ende sichtbar bleibt. */
	transform: translate3d(-50%, -50%, 0);
}
/* GPU-Layer-Hints zurückziehen, wenn alles ruhig steht — sonst friert iOS den
   verschobenen Layer ein. */
.chdes-pill-bg.chdes-pill-ready {
	will-change: auto;
	transform: translate3d(-50%, -50%, 0);
}

/* ── Blog Index: Pill-Morph-Reveal (Slider-Navi-Style) ─────── */
/* Pro Link:
   1. Kleiner Ball erscheint unter dem Spot, bounces hoch
   2. Ball morpht zur Textbreite-Pill (via inset:0 + inline-block Trick)
   3. Link-Text fadet auf die Pill
   4. Underline zieht als Trenner darunter durch */

/* ── Hero: Fade-Up + Apple Gradient-Text Sweep ─────────────── */
@keyframes chdes-blog-fadeup {
	from { opacity: 0; transform: translateY(48px); }
	to   { opacity: 1; transform: translateY(0); }
}
.chdes-blog-hero .wp-block-post-title,
.chdes-blog-hero .wp-block-post-excerpt {
	opacity: 0;
	transform: translateY(48px);
	will-change: opacity, transform;
}
.chdes-blog-hero .wp-block-post-excerpt {
	margin-top: 1.5rem;
	padding-left: var(--outer, 1.5rem);
	padding-right: var(--outer, 1.5rem);
	color: #85858a;
	font-weight: 400;
	line-height: 1.35;
}
.chdes-blog-hero .wp-block-post-excerpt p {
	margin: 0;
}
.chdes-blog-hero.is-revealed .wp-block-post-title {
	animation: chdes-blog-fadeup 0.8s cubic-bezier(.25,.46,.45,.94) forwards;
}
.chdes-blog-hero.is-revealed .wp-block-post-excerpt {
	animation: chdes-blog-fadeup 0.8s cubic-bezier(.25,.46,.45,.94) 0.2s forwards;
}

/* Hero-Title-Link: erbt Body-Default-Farbe (gleich wie Listen-Items). */
.chdes-blog-hero .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* Pill-Morph wird jetzt JS-seitig per Spring-Solver animiert (chdes-spring.js).
   CSS-Custom-Properties auf dem Titel werden pro Frame gesetzt. */
@keyframes chdes-pill-expand {
	from { width: 30px; height: 30px; border-radius: 50%; }
	to   { width: 100%; height: 100%; border-radius: 28px; }
}
/* ── Listen-Items: statisch, keine Animationen ────────────── */
.chdes-blog-item {
	position: relative;
	padding-top: 0.35rem !important;
	padding-bottom: 0.35rem !important;
}
.chdes-blog-item .wp-block-post-title {
	padding: 0;
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
	line-height: 1.25 !important;
	font-weight: 900 !important;
}
.chdes-blog-item .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}
.chdes-blog-item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba(0, 0, 0, 0.11);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.chdes-blog-hero .wp-block-post-title,
	.chdes-blog-hero .wp-block-post-excerpt {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}