/*
Theme Name: Ann-Kristin
Theme URI: https://annkristinkrueger.de
Author: Ann-Kristin Krüger
Description: Eigenes Block-Theme, mystischer dunkler Verlauf, Boska + General Sans.
Version: 5.23
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: ak-theme
*/

/* ==========================================================
   Schriften werden über theme.json registriert (Font Face API).
   Dadurch greifen sie auch im Block-Editor, nicht nur im Frontend.
   Font-Dateien gehören nach assets/fonts/.
   ========================================================== */

/* Große Überschriften (Hero, h1) nutzen Boska Medium,
   alle anderen Überschriften im Artikelfluss bleiben bei Boska Light */
h1,
.wp-block-post-title {
	font-weight: 500;
}

h2, h3, h4, h5, h6 {
	font-weight: 300;
}

body,
p,
.wp-block-post-content {
	font-weight: 300;
	line-height: 1.75;
}

/* Bold ("fett" im Editor, <strong>/<b>) explizit auf 600 setzen, statt
   es den Browser über "font-weight: bolder" (Standard für <strong>)
   relativ zur geerbten Stärke berechnen zu lassen - bei unserer Basis
   von 300 würde das nur zu 400 auflösen, was mangels eigenem
   Schriftschnitt optisch wirkungslos bliebe.

   600 statt 700, weil 700 zu fett wirkte - betrifft aber gezielt nur
   General Sans (Fließtext): dafür ist in theme.json ein eigener
   600er-Schriftschnitt (Semibold) hinterlegt. Boska (Überschriften)
   hat bewusst KEINEN 600er - dort greift die CSS-Schriftauswahl bei
   fehlendem Treffer auf das nächstliegende vorhandene Gewicht
   DARÜBER zurück, das ist Boska Bold (700). Bold in Überschriften
   bleibt dadurch weiterhin kräftig, nur Fließtext wird schlanker. */
strong,
b {
	font-weight: 600;
}

/* Nötig für den Vollbreite-Ausbruch weiter unten (siehe .ak-oracle):
   "50vw" zählt die Breite der Scrollbar mit, "50%" (vom Elternelement)
   nicht - dadurch ragt die Box sonst je nach Browser ein paar Pixel
   über den rechten Rand hinaus und erzeugt eine minimale horizontale
   Scrollleiste.

   "clip" statt "hidden": Beide kappen den Überstand optisch, aber
   "overflow-x: hidden" zwingt laut CSS-Spezifikation automatisch auch
   "overflow-y" auf "auto" (sobald eine Achse nicht "visible" ist, darf
   es die andere auch nicht mehr sein). Dadurch wurden html/body zu
   einem eigenen Scroll-Container, was die scroll-gebundenen
   "animation-timeline: view()"-Animationen (Blumen, Unschärfe-Effekt
   bei Überschriften) durcheinandergebracht hat - sie blieben im
   Ausgangszustand stehen. "clip" kappt genauso, löst diesen
   Nebeneffekt aber nicht aus. */
html,
body {
	overflow-x: clip;
}

/* ==========================================================
   Hero-Bereich mit animiertem Verlauf
   ========================================================== */

.hero-gradient {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: #2D1117;
	min-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Titelspalte und Porträt nebeneinander, mobil untereinander */
/* Die Figur soll innerhalb der Inhaltsbreite stehen, ohne am Rand
   angeschnitten zu werden. Deshalb Innenabstand statt harter Kante. */
.hero-inner {
	padding-left: clamp(20px, 4vw, 48px);
	padding-right: clamp(20px, 4vw, 48px);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 4vw, 64px);
	width: 100%;
}

.hero-inner > .site-header-centered {
	flex: 1 1 320px;
	min-width: 0;
}

/* Porträt: Höhe führt, nicht Breite. Der weiche Verlauf unten verhindert
   die harte Schnittkante, die freigestellte Figuren auf dunklem Grund
   wie ausgeschnitten wirken lässt. */
/* align-self: flex-end schiebt im Row-Flex horizontal, nicht vertikal.
   Die Figur soll stattdessen unten am Hero-Rand aufsitzen. */
.hero-portrait {
	flex: 0 1 auto;
	margin: 0;
	display: flex;
	justify-content: center;
}

