/*
 * Quantum Bloom – ergänzende Stile, Block-Stil-Varianten und Hilfsklassen.
 * Farben/Abstände/Schriften kommen aus theme.json.
 */

:root {
	--qb-radius-none: 0px;
	--qb-radius-soft: 10px;
	--qb-radius-round: 26px;
	--qb-radius-pill: 999px;
	--qb-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
	--qb-line: var(--wp--preset--color--line, #24334c);
	--qb-bloom: var(--wp--preset--gradient--bloom, linear-gradient(120deg, #4fc3e8, #a88cde 52%, #e9c882));
	--qb-photon: var(--wp--preset--gradient--photon, linear-gradient(120deg, #2a729a, #4fc3e8));
	--qb-spectrum: var(--wp--preset--gradient--spektrum, linear-gradient(90deg, #4fc3e8, #ffffff 48%, #e9c882));
}

body {
	overflow-x: clip;
	background-attachment: fixed;
}

/* Titel ausblenden – Rückfallebene zur PHP-Logik. */
body.qb-title-hidden .wp-site-blocks > .wp-block-post-title,
body.qb-title-hidden .wp-block-group > .wp-block-post-title {
	display: none;
}

/* ---------------------------------------------------------------
 * Ecken-Varianten (eckig <-> rund), pro Block auswählbar
 * --------------------------------------------------------------- */
.is-style-qb-radius-none,
.is-style-qb-radius-none img,
.is-style-qb-radius-none .wp-block-cover__image-background { border-radius: var(--qb-radius-none) !important; }

.is-style-qb-radius-soft,
.is-style-qb-radius-soft img,
.is-style-qb-radius-soft .wp-block-cover__image-background { border-radius: var(--qb-radius-soft) !important; overflow: hidden; }

.is-style-qb-radius-round,
.is-style-qb-radius-round img,
.is-style-qb-radius-round .wp-block-cover__image-background { border-radius: var(--qb-radius-round) !important; overflow: hidden; }

.is-style-qb-radius-pill,
.is-style-qb-radius-pill img { border-radius: var(--qb-radius-pill) !important; overflow: hidden; }

.is-style-qb-radius-leaf,
.is-style-qb-radius-leaf img { border-radius: var(--qb-radius-round) 0 var(--qb-radius-round) 0 !important; overflow: hidden; }

/* ---------------------------------------------------------------
 * Randlos: echte Bildschirmbreite, auch verschachtelt
 * --------------------------------------------------------------- */
.is-style-qb-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

.is-style-qb-bleed > img,
.is-style-qb-bleed img.wp-block-image__img {
	width: 100%;
	border-radius: 0;
}

/* ---------------------------------------------------------------
 * Glas / Verlaufs-Rahmen / Technik-Raster (auf dunklem Grund)
 * --------------------------------------------------------------- */
.is-style-qb-glass {
	background: rgba(22, 35, 58, 0.55);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.10);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
	border-radius: var(--qb-radius-round);
}

.is-style-qb-gradient-border {
	position: relative;
	border-radius: var(--qb-radius-round);
	background-clip: padding-box;
	border: 1px solid transparent;
}

.is-style-qb-gradient-border::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--qb-bloom);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0.55;
}

.is-style-qb-grid-lines {
	position: relative;
	background-image:
		linear-gradient(to right, rgba(147, 167, 196, 0.09) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(147, 167, 196, 0.09) 1px, transparent 1px);
	background-size: 44px 44px;
}

/* Leuchtender Kern als Hintergrund-Effekt */
.qb-core-glow {
	position: relative;
	isolation: isolate;
}

.qb-core-glow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(70vw, 900px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(79, 195, 232, 0.20) 0%, rgba(79, 195, 232, 0.06) 35%, rgba(5, 10, 20, 0) 70%);
	pointer-events: none;
	z-index: -1;
}

/* ---------------------------------------------------------------
 * Feste Größen für Kernblöcke (Panel „Quantum Bloom: Feste Größe“)
 * --------------------------------------------------------------- */
.qb-dim { box-sizing: border-box; }

.qb-dim.is-qbh-fixed { height: var(--qb-h, 320px); }
.qb-dim.is-qbh-min { min-height: var(--qb-h, 320px); }
.qb-dim.is-qbh-screen { min-height: 100vh; min-height: 100svh; }
.qb-dim.is-qbh-ratio { aspect-ratio: var(--qb-ar, 16 / 9); height: auto; }

.qb-dim.is-qbo-hidden { overflow: hidden; }
.qb-dim.is-qbo-auto { overflow: auto; }

.qb-dim.is-qbstretch { height: 100%; align-self: stretch; }

.wp-block-column:has(> .qb-dim.is-qbstretch),
.wp-block-column:has(> .is-qbstretch) {
	display: flex;
	flex-direction: column;
}

.qb-dim.is-qbh-fixed.wp-block-image img,
.qb-dim.is-qbh-ratio.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.qb-dim.is-qbh-fixed { height: var(--qb-h-t, var(--qb-h, 320px)); }
	.qb-dim.is-qbh-min { min-height: var(--qb-h-t, var(--qb-h, 320px)); }
}

@media (max-width: 781px) {
	.qb-dim.is-qbh-fixed { height: var(--qb-h-m, var(--qb-h-t, var(--qb-h, 320px))); }
	.qb-dim.is-qbh-min { min-height: var(--qb-h-m, var(--qb-h-t, var(--qb-h, 320px))); }
}

/* ---------------------------------------------------------------
 * Wort-Formatierung (einzelne Wörter in Farbe/Größe/Schrift)
 * --------------------------------------------------------------- */
.qb-word {
	display: inline;
	line-height: inherit;
}

/* ---------------------------------------------------------------
 * Text- und Listen-Varianten
 * --------------------------------------------------------------- */
.is-style-qb-gradient-text {
	background: var(--qb-bloom);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.is-style-qb-eyebrow {
	font-size: var(--wp--preset--font-size--x-small) !important;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.5rem;
}

.is-style-qb-check,
.is-style-qb-arrow {
	list-style: none;
	padding-left: 0;
}

.is-style-qb-check li,
.is-style-qb-arrow li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.65rem;
}

.is-style-qb-check li::before,
.is-style-qb-arrow li::before {
	position: absolute;
	left: 0;
	top: 0.15em;
	font-family: "Material Symbols Rounded";
	font-size: 1.25em;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.is-style-qb-check li::before { content: "check_circle"; }
.is-style-qb-arrow li::before { content: "arrow_circle_right"; color: var(--wp--preset--color--gold); }

.is-style-qb-gradient-line {
	height: 1px;
	border: 0;
	background: var(--qb-spectrum);
	opacity: 0.5;
	max-width: 100%;
}

/* ---------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------- */
.wp-block-button.is-style-qb-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1.5px rgba(234, 242, 255, 0.28);
	transition: var(--qb-transition);
}

.wp-block-button.is-style-qb-ghost .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: transparent;
}

.wp-block-button.is-style-qb-gradient .wp-block-button__link {
	background: var(--qb-photon);
	color: #050a14;
	border: 0;
	transition: var(--qb-transition);
	box-shadow: 0 0 0 rgba(79, 195, 232, 0);
}

.wp-block-button.is-style-qb-gradient .wp-block-button__link:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 8px 30px rgba(79, 195, 232, 0.35);
}

.wp-block-button__link {
	transition: var(--qb-transition);
}

/* ---------------------------------------------------------------
 * Hilfsklassen
 * --------------------------------------------------------------- */
.qb-hover-lift { transition: var(--qb-transition); }
.qb-hover-lift:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

.qb-sticky-header {
	position: sticky;
	top: 0;
	z-index: 90;
	backdrop-filter: saturate(150%) blur(16px);
	-webkit-backdrop-filter: saturate(150%) blur(16px);
	background: rgba(5, 10, 20, 0.72);
	border-bottom: 1px solid var(--qb-line);
}

.qb-logo img,
.wp-block-site-logo img {
	border-radius: 8px;
}

/* Navigations-Overlay auf Mobilgeräten */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}