.hero-portrait img {
	display: block;
	height: clamp(360px, 62vh, 620px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: bottom center;
	animation: hero-portrait-rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

/* Die Figur steigt an ihre Position, nachdem der Titel scharf geworden
   ist. Der Versatz von 0.9s liest sich als Nachkommen statt als
   Doppelung der Kopfzeilen-Animation. Nur transform und opacity,
   dadurch läuft es auf der Compositor-Ebene und bleibt flüssig. */
@keyframes hero-portrait-rise {
	0% {
		opacity: 0;
		transform: translateY(48px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 781px) {
	/* Gestapelt braucht der Hero keine feste Höhe, sonst entsteht eine
	   Lücke zwischen Navigation und Figur. */
	.hero-gradient {
		min-height: 0;
		padding-top: 24px;
	}

	.hero-inner {
		flex-direction: column;
		gap: 4px;
	}

	/* flex-basis wirkt im Column-Flex auf die HÖHE. Die 320px aus der
	   Desktop-Regel blähen die Textspalte gestapelt auf. */
	.hero-inner > .site-header-centered {
		flex: 0 0 auto;
	}

	.hero-portrait {
		align-self: center;
		width: 100%;
	}

	.hero-portrait img {
		height: clamp(280px, 38vh, 400px);
	}
}

.hero-gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, #54091C 0%, #2D1117 70%);
	background-size: 250% 250%;
	animation: hero-sweep 20s ease-in-out infinite;
	z-index: -1;
	pointer-events: none;
}

@keyframes hero-sweep {
	0%   { background-position: 20% 20%; }
	50%  { background-position: 80% 80%; }
	100% { background-position: 20% 20%; }
}

/* ==========================================================
   Kompakter Header für Unterseiten
   ========================================================== */

.site-header-compact {
	position: relative;
	background-color: #2D1117;
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-header-compact .site-header-centered {
	padding-top: 0;
	padding-bottom: 0;
}

/* Muss .site-header-centered mitführen: beide Regeln lägen sonst bei
   Spezifität 0,3,0 und die zentrierte Regel steht später im Stylesheet. */
.site-header-compact .site-header-centered .wp-block-site-title a {
	font-size: 20px;
}

.site-header-compact .site-header-centered .wp-block-site-tagline {
	font-size: 12px;
	margin-top: 4px;
}

.site-header-compact .site-header-centered .wp-block-navigation {
	margin-top: 16px;
}

/* ==========================================================
   Icon-Zeile oben rechts (Warenkorb + Instagram)

   Absolut positioniert statt Teil des Flex-Layouts, damit die
   bestehende zentrierte Kopfzeile (Titel/Nav, Fokus-Animation,
   Mobilmenü-Overlay) unangetastet bleibt. .site-header-compact und
   .hero-gradient sind bereits position: relative, dienen also direkt
   als Bezugsrahmen.
   ========================================================== */

.site-header-icons {
	position: absolute;
	top: clamp(16px, 3vw, 28px);
	right: clamp(20px, 4vw, 48px);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 18px;
}

/* Jedes Icon-Element (Instagram-Liste, Konto, Warenkorb) als eigene
   Box gleich hoch und mittig ausgerichtet behandeln - sonst weichen
   Icons durch unterschiedliche Standardabstände der Blöcke optisch
   voneinander ab. */
.site-header-icons > * {
	display: flex !important;
	align-items: center;
	margin: 0 !important;
	line-height: 1;
}

.site-header-social {
	gap: 10px !important;
	padding: 0 !important;
}

/* Feste Box pro Icon, Inhalt darin per Flex zentriert - sonst sitzt
   das Icon durch das Standard-Padding des Blocks nicht mittig in der
   Box, wodurch auch der Hover-Kreis daneben statt drumherum wirkt. */
.site-header-social .wp-social-link {
	width: 32px;
	height: 32px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.site-header-social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--wp--preset--color--creme, #FFF9EB);
}

/* display:block entfernt den kleinen Abstand unter dem SVG, den
   Inline-Elemente durch ihre Grundlinie sonst bekommen - das war der
   Grund, warum das Icon höher wirkte als der Warenkorb daneben. */
.site-header-social .wp-social-link svg {
	display: block;
	width: 20px;
	height: 20px;
	transition: transform 0.2s ease;
}

.site-header-social .wp-social-link:hover,
.site-header-social .wp-social-link:focus-within {
	background-color: rgba(255, 249, 235, 0.18);
}

.site-header-social .wp-social-link:hover svg,
.site-header-social .wp-social-link:focus-within svg {
	transform: scale(1.15);
}

/* WooCommerce-Mini-Cart-Icon an die Theme-Farben anpassen - ohne
   aktives WooCommerce bleibt dieser Block leer, das ist normal. */
.site-header-icons .wc-block-mini-cart {
	--wc-mini-cart-badge-background-color: var(--wp--preset--color--knallrot, #CD002C);
}

.site-header-icons .wc-block-mini-cart__button {
	color: var(--wp--preset--color--creme, #FFF9EB);
}

.site-header-icons .wc-block-mini-cart__amount,
.site-header-icons .wc-block-mini-cart__quantity-badge {
	color: var(--wp--preset--color--creme, #FFF9EB);
}

/* Konto-Icon ("Männchen"): handgezeichnetes SVG statt WooCommerce-Block,
   da der woocommerce/customer-account-Block in dieser WooCommerce-Version
   offenbar nicht registriert ist und deshalb nichts ausgegeben hat. So
   ist die Anzeige unabhängig von der WooCommerce-Version garantiert. */
.site-header-account {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--wp--preset--color--creme, #FFF9EB);
	line-height: 1;
	transition: background-color 0.2s ease;
}

.site-header-account svg {
	display: block;
	transition: transform 0.2s ease;
}

.site-header-account:hover,
.site-header-account:focus-visible {
	background-color: rgba(255, 249, 235, 0.18);
}

.site-header-account:hover svg,
.site-header-account:focus-visible svg {
	transform: scale(1.15);
}

/* Warenkorb-Icon: gleiche 32px-Kreisfläche und Hover-Effekt wie Instagram
   und Konto. Der WooCommerce-Block bringt von Haus aus 40px + 8px Padding
   mit - hier auf dieselbe Box wie die anderen Icons gebracht. */
.site-header-icons .wc-block-mini-cart__button {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	justify-content: center;
	transition: background-color 0.2s ease;
}

.site-header-icons .wc-block-mini-cart__button:hover,
.site-header-icons .wc-block-mini-cart__button:focus-visible {
	background-color: rgba(255, 249, 235, 0.18);
}

.site-header-icons .wc-block-mini-cart__button .wc-block-mini-cart__icon {
	transition: transform 0.2s ease;
}

.site-header-icons .wc-block-mini-cart__button:hover .wc-block-mini-cart__icon,
.site-header-icons .wc-block-mini-cart__button:focus-visible .wc-block-mini-cart__icon {
	transform: scale(1.15);
}

@media (max-width: 781px) {
	/* Auf Mobile aus der Ecke raus: Icons stehen im normalen Textfluss
	   oberhalb des Namens (Reihenfolge kommt aus der Template-Datei -
	   dort steht die Icon-Zeile jetzt vor Titel/Tagline), mit deutlichem
	   Abstand nach unten zum Namen. */
	.site-header-icons {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
		width: 100%;
		justify-content: center;
		gap: 20px;
		margin: 0 0 28px !important;
		padding-top: 20px;
	}

	.hero-gradient {
		flex-direction: column;
	}

	.site-header-social .wp-social-link {
		width: 28px;
		height: 28px;
	}
}

/* Warenkorb/Kasse/Mein-Konto/Shop hart aus der Navigation ausblenden.
   Der PHP-Filter (functions.php, block_core_page_list_query) sollte das
   eigentlich schon an der Wurzel verhindern, taucht die Seite aber
   trotzdem noch in der Nav-Liste auf (z. B. wegen Caching oder weil der
   Fallback-Mechanismus anders arbeitet als erwartet), sorgt diese Regel
   zuverlässig dafür, dass sie nicht doppelt neben den Icons oben rechts
   erscheint. Träfe per href-Muster, unabhängig vom internen Aufbau. */
.ak-nav-main li:has(> a[href*="/cart"]),
.ak-nav-main li:has(> a[href*="/checkout"]),
.ak-nav-main li:has(> a[href*="/my-account"]),
.ak-nav-main li:has(> a[href*="/shop"]) {
	display: none !important;
}

/* ==========================================================
   Zentrierter Wordmark-Header
   ========================================================== */

.site-header-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 24px;
	animation: header-focus-in 1.8s ease-out both;
}

/* Ein Element mit filter/transform/backdrop-filter wird zum Containing
   Block für position: fixed seiner Nachkommen. Die blur-Animation hier
   und der Verlauf im Hero hätten das Overlay am Header statt am
   Bildschirm ausgerichtet. Deshalb: nach Ablauf der Animation kein
   filter mehr, und bei geöffnetem Menü grundsätzlich keiner. */
.site-header-centered:has(.is-menu-open) {
	animation: none;
	filter: none;
	transform: none;
}

.hero-gradient:has(.is-menu-open) {
	animation: none;
	filter: none;
	transform: none;
}

.site-header-compact:has(.is-menu-open) {
	animation: none;
	filter: none;
	transform: none;
}

/* Der Endzustand verzichtet bewusst auf filter. Ein zurückbleibendes
   filter: blur(0px) würde weiterhin einen Containing Block bilden und
   das Overlay am Header statt am Bildschirm verankern. */
@keyframes header-focus-in {
	0% {
		opacity: 0;
		filter: blur(12px);
	}
	99% {
		opacity: 1;
		filter: blur(0px);
	}
	100% {
		opacity: 1;
		filter: none;
	}
}

.site-header-centered .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--boska);
	font-size: 26px;
	font-weight: 300;
	letter-spacing: 0.04em;
	color: #FFF9EB;
	text-decoration: none;
}

/* Hero: großer, leichter Titel. Boska zeigt ihre Kontraste erst ab
   ordentlichem Grad, deshalb Light statt Medium. clamp skaliert von
   rund 40px auf 390px bis 72px auf Desktop, dadurch kein Umbruch.
   Selektor hängt an .hero-gradient, damit Unterseiten kompakt bleiben. */
.hero-gradient .wp-block-site-title a {
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 1.05;
}

.site-header-centered .wp-block-site-tagline {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #E9E6B5;
	margin-top: 8px;
}

/* Hero-Tagline: etwas größer, weiter gesperrt. Der Größenunterschied
   zum Titel trägt die Wirkung, deshalb bleibt sie bewusst klein. */
.hero-gradient .wp-block-site-tagline {
	font-size: clamp(0.75rem, 1.6vw, 0.9rem);
	letter-spacing: 0.28em;
	margin-top: clamp(16px, 2.2vw, 30px);
}

.site-header-centered .wp-block-navigation {
	margin-top: 36px;
}

/* ==========================================================
   Navigation

   Boska Light statt Kapitälchen. Boska hat starken Strichstärken-
   kontrast: in Light werden die dünnen Stellen auf dunklem Grund
   schnell unsichtbar, deshalb bewusst größer gesetzt als übliche
   Navigationsschrift und mit voller Deckkraft in Creme.
   ========================================================== */

.site-header-centered .ak-nav-main .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--boska);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	text-transform: none;
	color: #FFF9EB;
	padding: 12px 28px;
	line-height: 1.3;
	white-space: nowrap;
	display: inline-block;
	text-decoration: none;

	/* Milchglas statt Rahmen */
	border: 0;
	border-radius: 999px;
	background-color: rgba(255, 249, 235, 0.07);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);

	transform: scale(1);
	transition: background-color 240ms ease, transform 240ms ease;
}

/* Ohne backdrop-filter bliebe nur eine kaum sichtbare Fläche.
   Dann etwas mehr Deckkraft, damit der Link erkennbar bleibt. */
@supports not (backdrop-filter: blur(10px)) {
	.site-header-centered .ak-nav-main .wp-block-navigation-item__content {
		background-color: rgba(255, 249, 235, 0.13);
	}
}

.site-header-centered .ak-nav-main .wp-block-navigation-item__content:hover,
.site-header-centered .ak-nav-main .wp-block-navigation-item__content:focus-visible {
	background-color: rgba(255, 249, 235, 0.14);
	transform: scale(1.08);
}

.site-header-centered .ak-nav-main .current-menu-item .wp-block-navigation-item__content {
	background-color: rgba(205, 0, 44, 0.28);
}

.site-header-centered .ak-nav-main .wp-block-navigation__container {
	gap: 14px;
}

/* ==========================================================
   Umbruch nach verfügbarer Breite (nicht mehr nach fester Linkzahl)

   Vorher: festes 3-Spalten-Grid, das ab 782px unabhängig von der
   Bildschirmbreite IMMER nach drei Links umbrach - auf breiten
   Desktop-Screens blieb dadurch ungenutzter Platz übrig. Jetzt: Flex
   mit wrap, die Reihe bricht erst um, wenn der Platz für den nächsten
   Pill tatsächlich nicht mehr reicht. Gilt nur ab 782px: darunter
   liegt die Navigation gestapelt im Overlay.
   ========================================================== */

@media (min-width: 782px) {
	.site-header-centered .ak-nav-main .wp-block-navigation__container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 12px 14px;
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
}

/* ==========================================================
   Burgermenü unter 782px

   Der Burger gehört zur Hauptnavigation und erscheint nur mobil.
   WordPress steuert die Sichtbarkeit des Öffners selbst, deshalb
   hier bewusst kein display: das würde die Steuerung aushebeln.
   ========================================================== */

.ak-nav-main .wp-block-navigation__responsive-container-open,
.ak-nav-main .wp-block-navigation__responsive-container-close {
	color: #FFF9EB;
	min-width: 44px;
	min-height: 44px;
	padding: 8px;
}

@media (max-width: 781px) {
	.ak-nav-main .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: 100%;
		min-height: 100%;
		min-height: 100dvh;
		padding: 0;
		background-color: #2D1117;
		z-index: 100000;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}

	.ak-nav-main .is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 1;
	}

	.ak-nav-main .is-menu-open .wp-block-navigation__responsive-container-content {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		padding: 84px 24px 40px;
		box-sizing: border-box;
	}

	/* Grid aus der Desktop-Query hier zurücksetzen, sonst bleibt der
	   Overlay-Container auf display:block und stapelt nicht sauber. */
	.ak-nav-main .is-menu-open .wp-block-navigation__container {
		display: flex;
		grid-template-columns: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		gap: 20px;
	}

	/* !important nötig: WordPress-Core setzt für den Overlay-Zustand
	   ".wp-block-navigation__responsive-container.is-menu-open ...
	   .wp-block-navigation-item__content { padding: 0 }" mit 4 Klassen
	   Spezifität (0,4,0) - eine Klasse mehr als diese Regel hier
	   (0,3,0). Ohne !important gewinnt also immer Core, unabhängig von
	   der Reihenfolge im Stylesheet. Live in Chrome nachgewiesen. */
	.ak-nav-main .is-menu-open .wp-block-navigation-item__content {
		font-size: 1.1rem;
		line-height: 1.2;
		padding: 13px 58px !important;
		text-align: center;
		min-width: 220px;
		box-sizing: border-box;
	}

	.ak-nav-main .is-menu-open .wp-block-navigation-item__content:hover,
	.ak-nav-main .is-menu-open .wp-block-navigation-item__content:focus-visible {
		transform: none;
	}
}

/* ==========================================================
   Footer
   ========================================================== */

.site-footer {
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}

.site-footer-text {
	font-size: 12px;
	color: #E9E6B5;
	margin-top: 20px;
}

/* Footer: schlichte Textlinks, keine Milchglasflächen */
.ak-nav-footer .wp-block-navigation__container {
	gap: 24px;
}

.ak-nav-footer .wp-block-navigation-item__content {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: #E9E6B5;
	text-decoration: none;
	transition: color 200ms ease;
}

.ak-nav-footer .wp-block-navigation-item__content:hover,
.ak-nav-footer .wp-block-navigation-item__content:focus-visible {
	color: #FFF9EB;
	text-decoration: underline;
}

/* ==========================================================
   Bewegungsreduzierung respektieren
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
	.hero-gradient::before,
	.site-header-centered,
	.hero-portrait img {
		animation: none;
	}

	.ak-nav-main .wp-block-navigation-item__content,
	.ak-nav-footer .wp-block-navigation-item__content {
		transition: none;
	}

	.site-header-centered .ak-nav-main .wp-block-navigation-item__content:hover,
	.site-header-centered .ak-nav-main .wp-block-navigation-item__content:focus-visible {
		transform: none;
	}
}

/* ==========================================================
   Das Overlay hängt im Header-Markup und würde dessen
   Breitenbegrenzung und Flex-Zentrierung erben. Beides hier lösen.
   ========================================================== */

.hero-gradient .wp-block-navigation__responsive-container.is-menu-open,
.site-header-compact .wp-block-navigation__responsive-container.is-menu-open {
	margin: 0;
}

.site-header-centered .wp-block-navigation:has(.is-menu-open) {
	margin-top: 0;
}

/* ==========================================================
   Pill-Buttons (CTA)

   theme.json setzt Hintergrund, Textfarbe und die Pillenform, aber
   keinen Hover-Zustand (das "button"-Element unterstützt dort kein
   :hover). Deshalb hier: ein Leuchten aus zwei überlagerten Schatten
   (enger, kräftiger Kern + weicherer äußerer Schein) plus leichtes
   Anheben. Die rgba-Werte entsprechen Knallrot (#CD002C = 205,0,44),
   wie an anderen Stellen im Stylesheet bereits verwendet.
   ========================================================== */

.wp-block-button__link {
	transition: box-shadow 260ms ease, transform 200ms ease, background-color 240ms ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: #E4143D;
	box-shadow: 0 0 0 1px rgba(255, 249, 235, 0.15),
	            0 0 18px rgba(205, 0, 44, 0.75),
	            0 0 42px rgba(205, 0, 44, 0.45);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
	}

	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible {
		transform: none;
	}
}

/* ==========================================================
   Link-in-Bio-Seite (für Instagram)

   Gleicher radialer Verlauf wie .hero-gradient, aber als eigene
   Klasse, damit diese Seite unabhängig vom Hero-Header verwendet
   werden kann (eigenes, kopfzeilenloses Seiten-Template).
   ========================================================== */

.ak-links-page {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: #2D1117;
	min-height: 100vh;
	padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 40px);
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

.ak-links-page::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, #54091C 0%, #2D1117 70%);
	background-size: 250% 250%;
	animation: hero-sweep 20s ease-in-out infinite;
	z-index: -1;
	pointer-events: none;
}

.ak-links-inner {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ak-links-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 20px;
	border: 1px solid rgba(255, 249, 235, 0.25);
}

.ak-links-inner h1 {
	font-family: var(--wp--preset--font-family--boska);
	font-weight: 500;
	font-size: 26px;
	margin: 0 0 4px;
}

.ak-links-tagline {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	margin: 0 0 32px;
}

.ak-links-inner .wp-block-buttons {
	width: 100%;
	gap: 14px !important;
	flex-wrap: nowrap !important;
}

.ak-links-inner .wp-block-button {
	width: 100%;
}

.ak-links-inner .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 16px 24px;
	font-size: 15px;
	line-height: 1.4;
}

.ak-links-social {
	margin-top: 32px;
}

.ak-links-legal {
	margin-top: 24px;
	font-size: 12px;
	display: flex;
	gap: 16px;
}

.ak-links-legal a {
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	text-decoration: none;
}

.ak-links-legal a:hover {
	text-decoration: underline;
}

/* ==========================================================
   Unterseiten & Beitragsseiten (page.html / single.html)

   Bisher komplett unstyled (nur Titel + Inhalt ohne Abstand/Breite).
   .ak-seite sorgt für ruhigen, gut lesbaren Fließtext-Rahmen, wie bei
   den Lektionsseiten - aber ohne deren Kurs-spezifische Elemente.
   ========================================================== */

.ak-seite {
	max-width: 720px;
	margin: 0 auto;
	padding-top: clamp(48px, 8vw, 96px);
	padding-bottom: clamp(48px, 8vw, 96px);
}

.ak-seite .wp-block-post-title {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.2;
	margin-bottom: 16px;
}

.ak-beitrag-zurueck a {
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	font-size: 13px;
	text-decoration: none;
}

.ak-beitrag-zurueck a:hover {
	text-decoration: underline;
}

.ak-beitrag-datum {
	display: block;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	margin-bottom: 32px;
}

.ak-beitrag-bild {
	margin: 0 0 32px;
}

.ak-beitrag-bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.ak-beitrag .wp-block-post-content {
	line-height: 1.75;
}

/* ==========================================================
   Blobform für Fotos auf Unterseiten & Beiträgen

   Gezielt pro Bild einschaltbar: Bild-Block auswählen → rechte
   Seitenleiste → "Erweitert" → "Zusätzliche CSS-Klasse(n)" →
   "ak-blob-foto" eintragen. Nicht automatisch für alle Fotos, da eine
   Blobform nicht zu jedem Bildausschnitt passt (z. B. breite
   Screenshots).

   Nutzt dieselbe Optik und Drehanimation wie das Über-mich-Porträt auf
   der Startseite (.ak-portrait-blob), aber als eigenständiger,
   selbst-verfolgter View-Timeline-Abschnitt - Unterseiten/Beiträge
   haben keine .ak-section, an die sich die Startseiten-Variante sonst
   anhängt. Eigener Timeline-Name (--ak-blob-foto), damit es die
   Startseiten-Animation nicht kreuzt.
   ========================================================== */

.ak-blob-foto {
	/* Kein "width: 100%" mehr: das hat die im Editor per Ziehen
	   eingestellte Bildbreite immer überschrieben, der Blob blieb
	   dadurch unabhängig vom Ziehen immer bei 420px. max-width bleibt
	   nur als Obergrenze für nicht angepasste Bilder bestehen.

	   height: auto (mit !important) ist zusätzlich nötig: Wenn beim
	   Ziehen in der Ecke sowohl Breite als auch Höhe verändert werden,
	   setzt der Editor für beide ein festes Inline-Style. Sind beide
	   Maße fest vorgegeben, wird "aspect-ratio" komplett ignoriert (das
	   Ergebnis war ein breites Oval statt der quadratischen Blobform) -
	   selbes Muster wie beim Seitenverhältnis-Bug bei den Kurs-Fotos. */
	position: relative;
	max-width: 420px;
	height: auto !important;
	margin: 32px auto;
	aspect-ratio: 1;
}

/* Neben Text schwimmen lassen ("Links ausrichten"/"Rechts ausrichten"
   im Bild-Block): Ein schwimmendes (float) Element ohne feste Breite
   berechnet seine Breite eigentlich aus dem Bildinhalt - hier entsteht
   aber ein Zirkelschluss, weil das Bild selbst "width: 100%" vom
   Blob-Rahmen erbt. Der Browser fällt dann auf die tatsächliche
   Foto-Originalgröße zurück, oft deutlich größer als gewünscht -
   das war die "riesige Lücke". Feste Breite behebt das eindeutig,
   der Text bekommt zusätzlich etwas Abstand zum Umfließen. */
.ak-blob-foto.alignleft,
.ak-blob-foto.alignright {
	width: 300px;
	max-width: 45%;
	margin-top: 8px;
	margin-bottom: 24px;
}

.ak-blob-foto.alignleft {
	margin-right: 32px;
}

.ak-blob-foto.alignright {
	margin-left: 32px;
}

.ak-blob-foto img {
	/* position:absolute + inset:0 statt width/height:100%: Beim manuellen
	   Ziehen im Editor schreibt WordPress ein Inline-Style direkt aufs
	   <img> (z. B. "width:456px;height:auto"). !important auf
	   width/height:100% reicht dagegen NICHT zuverlässig aus - Prozent-
	   Höhen auf einem Kind lösen sich nur auf, wenn der Elternrahmen eine
	   wirklich "definite" Höhe hat, und das war hier trotz
	   aspect-ratio:1 am .ak-blob-foto-Rahmen nicht immer der Fall (Bild
	   blieb bei seinem eigenen Seitenverhältnis, z. B. 900x600 Querformat
	   - der Blob wirkte dadurch breitgezogen statt rund gefüllt).
	   position:absolute mit inset:0 bindet die Bildgröße stattdessen
	   direkt an die Box des positionierten Elternrahmens
	   (.ak-blob-foto hat bereits position:relative) - unabhängig von
	   Inline-Styles oder Prozent-Höhen-Sonderfällen. */
	position: absolute;
	inset: 0;
	/* !important auf width/height bleibt nötig: das Inline-Style, das
	   WordPress beim Ziehen im Editor direkt aufs <img> schreibt (z. B.
	   "width:456px;height:auto"), hat sonst weiterhin Vorrang - auch
	   bei position:absolute. */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%;
	overflow: hidden;
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ak-blob-foto {
			view-timeline-name: --ak-blob-foto;
			view-timeline-axis: block;
			animation: ak-blob-frame linear both;
			animation-timeline: --ak-blob-foto;
			animation-range: entry 10% exit 90%;
		}

		.ak-blob-foto img {
			animation: ak-blob-counter linear both;
			animation-timeline: --ak-blob-foto;
			animation-range: entry 10% exit 90%;
		}
	}
}

/* ==========================================================
   Eigene Login-Seite (templates/page-login.html)

   Gleicher radialer Verlauf wie .ak-links-page/.hero-gradient, als
   eigene Klasse, damit die Login-Seite unabhängig vom Hero-Header und
   von der Linkliste verwendet werden kann (eigenes, kopfzeilenloses
   Template). Formular-Felder nutzen dieselbe dunkel-transluzente
   Optik wie die WooCommerce-Formulare (Warenkorb/Kasse/Mein Konto).
   ========================================================== */

.ak-login-page {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: #2D1117;
	min-height: 100vh;
	padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 40px);
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ak-login-page::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, #54091C 0%, #2D1117 70%);
	background-size: 250% 250%;
	animation: hero-sweep 20s ease-in-out infinite;
	z-index: -1;
	pointer-events: none;
}

.ak-login-inner {
	width: 100%;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ak-login-logo {
	font-family: var(--wp--preset--font-family--boska);
	font-weight: 500;
	font-size: 20px;
	color: var(--wp--preset--color--creme, #FFF9EB);
	text-decoration: none;
	margin-bottom: 32px;
}

.ak-login-title {
	font-family: var(--wp--preset--font-family--boska);
	font-weight: 500;
	font-size: 26px;
	margin: 0 0 28px;
	color: var(--wp--preset--color--creme, #FFF9EB);
}

.ak-login-error {
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(205, 0, 44, 0.15);
	border: 1px solid rgba(205, 0, 44, 0.4);
	color: var(--wp--preset--color--creme, #FFF9EB);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 14px;
	margin: 0 0 20px;
}

.ak-login-form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ak-login-field {
	margin: 0;
	text-align: left;
}

.ak-login-field label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	margin-bottom: 6px;
}

.ak-login-field input {
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(255, 249, 235, 0.06);
	border: 1.5px solid rgba(255, 249, 235, 0.25);
	border-radius: 8px;
	color: var(--wp--preset--color--creme, #FFF9EB);
	font-family: var(--wp--preset--font-family--general-sans, sans-serif);
	padding: 12px 14px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ak-login-field input:focus {
	outline: none;
	border-color: var(--wp--preset--color--knallrot, #CD002C);
	background-color: rgba(255, 249, 235, 0.09);
}

.ak-login-remember {
	margin: -4px 0 0;
	text-align: left;
}

.ak-login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	cursor: pointer;
}

.ak-login-submit {
	appearance: none;
	border: none;
	border-radius: 999px;
	background-color: var(--wp--preset--color--knallrot, #CD002C);
	color: var(--wp--preset--color--creme, #FFF9EB);
	font-family: var(--wp--preset--font-family--general-sans, sans-serif);
	font-size: 15px;
	padding: 14px 24px;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease;
}

.ak-login-submit:hover {
	transform: translateY(-1px);
}

.ak-login-lost {
	margin: 24px 0 0;
}

.ak-login-lost a {
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	font-size: 13px;
	text-decoration: none;
}

.ak-login-lost a:hover {
	text-decoration: underline;
}

/* ==========================================================
   Blog-/Suchergebnis-Übersicht (index.html)

   Deckt sowohl die normale Beitragsliste als auch Suchergebnisse ab
   (beide nutzen dieses Template, da kein eigenes search.html existiert).
   query-title zeigt auf der Such-Seite automatisch "Suchergebnisse für
   ..." an, auf der normalen Übersicht bleibt es meist leer/dezent.
   ========================================================== */

.ak-archiv {
	max-width: 760px;
}

.ak-archiv-titel {
	font-family: var(--wp--preset--font-family--boska, serif);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	margin-bottom: 40px;
}

.ak-blog-liste .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 56px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ak-blog-eintrag {
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(255, 249, 235, 0.12);
}

.ak-blog-liste .wp-block-post-template > li:last-child .ak-blog-eintrag {
	border-bottom: none;
	padding-bottom: 0;
}

.ak-blog-bild {
	margin: 0 0 16px;
}

.ak-blog-bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
}

.ak-blog-datum {
	display: block;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	margin-bottom: 8px;
}

.ak-blog-titel {
	margin: 0 0 12px;
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}

.ak-blog-titel a {
	font-family: var(--wp--preset--font-family--boska, serif);
	font-weight: 300;
	color: var(--wp--preset--color--creme, #FFF9EB);
	text-decoration: none;
}

.ak-blog-titel a:hover {
	text-decoration: underline;
}

.ak-blog-auszug {
	line-height: 1.75;
	margin: 0 0 16px;
}

.ak-blog-mehr {
	display: inline-block;
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	font-size: 14px;
	text-decoration: none;
	transition: transform 160ms ease, color 160ms ease;
}

.ak-blog-mehr:hover {
	color: var(--wp--preset--color--creme, #FFF9EB);
	transform: translateX(4px);
}

.ak-blog-pagination {
	margin-top: 24px;
	font-size: 14px;
}

.ak-blog-pagination a,
.ak-blog-pagination span {
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	text-decoration: none;
}

.ak-blog-pagination a:hover {
	color: var(--wp--preset--color--creme, #FFF9EB);
	text-decoration: underline;
}

.ak-blog-pagination .page-numbers.current {
	color: var(--wp--preset--color--creme, #FFF9EB);
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.ak-blog-mehr {
		transition: none;
	}
}

/* ==========================================================
   WooCommerce: Warenkorb, Kasse, Mein Konto

   Titel, Zwischenüberschriften und die meisten Beschriftungen ziehen
   sich ihre Typografie und Farben bereits automatisch aus theme.json
   (General Sans, Creme) - nur die rohen <input>/<select>-Elemente
   selbst liefern WooCommerce weiterhin mit hartem Weiß/Dunkeltext aus,
   obwohl der umschließende Wrapper (inkl. schwebendem Label) schon
   richtig in Creme steht. Live in Chrome geprüft: Kasse-Formularfelder
   waren dadurch grellweiße Kästen auf dunklem Grund, teils mit fast
   unlesbarem Label darüber.
   ========================================================== */

/* !important nötig: WooCommerce liefert für diese Felder eine eigene,
   spezifischere Regel mit fester weißer Fläche (z. B.
   ".wc-block-components-form .wc-block-components-text-input
   input[type=email]" - 3 Klassen/Attribute Spezifität). Ohne
   !important gewinnt immer WooCommerce, unabhängig von der Reihenfolge
   im Stylesheet. Live in Chrome nachgewiesen (computed background-color
   blieb rgb(255,255,255), obwohl die unspezifischere Regel hier schon
   im Stylesheet stand). */
.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-blocks-components-select__container,
.woocommerce form .input-text,
.woocommerce form select,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"] {
	background-color: rgba(255, 249, 235, 0.06) !important;
	border: 1.5px solid rgba(255, 249, 235, 0.25) !important;
	border-radius: 8px;
	color: var(--wp--preset--color--creme, #FFF9EB) !important;
	font-family: var(--wp--preset--font-family--general-sans, sans-serif);
	padding: 12px 14px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select__select:focus,
.woocommerce form .input-text:focus,
.woocommerce form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--knallrot, #CD002C) !important;
	background-color: rgba(255, 249, 235, 0.09) !important;
}

.wc-block-components-text-input input::placeholder,
.woocommerce form .input-text::placeholder {
	color: rgba(255, 249, 235, 0.4);
}

/* Mengen-Steller im Warenkorb: Zahl selbst fällt sonst auf die
   Browser-Standardschrift (Arial) zurück, obwohl die umgebende Box
   bereits General Sans nutzt. */
.wc-block-components-quantity-selector__input {
	font-family: var(--wp--preset--font-family--general-sans, sans-serif);
	background-color: transparent;
}

/* Produktbild-Platzhalter: ohne hinterlegtes Produktfoto liefert
   WooCommerce ein grelles weißes Kästchen. Dezenter Rahmen, bis echte
   Fotos hinterlegt sind (siehe Go-Live-Liste). */
.wc-block-cart-item__image img,
.wc-block-components-product-image img,
.wc-block-components-order-summary-item__image img {
	border-radius: 8px;
	background-color: rgba(255, 249, 235, 0.06);
}

/* Hinweis-/Erfolgsmeldungen (z. B. "zum Warenkorb hinzugefügt") -
   sowohl die alten Shortcode-Klassen als auch die neueren Block-Banner,
   damit es unabhängig von der jeweiligen WooCommerce-Ansicht passt. */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-info {
	background-color: rgba(255, 249, 235, 0.08) !important;
	border: 1px solid rgba(255, 249, 235, 0.2) !important;
	color: var(--wp--preset--color--creme, #FFF9EB) !important;
	border-radius: 10px;
}

.woocommerce-message a,
.woocommerce-info a,
.wc-block-components-notice-banner a {
	color: var(--wp--preset--color--creme, #FFF9EB);
}

/* Länder-/Bundesland-Auswahl auf den klassischen Formularen (Adressen
   in Mein Konto, Kasse ohne Blöcke): läuft über Select2, das sein
   eigenes, unabhängig gestyltes Element statt des echten <select>
   anzeigt (dieses bleibt unsichtbar/barrierefrei im Hintergrund) -
   die generische Select-Regel oben greift hier deshalb nicht. */
.select2-container--default .select2-selection--single {
	background-color: rgba(255, 249, 235, 0.06);
	border: 1.5px solid rgba(255, 249, 235, 0.25);
	border-radius: 8px;
	height: auto;
	padding: 12px 14px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--wp--preset--color--creme, #FFF9EB);
	line-height: 1.4;
	padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

.select2-dropdown {
	background-color: #2D1117;
	border: 1px solid rgba(255, 249, 235, 0.25);
	color: var(--wp--preset--color--creme, #FFF9EB);
}

.select2-container--default .select2-results__option {
	color: var(--wp--preset--color--creme, #FFF9EB);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--wp--preset--color--knallrot, #CD002C);
	color: #FFF9EB;
}

.select2-search--dropdown .select2-search__field {
	background-color: rgba(255, 249, 235, 0.06);
	border: 1px solid rgba(255, 249, 235, 0.25);
	color: var(--wp--preset--color--creme, #FFF9EB);
	border-radius: 6px;
}

/* Mein Konto: Navigationsliste als ruhige Textliste statt Standard-
   Aufzählung, aktiver Punkt dezent hervorgehoben. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 16px;
	border-radius: 10px;
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation a:hover {
	background-color: rgba(255, 249, 235, 0.06);
	color: var(--wp--preset--color--creme, #FFF9EB);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	background-color: rgba(205, 0, 44, 0.18);
	color: var(--wp--preset--color--creme, #FFF9EB);
}

/* ==========================================================
   Produkteinzelseite (single-product.php)

   Blendet nur die Kategorie-Zeile unterhalb des Preises aus
   ("Kategorie: ..."), auf Wunsch nicht sichtbar. SKU und
   Schlagwörter (falls vorhanden) bleiben unangetastet.

   Deckt beide möglichen Vorlagen ab: die klassische Shortcode-Ausgabe
   (.product_meta .posted_in) UND das neuere block-basierte
   Produktseiten-Template (wp:post-terms-Block, .wp-block-post-terms) -
   live geprüft: diese Seite nutzt tatsächlich die Block-Variante.
   ========================================================== */

.single-product .product_meta .posted_in {
	display: none;
}

.single-product .wp-block-woocommerce-product-meta .wp-block-post-terms.taxonomy-product_cat {
	display: none;
}

/* ==========================================================
   Produkt-Zusatzformular (Zusatzfragen vor dem Kauf)

   Für Produkte ohne Termin-Buchung, bei denen trotzdem vorab ein paar
   Angaben nötig sind (siehe functions.php,
   ak_theme_produktformular_anzeigen). Felder nutzen bewusst dieselbe
   .input-text-Klasse wie die übrigen WooCommerce-Formulare, damit sie
   automatisch die schon vorhandene dunkel-transluzente Optik erben,
   ohne Farben/Rahmen hier doppelt zu pflegen.
   ========================================================== */

.ak-produktformular {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 420px;
	margin-bottom: 24px;
}

.ak-pf-feld {
	margin: 0;
}

.ak-pf-feld label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
	margin-bottom: 6px;
}

/* Die Kurs-Einzelseite (single-kurs.php) liegt NICHT innerhalb eines
   .woocommerce-Wrappers wie die normalen Produkt-/Warenkorbseiten -
   deshalb griff die dunkel-transluzente Eingabefeld-Optik weiter oben
   (".woocommerce form .input-text") hier nie und die Felder blieben
   beim groben weißen Browser-Standardlook. Hier deshalb dieselbe
   Optik direkt für diesen Kontext, unabhängig vom .woocommerce-Ahnen. */
.ak-pf-feld .input-text {
	width: 100%;
	box-sizing: border-box;
	background-color: rgba(255, 249, 235, 0.06);
	border: 1.5px solid rgba(255, 249, 235, 0.25);
	border-radius: 8px;
	color: var(--wp--preset--color--creme, #FFF9EB);
	font-family: var(--wp--preset--font-family--general-sans, sans-serif);
	font-size: 15px;
	padding: 12px 14px;
	/* Lässt native Kalender-/Uhr-Icons bei Datum-/Zeit-Feldern hell statt
	   dunkel-auf-dunkel erscheinen. */
	color-scheme: dark;
}

.ak-pf-feld .input-text:focus {
	outline: none;
	border-color: var(--wp--preset--color--knallrot, #CD002C);
	background-color: rgba(255, 249, 235, 0.09);
}

.ak-pf-feld .input-text::placeholder {
	color: rgba(255, 249, 235, 0.4);
}

.ak-pf-feld textarea.input-text {
	resize: vertical;
	min-height: 90px;
	font-family: inherit;
}

.ak-pf-pflicht {
	color: var(--wp--preset--color--knallrot, #CD002C);
}

/* ==========================================================
   Produktkacheln in Beiträgen (WooCommerce-Blöcke)

   Deckt sowohl die älteren "Product Grid"-Blöcke (.wc-block-grid) als
   auch den neueren "Product Collection"-Block (.wc-block-product-template)
   ab, plus den klassischen Shortcode-Loop (.products .product), damit
   es unabhängig davon passt, welchen Block-Typ WooCommerce gerade
   anbietet. Erste Fassung ohne Live-Test - bitte ein Beispiel zeigen,
   dann feinjustieren.
   ========================================================== */

.wc-block-grid__product,
.wc-block-product-template li,
ul.products li.product {
	background-color: rgba(255, 249, 235, 0.04);
	border-radius: 14px;
	padding: 16px;
	transition: background-color 160ms ease, transform 160ms ease;
}

.wc-block-grid__product:hover,
.wc-block-product-template li:hover,
ul.products li.product:hover {
	background-color: rgba(255, 249, 235, 0.08);
	transform: translateY(-2px);
}

.wc-block-grid__product-image img,
.wc-block-components-product-image img,
ul.products li.product img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 14px;
	background-color: rgba(255, 249, 235, 0.06);
}

.wc-block-grid__product-title,
.wc-block-components-product-title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--boska, serif);
	font-weight: 300;
	font-size: 1.1rem;
	color: var(--wp--preset--color--creme, #FFF9EB);
	margin: 0 0 8px;
}

.wc-block-grid__product-price,
.wc-block-components-product-price,
ul.products li.product .price {
	font-size: 15px;
	color: var(--wp--preset--color--creme, #FFF9EB);
	margin-bottom: 12px;
}

.wc-block-grid__product-price ins,
.wc-block-components-product-price ins,
ul.products li.product .price ins {
	text-decoration: none;
	color: var(--wp--preset--color--knallrot, #CD002C);
}

.wc-block-grid__product-price del,
.wc-block-components-product-price del,
ul.products li.product .price del {
	opacity: 0.5;
	margin-right: 6px;
	text-decoration: line-through;
}

.wc-block-grid__product-add-to-cart .add_to_cart_button,
.wc-block-components-product-button .add_to_cart_button,
.wc-block-components-product-button__button,
ul.products li.product .button {
	display: inline-block;
	background-color: var(--wp--preset--color--knallrot, #CD002C);
	color: var(--wp--preset--color--creme, #FFF9EB);
	border: none;
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 300;
	text-decoration: none;
	transition: box-shadow 260ms ease, background-color 240ms ease;
}

.wc-block-grid__product-add-to-cart .add_to_cart_button:hover,
.wc-block-components-product-button .add_to_cart_button:hover,
.wc-block-components-product-button__button:hover,
ul.products li.product .button:hover {
	background-color: #E4143D;
	box-shadow: 0 0 0 1px rgba(255, 249, 235, 0.15),
	            0 0 18px rgba(205, 0, 44, 0.75),
	            0 0 42px rgba(205, 0, 44, 0.45);
}

/* ==========================================================
   Formular-Abschnitte (für Seiten mit WPForms)

   .ak-form-placeholder-hint ist nur die Hinweiszeile im Editor/vor dem
   Einfügen des echten Formulars - keine Frontend-Optik nötig, wird ja
   gelöscht, bevor die Seite veröffentlicht wird.

   Die .wpforms-* Regeln sind ein erster Versuch, ohne WPForms lokal
   testen zu können (auf dieser Installation noch nicht installiert).
   Bitte nach der Installation einmal zeigen, wie es aussieht - falls
   sich WPForms-Klassennamen unterscheiden, passe ich das an.
   ========================================================== */

.ak-form-placeholder-hint {
	opacity: 0.5;
	font-style: italic;
	font-size: 14px;
}

.ak-form-section {
	text-align: center;
}

.wpforms-container {
	max-width: 100%;
	margin: 24px 0;
}

.wpforms-field-label {
	font-family: var(--wp--preset--font-family--general-sans, sans-serif);
	font-size: 13px;
	font-weight: 700;
	/* Kein uppercase mehr: sieht bei kurzen Wörtern (Vorname, E-Mail) gut
	   aus, wirkt aber bei längeren, ausformulierten Fragen (ganze Sätze)
	   wie Schreien. */
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--kaltgelb, #E9E6B5);
}

.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field input[type="number"],
.wpforms-field textarea,
.wpforms-field select {
	background-color: rgba(255, 249, 235, 0.06);
	border: 1.5px solid rgba(255, 249, 235, 0.2);
	color: var(--wp--preset--color--creme, #FFF9EB);
	border-radius: 12px;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--general-sans, sans-serif);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
	outline: none;
	border-color: var(--wp--preset--color--knallrot, #CD002C);
	background-color: rgba(255, 249, 235, 0.09);
}

.wpforms-submit-container .wpforms-submit,
button.wpforms-submit {
	background-color: var(--wp--preset--color--knallrot, #CD002C);
	color: var(--wp--preset--color--creme, #FFF9EB);
	border: none;
	border-radius: 999px;
	padding: 14px 32px;
	font-weight: 300;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: box-shadow 260ms ease, transform 200ms ease, background-color 240ms ease;
}

.wpforms-submit-container .wpforms-submit:hover,
button.wpforms-submit:hover {
	background-color: #E4143D;
	box-shadow: 0 0 0 1px rgba(255, 249, 235, 0.15),
	            0 0 18px rgba(205, 0, 44, 0.75),
	            0 0 42px rgba(205, 0, 44, 0.45);
}

/* ==========================================================
   Abschnitte der Startseite
   ========================================================== */

.ak-section {
	padding-top: clamp(64px, 9vw, 120px);
	padding-bottom: clamp(64px, 9vw, 120px);
}

.ak-section h1,
.ak-section h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	font-weight: 300;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 24px;
}

.ak-section p {
	margin-top: 0;
	margin-bottom: 16px;
}

.ak-section ul {
	margin: 0 0 16px;
	padding-left: 1.2em;
}

.ak-section li {
	margin-bottom: 8px;
}

/* Zweispaltig, mobil untereinander */
.ak-section .wp-block-columns {
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.ak-section-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Die Blüten dürfen aus ihrer Spalte herausragen. Das erzeugt die
   Tiefe: der Text scrollt schneller vorbei und schiebt sich an der
   stehenden Blüte hervor. */
.ak-section-media {
	overflow: visible;
}

.ak-section .wp-block-columns {
	overflow: visible;
}

@media (min-width: 782px) {
	.ak-section-media img {
		width: 118%;
		max-width: none;
	}

	/* Blüte in der linken Spalte ragt nach links heraus */
	.wp-block-column.ak-section-media:first-child img {
		margin-left: -18%;
	}
}

/* Auf dem Handy steht die Spalte allein und volle Breite wirkt wie ein
   bildschirmfüllendes Foto. Deutlich verkleinert und zentriert. */
@media (max-width: 781px) {
	.ak-section-media img {
		width: 42%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Abschluss-Aufruf */
.ak-section-cta {
	text-align: center;
}

.ak-section-cta h3 {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	line-height: 1.4;
	max-width: 44ch;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 32px;
}

/* ==========================================================
   Scroll-gekoppelte Choreografie

   animation-timeline: view() bindet den Ablauf an die Scroll-Position
   statt an eine Dauer. Zurückscrollen spielt rückwärts, Anhalten hält
   an. Läuft auf der Compositor-Ebene, dadurch ohne Scroll-Listener und
   ohne Last auf dem Hauptthread.

   Firefox unterstützt das noch nicht und zeigt den Inhalt schlicht
   ohne Bewegung. Deshalb steht der Ausgangszustand ausschließlich
   innerhalb der @supports-Abfrage: ohne Unterstützung bleibt alles
   normal sichtbar.
   ========================================================== */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* Die Zeitachse kommt vom ABSCHNITT, nicht von der Spalte.
		   Ohne das misst view() die Spalte selbst: die ist bereits
		   vollständig sichtbar, bevor man den Abschnitt liest, der
		   Fortschritt steht dann konstant auf 1 und nichts bewegt sich.
		   Gemessen und genau so aufgetreten. */
		.ak-section {
			view-timeline-name: --ak-sec;
			view-timeline-axis: block;
		}

		/* Textspalte und Blüte starten übereinander in der Mitte und
		   wandern beim Scrollen auseinander. Aufstieg und seitliche
		   Bewegung stecken bewusst in EINER Animation: zwei Regeln auf
		   demselben Element würden beide transform setzen, die spätere
		   gewinnt und die frühere bliebe wirkungslos. */
		.ak-reveal .wp-block-column:not(.ak-section-media) {
			animation: ak-part-text linear both;
			animation-timeline: --ak-sec;
			animation-range: entry 0% cover 55%;
			position: relative;
			z-index: 1;
		}

		/* Blüte liegt über dem Text und gibt ihn beim Wandern frei */
		.ak-section-media {
			animation: ak-part-media linear both;
			animation-timeline: --ak-sec;
			animation-range: entry 0% cover 65%;
			position: relative;
			z-index: 2;
		}

		/* Bild links: Richtungen tauschen */
		.wp-block-columns:has(> .wp-block-column.ak-section-media:first-child) .wp-block-column.ak-section-media {
			animation-name: ak-part-media-left;
		}

		.wp-block-columns:has(> .wp-block-column.ak-section-media:first-child) .wp-block-column:not(.ak-section-media) {
			animation-name: ak-part-text-left;
		}

		/* Freigestellte Motive brauchen KEINEN schneidenden Rahmen: ein
		   angeschnittenes Blütenblatt liest sich als Fehler. Stattdessen
		   bewegt sich die Blüte frei und darf über den Spaltenrand ragen. */
		/* Bereich bewusst eng: über die volle Scrollstrecke verteilt
		   wäre die Drehung pro Scrollpixel so klein, dass man sie nicht
		   bemerkt. So passiert sie, während der Abschnitt im Bild steht. */
		/* Nur Blumenbilder drehen sich. Das Über-mich-Porträt ist
		   ausgenommen: dort bewegt sich der Blob-Rahmen, nicht das Bild. */
		.ak-section-media .wp-block-image:not(.ak-portrait-blob) img {
			animation: ak-parallax linear both;
			animation-timeline: --ak-sec;
			animation-range: entry 20% cover 90%;
		}

		/* Abschluss-Aufruf: eigener Rhythmus, da einspaltig.

		   Endpunkt bewusst noch in der Entry-Phase (nicht "cover"): Der
		   Abschluss-Aufruf ist der letzte Abschnitt vor dem kurzen Footer.
		   "cover X%" verlangt, dass noch so viel weitergescrollt werden
		   kann, wie X % der Element-eigenen Höhe entspricht - bei einem so
		   hohen Abschnitt (Porträt-Blob + Text) reicht der Rest der Seite
		   dafür nicht aus. Ergebnis: Button blieb dauerhaft auf halber
		   Deckkraft hängen, kein Fehler in Farbe/Theme, sondern die
		   Animation kam schlicht nie am Ziel an. Live in Chrome bestätigt
		   (computed opacity blieb < 1, auch nach vollständigem Scrollen
		   zum Abschnitt). Mit "entry X%" schließt die Animation ab, sobald
		   der Abschnitt vollständig im Viewport ist - unabhängig davon,
		   wie viel noch darunter folgt. */
		.ak-section-cta h3,
		.ak-section-cta .wp-block-buttons {
			animation: ak-rise-simple linear both;
			animation-timeline: --ak-sec;
			animation-range: entry 10% entry 85%;
		}

		.ak-section-cta .wp-block-buttons {
			animation-range: entry 25% entry 100%;
		}
	}
}

/* Text startet mittig unter der Blüte, wandert nach links heraus */
@keyframes ak-part-text {
	from {
		opacity: 0.15;
		transform: translate(30%, 20px);
	}
	55% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes ak-part-text-left {
	from {
		opacity: 0.15;
		transform: translate(-30%, 20px);
	}
	55% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

/* Blüte startet mittig über dem Text, wandert nach rechts heraus */
/* Die Blüte startet sichtbar in der Mitte und verdeckt den Text.
   Ohne Deckkraft von Beginn an gäbe es nichts, wovon sich der Text
   lösen könnte, und der Verstecken-Effekt bliebe unsichtbar. */
@keyframes ak-part-media {
	from {
		opacity: 1;
		transform: translate(-26%, 24px);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes ak-part-media-left {
	from {
		opacity: 1;
		transform: translate(26%, 24px);
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

/* Die Blüte wandert langsamer als die Seite und dreht sich dabei
   leicht. Ohne scale, da freigestellte Motive keinen Rahmen füllen
   müssen. Der Text daneben scrollt schneller und schiebt sich dadurch
   an der Blüte vorbei. */
@keyframes ak-parallax {
	from {
		transform: translateY(-4%) rotate(-18deg) scale(0.72);
	}
	to {
		transform: translateY(4%) rotate(18deg) scale(1.32);
	}
}

/* ==========================================================
   Akasha Orakel

   Button zieht per Zufall einen Spruch (assets/js/akasha-orakel.js).
   Der Text existiert im Markup schon vor dem ersten Klick, bleibt aber
   unsichtbar (opacity/transform) statt per display/hidden komplett aus
   dem Fluss genommen zu werden - dadurch steht schon vorab genug Platz
   für den längsten Spruch bereit und der Button springt beim ersten
   Klick nicht nach unten.
   ========================================================== */

.ak-oracle {
	text-align: center;
}

/* Erzwungener Vollbreite-Ausbruch, unabhängig vom umschließenden
   Container: Auf der Live-Seite läuft die Startseite (bisher) als
   normale Seite mit Post-Content-Block, der selbst nochmal in einem
   breiten-begrenzten Block-Container steckt - WordPress' eingebauter
   "alignfull"-Mechanismus reicht dort nicht bis zum Bildschirmrand
   durch (funktioniert nur lokal, wo die Startseite ein eigenes
   Template ohne diese doppelte Verschachtelung ist). Diese Regel
   berechnet die Breite direkt aus dem Viewport (100vw) statt aus dem
   Elternelement und funktioniert deshalb in beiden Fällen. */
.ak-oracle {
	max-width: none !important;
	width: auto !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Das Cover-Block-Attribut "minHeight" (560px) landet als fixes
   Inline-Style direkt im Seiteninhalt - deshalb hier zwingend
   !important, um es zu überschreiben. Auf schmalen Bildschirmen macht
   eine feste Pixelhöhe die Box fast quadratisch, wodurch ein normales
   Querformat-Foto (object-fit: cover) seitlich stark beschnitten wird.
   clamp() lässt die Höhe mit der Breite mitschrumpfen, bis 1244px
   bleibt das bisherige Erscheinungsbild (560px) unverändert. */
.ak-oracle {
	min-height: clamp(260px, 45vw, 560px) !important;
}

/* Solange kein eigenes Foto hinterlegt ist, zeigt der Cover-Block nur die
   Überlagerungsfarbe (customOverlayColor im Muster) als Fläche - das sieht
   wie ein normaler dunkler Abschnitt aus. Sobald ein Foto hochgeladen ist,
   sitzt die Glasoptik-Box lesbar darüber. */
.ak-oracle .wp-block-cover__inner-container {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* Glasoptik-Box: halbtransparente, weich verwischte Fläche mit
   abgerundeten Ecken - dieselbe Optik wie die Nav-Pills (backdrop-filter
   + geringe Deckkraft), nur als große Fläche statt schmaler Pille.

   Die "contentSize" im Block-Layout (Mustertext bzw. Block-Attribute)
   schränkt nur die KINDER der Gruppe ein, nicht die Gruppe selbst - die
   Box wäre ohne dieses max-width hier trotzdem volle Breite geblieben.
   Live in Chrome nachgewiesen: computed max-width war "none", während
   die generierte Regel für die Kinder korrekt 420px zeigte.

   Mobil bleibt die feste Breite (kompakte, zentrierte Box). Ab 782px
   wird stattdessen mit festem Randabstand statt fixer Breite gearbeitet,
   damit die Box mit dem Bildschirm mitwächst statt bei großen Screens
   winzig zu wirken. */
.ak-oracle__panel {
	width: 100%;
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 56px);
	background-color: rgba(255, 249, 235, 0.08);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 249, 235, 0.16);
	border-radius: 28px;
	text-align: center;
}

@media (min-width: 782px) {
	.ak-oracle__panel {
		max-width: none;
		margin-left: 150px;
		margin-right: 150px;
	}
}

@supports not (backdrop-filter: blur(18px)) {
	.ak-oracle__panel {
		background-color: rgba(45, 17, 23, 0.72);
	}
}

.ak-oracle__intro {
	max-width: 48ch;
	margin: 0 auto;
	color: #FFF9EB;
	font-size: clamp(1rem, 1.8vw, 1.15rem);
	line-height: 1.6;
}

.ak-oracle__button.is-busy {
	pointer-events: none;
	opacity: 0.6;
}

/* Zwei Klassen im Selektor statt einer: ".ak-section p" (Klasse + Element,
   Spezifität 0,1,1) käme sonst gegen ".ak-oracle__text" (0,1,0) durch und
   setzt margin-top auf 0 zurück, egal in welcher Reihenfolge die Regeln im
   Stylesheet stehen. Live in Chrome nachgewiesen (computed margin-top blieb
   0px trotz "margin: 64px auto 0" hier). */
.ak-oracle .ak-oracle__text {
	max-width: 56ch;
	margin: 64px auto 0;
	font-family: var(--wp--preset--font-family--boska);
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-style: italic;
	line-height: 1.6;
	color: #FFF9EB;
	opacity: 0;
	transform: translateY(10px);
	filter: blur(14px);
	transition: opacity 700ms ease, transform 700ms ease, filter 700ms ease;
}

.ak-oracle .ak-oracle__text.is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	.ak-oracle .ak-oracle__text {
		transition: none;
		filter: none;
	}
}

/* ==========================================================
   Wortwechsel

   Der feste Satzteil steht still, nur das Schlüsselwort wechselt.
   Die Breite des Platzhalters richtet sich nach dem längsten Wort,
   deshalb springt der Satz beim Wechsel nicht.
   ========================================================== */

.ak-words {
	text-align: center;
	font-family: var(--wp--preset--font-family--boska);
	font-size: clamp(1.5rem, 4vw, 3rem);
	line-height: 1.3;
	font-weight: 300;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.3em;
}

.ak-words__fixed {
	color: #FFF9EB;
}

/* Ausschliesslich transition, bewusst keine zusaetzliche animation:
   beide zusammen steuern dieselben Eigenschaften und erzeugen ein
   sichtbares Doppelpulsen. Ein Mechanismus genuegt. */
.ak-words__slot {
	display: inline-block;
	text-align: center;
	color: #E9E6B5;
	transform: translateY(0);
	opacity: 1;
	filter: blur(0);
	transition: opacity 620ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
	            filter 620ms ease;
}

/* Altes Wort schwebt nach oben weg und verblasst */
.ak-words__slot.is-leaving {
	opacity: 0;
	transform: translateY(-0.4em);
	filter: blur(6px);
}

/* Neues Wort steht kurz unsichtbar bereit, bevor es einblendet.
   Ohne transition, damit dieser Zustand ohne sichtbaren Sprung gesetzt
   werden kann. */
.ak-words__slot.is-ready {
	opacity: 0;
	transform: translateY(0.2em);
	filter: blur(8px);
	transition: none;
}

/* Unsichtbarer Messkörper für die Breitenermittlung */
.ak-words__probe {
	position: absolute;
	visibility: hidden;
	white-space: nowrap;
	pointer-events: none;
	font: inherit;
	letter-spacing: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.ak-words__slot,
	.ak-words__slot.is-leaving,
	.ak-words__slot.is-ready {
		transition: none;
		opacity: 1;
		filter: none;
		transform: none;
	}
}

/* ==========================================================
   Überschriften treten aus dem Nebel hervor

   Der dunkelrote Schein löst sich auf, während die Schrift scharf
   wird. Nur dort, wo Scroll-Kopplung unterstützt wird.
   ========================================================== */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ak-section h1,
		.ak-section h2 {
			animation: ak-heading-emerge linear both;
			animation-timeline: --ak-sec;
			animation-range: entry 10% cover 45%;
		}
	}
}

@keyframes ak-heading-emerge {
	0% {
		opacity: 0;
		filter: blur(10px);
		transform: translateY(24px);
		text-shadow: 0 0 24px rgba(205, 0, 44, 0.55);
	}
	70% {
		text-shadow: 0 0 12px rgba(205, 0, 44, 0.25);
	}
	100% {
		opacity: 1;
		filter: none;
		transform: translateY(0);
		text-shadow: 0 0 0 rgba(205, 0, 44, 0);
	}
}


/* Einspaltiger Abschluss: nur aufsteigen, kein Auseinandergehen */
@keyframes ak-rise-simple {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================
   Sternenband

   Steht als eigener Block zwischen Abschnitten. Der Zeiger verbindet
   die Punkte zu Linien. Auf Touchgeräten bleiben die Punkte als
   ruhiges Feld stehen, da dort kein Zeiger existiert.
   ========================================================== */

.ak-stars {
	position: relative;
	height: 280px;
	width: 100%;
	overflow: hidden;
}

.ak-stars__canvas {
	position: absolute;
	inset: 0;
	display: block;
	pointer-events: none;
}

@media (max-width: 781px) {
	.ak-stars {
		height: 180px;
	}
}

/* ==========================================================
   Über-mich-Porträt im Blob

   Der Blob-Rahmen verformt sich beim Scrollen, das Foto darin bleibt
   ruhig. Umgesetzt über animiertes border-radius: das verschiebt die
   Kante weich, ohne das Bild zu drehen oder hart abzuschneiden.
   ========================================================== */

.ak-portrait-blob {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	aspect-ratio: 1;
}

/* Auf dem Handy sonst bildschirmfüllend, da nur width:100% der (einspaltig
   gestapelten) Sektion greift - hier gezielt verkleinert. */
@media (max-width: 781px) {
	.ak-portrait-blob {
		max-width: 260px;
	}
}

/* Das Porträt darf wie die Blumen die Spalte etwas überragen, damit es
   großzügig wirkt statt brav in der Spaltenbreite zu sitzen. */
@media (min-width: 782px) {
	.ak-section-media .ak-portrait-blob {
		width: 116%;
		max-width: 560px;
		margin-left: -8%;
	}

	.wp-block-column.ak-section-media:first-child .ak-portrait-blob {
		margin-left: auto;
		margin-right: -8%;
	}
}

.ak-portrait-blob img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%;
	overflow: hidden;
}

/* Der Blob-Container dreht sich und verformt die Kante. Das Bild darin
   dreht exakt gegengleich zurück, dadurch bleibt das Gesicht aufrecht
   und mittig, während der Rahmen wandert. Zwei Ebenen, die sich
   gegenläufig bewegen. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ak-portrait-blob {
			animation: ak-blob-frame linear both;
			animation-timeline: --ak-sec;
			animation-range: entry 10% exit 90%;
		}

		.ak-portrait-blob img {
			animation: ak-blob-counter linear both;
			animation-timeline: --ak-sec;
			animation-range: entry 10% exit 90%;
		}
	}
}

/* Rahmen dreht und verformt sich */
@keyframes ak-blob-frame {
	0% {
		transform: rotate(-14deg);
	}
	100% {
		transform: rotate(16deg);
	}
}

/* Bild dreht exakt gegengleich zurück: das Gesicht bleibt aufrecht.
   Die border-radius-Verformung sitzt hier, damit sie mit dem Bild
   läuft und die Blob-Kante am Foto entlangwandert. */
@keyframes ak-blob-counter {
	0% {
		transform: rotate(14deg);
		border-radius: 42% 58% 55% 45% / 48% 44% 56% 52%;
	}
	50% {
		border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%;
	}
	100% {
		transform: rotate(-16deg);
		border-radius: 46% 54% 60% 40% / 42% 46% 54% 58%;
	}
}

/* ==========================================================
   Trennzeichen (Separator-Block) in Knallrot statt Grau

   WordPress setzt für den Separator-Block standardmäßig
   "border-color: currentColor" mit reduzierter Deckkraft - das wirkt
   auf dem dunklen Hintergrund grau/blass statt in einer Theme-Farbe.
   Deckt beide Varianten ab: die Standard-Linie (border) und den
   Punkte-Stil "is-style-dots" (Farbe kommt dort über ::before/color).
   ========================================================== */
.wp-block-separator {
	border-color: var(--wp--preset--color--knallrot, #CD002C);
	background-color: var(--wp--preset--color--knallrot, #CD002C);
	opacity: 1;
}

.wp-block-separator.is-style-dots::before {
	color: var(--wp--preset--color--knallrot, #CD002C);
}