/* ==========================================================
   Root & Rise – Gestaltung der Abschnitte
   Farben und Schriften kommen aus theme.json (im Website-Editor änderbar).
   Abschnitte erkennt man an den Klassen rr-…, die Blöcke im Editor tragen.
   Leitmotiv ist der Horizont: oben Licht (Rise), unten Erde (Root).
   ========================================================== */

:root {
	--rr-moor: var(--wp--preset--color--moor);
	--rr-moor-tief: var(--wp--preset--color--moor-tief);
	--rr-fjord: var(--wp--preset--color--fjord);
	--rr-salbei: var(--wp--preset--color--salbei);
	--rr-safran: var(--wp--preset--color--safran);
	--rr-mohn: var(--wp--preset--color--mohn);
	--rr-aprikose: var(--wp--preset--color--aprikose);
	--rr-papier: var(--wp--preset--color--papier);
	--rr-leinen: var(--wp--preset--color--leinen);
	--rr-text-sanft: var(--wp--preset--color--text-sanft);
	--rr-hell: var(--wp--preset--color--hell-auf-dunkel);
	--rr-hell-sanft: #BFC6BC;
	--rr-linie: color-mix(in srgb, var(--rr-moor) 16%, transparent);
	--rr-display: var(--wp--preset--font-family--display);
	--rr-body: var(--wp--preset--font-family--body);

	/* Lichtkreise für BODY und MIND, ihre Überschneidung ergibt BALANCE */
	--rr-licht-body: radial-gradient(circle at 68% 50%, #E2ECEA 0%, #B4CBCB 42%, #7F9FA5 100%);
	--rr-licht-mind: radial-gradient(circle at 32% 50%, #FFF2D9 0%, #F8D392 42%, #EDAB58 100%);
	--rr-sonne: radial-gradient(circle at 50% 50%, #FFF1D6 0%, #FBDDA4 28%, #F3BD6C 62%, #E9A04C 100%);

	--rr-gutter: clamp(1.25rem, 5vw, 3rem);
	--rr-wrap: 1320px;
	/* Innenabstand, der Inhalte auf die Seitenbreite begrenzt, während Hintergründe randlos bleiben */
	--rr-inline: max(var(--rr-gutter), calc((100% - var(--rr-wrap)) / 2));
	--rr-section: clamp(5.5rem, 10.5vw, 9.5rem);
	--rr-header-h: 5.5rem;
	--rr-ease: cubic-bezier(.16, 1, .3, 1);
	--rr-grain: url(../img/grain.svg);
}

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--rr-aprikose); color: var(--rr-moor); }

:where(a, button, .wp-element-button, summary):focus-visible {
	outline: 2px solid var(--rr-safran);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Dekor wie Lichtkreise und Wurzeln darf seitlich nie zum Scrollen führen */
.wp-site-blocks { position: relative; overflow-x: clip; }
.wp-site-blocks > * { margin-block: 0; }

/* Eigene Abschnitte regeln Abstände über gap statt über Block-Außenabstände */
.wp-block-group[class*="rr-"]:not(.rr-page):not(.rr-single) > *,
.rr-front-content > * { margin-block: 0; }

/* ---------- Bewegung ----------
   theme.js zerlegt Überschriften in Wörter und markiert Elemente, sobald sie sichtbar werden.
   Ohne JavaScript oder bei reduzierter Bewegung bleibt alles sofort sichtbar. */

.rr-word {
	display: inline-block;
	overflow: clip;
	vertical-align: top;
	padding: .1em .08em .16em;
	margin: -.1em -.08em -.16em;
}
.rr-word > span { display: inline-block; }
.rr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rr-reveal .rr-word > span {
	transform: translateY(112%);
	transition: transform 1.25s var(--rr-ease);
	transition-delay: calc(var(--i, 0) * 55ms);
}
.rr-reveal.is-visible .rr-word > span { transform: none; }

/* Bilder steigen von unten ins Bild, wie Licht über den Horizont */
.rr-reveal:is(figure, .wp-block-image, .wp-block-post-featured-image) img {
	transition: clip-path 1.5s var(--rr-ease), scale 2.2s var(--rr-ease);
}
.rr-reveal:not(.is-visible):is(figure, .wp-block-image, .wp-block-post-featured-image) img {
	clip-path: inset(100% 0 0 0);
	scale: 1.08;
}

@keyframes rr-word-in { from { transform: translateY(112%); } to { transform: none; } }
@keyframes rr-fade-up { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes rr-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rr-sunrise { from { transform: translateY(46%); } to { transform: none; } }
@keyframes rr-glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes rr-grow { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rr-show { to { opacity: 1; } }

/* ---------- Buttons und Links ---------- */

.wp-block-buttons { gap: .75rem 1rem; }

/* Beim Überfahren steigt die Füllung von unten auf */
.wp-block-button__link {
	--rr-fill: var(--rr-fjord);
	background-image: linear-gradient(var(--rr-fill), var(--rr-fill));
	background-position: 0 100%;
	background-size: 100% 0;
	background-repeat: no-repeat;
	transition: background-size .55s var(--rr-ease), color .35s ease, border-color .35s ease;
}
.wp-block-button__link:hover { background-size: 100% 100%; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	--rr-fill: var(--rr-moor);
	background-color: transparent;
	color: inherit;
	border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
	padding: calc(1.05rem - 1px) calc(1.75rem - 1px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--rr-papier);
	border-color: var(--rr-moor);
}

.wp-block-button.is-style-dark > .wp-block-button__link { background-color: var(--rr-moor); color: var(--rr-papier); }

/* Auf dunklen Flächen kehren sich die Buttons um */
:is(.rr-closing, .rr-growing-earth) .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	--rr-fill: var(--rr-aprikose);
	background-color: var(--rr-papier);
	color: var(--rr-moor);
}
:is(.rr-closing, .rr-growing-earth) .wp-block-button.is-style-outline > .wp-block-button__link { --rr-fill: var(--rr-papier); }
:is(.rr-closing, .rr-growing-earth) .wp-block-button.is-style-outline > .wp-block-button__link:hover { color: var(--rr-moor); border-color: var(--rr-papier); }

.rr-text-link a,
.rr-back-link a {
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: .2em;
	transition: background-size .5s var(--rr-ease);
}
.rr-text-link a:hover,
.rr-back-link a:hover { background-size: 35% 1px; }

/* ---------- Kopfbereich ---------- */

.rr-site-header {
	position: absolute;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
	z-index: 50;
	transition: transform .7s var(--rr-ease);
}
.rr-js .rr-site-header { position: fixed; }

/* Hintergrund als eigene Ebene: backdrop-filter am Kopfbereich selbst würde das mobile Menü einsperren */
.rr-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--rr-papier) 88%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
	border-bottom: 1px solid color-mix(in srgb, var(--rr-moor) 7%, transparent);
	opacity: 0;
	transition: opacity .5s ease;
}
.rr-scrolled .rr-site-header::before { opacity: 1; }
.rr-header-hidden:not(.has-modal-open) .rr-site-header { transform: translateY(-100%); }

.rr-header {
	min-height: var(--rr-header-h);
	padding: .75rem var(--rr-inline);
	gap: 2rem;
	align-items: center;
	transition: min-height .5s var(--rr-ease);
}
.rr-scrolled .rr-header { min-height: 4.5rem; }

.rr-brand {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: .75rem;
	align-items: center;
	line-height: 1.1;
}
.rr-brand::before {
	content: "";
	grid-row: 1 / span 2;
	width: 2.5rem;
	height: 2.5rem;
	background: url(../img/mark.svg) center / contain no-repeat;
}
.rr-wordmark { font-size: 1.5rem; font-weight: 350; letter-spacing: -.01em; line-height: 1.05; }
.rr-wordmark a { text-decoration: none; color: var(--rr-moor); }
.rr-wordmark a:hover { color: var(--rr-moor); }
.rr-tagline { font-size: .6rem; letter-spacing: .24em; font-weight: 500; opacity: .7; margin-top: .3rem; }

.rr-nav { gap: clamp(1.25rem, 2.4vw, 2.25rem); font-weight: 450; font-size: .95rem; }
.rr-nav .wp-block-navigation-item__content {
	text-decoration: none;
	padding-block: .35rem;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .5s var(--rr-ease);
}
.rr-nav .wp-block-navigation-item__content:hover,
.rr-nav .current-menu-item > .wp-block-navigation-item__content { background-size: 100% 1px; }

/* Kontakt als ruhiger Button am Ende der Navigation */
.rr-nav .rr-nav-cta > .wp-block-navigation-item__content {
	padding: .6rem 1.15rem;
	border: 1px solid color-mix(in srgb, var(--rr-moor) 28%, transparent);
	border-radius: 999px;
	background: linear-gradient(var(--rr-moor), var(--rr-moor)) 0 100% / 100% 0 no-repeat;
	transition: background-size .55s var(--rr-ease), color .35s ease, border-color .35s ease;
}
.rr-nav .rr-nav-cta > .wp-block-navigation-item__content:hover {
	background-size: 100% 100%;
	border-color: var(--rr-moor);
	color: var(--rr-papier);
}

/* Mobiles Menü schon unterhalb von 900px statt erst ab 600px */
@media (max-width: 900px) {
	.rr-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.rr-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.rr-nav .wp-block-navigation__responsive-container-open,
.rr-nav .wp-block-navigation__responsive-container-close {
	border-radius: 999px;
	padding: .6rem;
}
.rr-nav .wp-block-navigation__responsive-container-open { border: 1px solid color-mix(in srgb, var(--rr-moor) 22%, transparent); }
.rr-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	background:
		radial-gradient(90% 55% at 100% 100%, color-mix(in srgb, var(--rr-aprikose) 85%, transparent), transparent 70%),
		var(--rr-papier);
	color: var(--rr-moor);
	padding: 1.25rem var(--rr-gutter) 2rem;
}
.rr-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.5rem; }
.rr-nav .is-menu-open .wp-block-navigation__container { gap: .25rem; }
.rr-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.rr-nav .is-menu-open .wp-block-navigation__container { align-items: flex-start !important; }
.rr-nav .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--rr-display);
	font-size: clamp(2.3rem, 10vw, 3.4rem);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.15;
}
.rr-nav .is-menu-open .rr-nav-cta > .wp-block-navigation-item__content { padding: 0; border: 0; background: none; color: inherit; }
.rr-nav .is-menu-open .wp-block-navigation-item { animation: rr-fade-up .8s var(--rr-ease) both; }
.rr-nav .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 50ms; }
.rr-nav .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 100ms; }
.rr-nav .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 150ms; }
.rr-nav .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 200ms; }
.rr-nav .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 250ms; }

/* ---------- Einstieg (Hero) ----------
   Himmel mit aufgehender Sonne, darunter Erde mit Wurzeln. --rr-rise (0–1) setzt theme.js beim Scrollen. */

.rr-hero {
	--rr-sun: clamp(17rem, 40vw, 42rem);
	--rr-sun-right: calc(var(--rr-inline) + 3vw);
	position: relative;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	min-height: max(40rem, 100svh);
	overflow: clip;
}

.rr-hero-sky {
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: center;
	padding: calc(var(--rr-header-h) + clamp(2rem, 7vh, 5rem)) var(--rr-inline) clamp(3.5rem, 10vh, 7.5rem);
	background: linear-gradient(180deg, var(--rr-papier) 0%, #F8F1E5 45%, #F6E2C2 100%);
}
.rr-hero-sky > * { position: relative; z-index: 1; }

/* Körnung, damit Verläufe nach Papier statt nach Bildschirm aussehen */
.rr-hero-sky::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--rr-grain);
	opacity: .3;
	pointer-events: none;
}

.rr-hero-sky::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: var(--rr-sun-right);
	bottom: 0;
	width: var(--rr-sun);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--rr-sonne);
	box-shadow:
		0 0 5rem 1rem rgba(243, 182, 96, .32),
		0 0 14rem 5rem rgba(247, 216, 166, .55);
	translate: 0 calc(50% - var(--rr-rise, 0) * 30%);
	animation: rr-sunrise 3.2s var(--rr-ease) .1s both;
}

.rr-hero-title.wp-block-heading {
	font-size: clamp(3.1rem, 7.6vw, 8rem);
	font-weight: 300;
	line-height: .98;
	letter-spacing: -.035em;
	max-width: 13ch;
}
/* Wortweise aufbauen; ohne Skript erscheint die Überschrift spätestens nach kurzer Zeit von selbst */
.rr-js .rr-hero-title { opacity: 0; animation: rr-show .01s 1.6s forwards; }
.rr-js .rr-hero-title.is-split { opacity: 1; animation: none; }
.rr-hero-title .rr-word > span {
	animation: rr-word-in 1.35s var(--rr-ease) both;
	animation-delay: calc(.25s + var(--i, 0) * 70ms);
}

.rr-hero-earth {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 33rem);
	gap: 2rem;
	align-content: start;
	padding: clamp(2.25rem, 5.5vh, 3.75rem) var(--rr-inline) clamp(3rem, 8vh, 5.5rem);
	background:
		radial-gradient(38% 85% at calc(100% - var(--rr-sun-right) - var(--rr-sun) / 2) 0%, rgba(232, 168, 86, .26), transparent 75%),
		var(--rr-leinen);
}
.rr-hero-earth > * { position: relative; z-index: 1; animation: rr-fade-up 1.2s var(--rr-ease) both; }
.rr-hero-earth > :nth-child(1) { animation-delay: .9s; }
.rr-hero-earth > :nth-child(2) { animation-delay: 1.05s; }
.rr-hero-lead { font-size: clamp(1.1rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--rr-moor); }

/* Horizontlinie: zieht sich beim Laden einmal über die ganze Breite */
.rr-hero-earth::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: color-mix(in srgb, var(--rr-moor) 32%, transparent);
	transform-origin: 0 50%;
	animation: rr-draw 2s var(--rr-ease) both;
}

/* Wurzeln unter der Sonne, wachsen beim Laden nach unten und beim Scrollen ein Stück weiter */
.rr-hero-earth::after {
	content: "";
	position: absolute;
	top: 0;
	right: calc(var(--rr-sun-right) + var(--rr-sun) / 2);
	width: calc(var(--rr-sun) * 1.35);
	aspect-ratio: 3 / 2;
	margin-right: calc(var(--rr-sun) * -.675);
	background: url(../img/roots.svg) top center / 100% auto no-repeat;
	transform-origin: 50% 0;
	scale: 1 calc(1 + var(--rr-rise, 0) * .35);
	animation: rr-grow 3s cubic-bezier(.45, .1, .2, 1) .9s both;
	pointer-events: none;
}

/* ---------- Abschnitte allgemein ---------- */

.rr-section {
	display: grid;
	gap: clamp(3.5rem, 7vw, 6rem);
	padding: var(--rr-section) var(--rr-inline);
}

.rr-section-head {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 1.25rem 4rem;
	align-items: end;
}
.rr-section-head h2 { max-width: 13ch; }
.rr-section-head p { color: var(--rr-text-sanft); max-width: 30rem; font-size: 1.15rem; }
.rr-section-head--link { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) auto; }
.rr-section-head--link .rr-text-link { white-space: nowrap; }

/* ---------- Philosophie ----------
   Zwei Lichtkreise: BODY kühl, MIND warm. Wo sie sich überlagern, mischen sich die Farben – das ist BALANCE. */

.rr-pillars {
	--rr-orb: clamp(10rem, 25vw, 23rem);
	--rr-orb-gap: calc(var(--rr-orb) * .6);
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
	min-height: calc(var(--rr-orb) * 1.25);
}

.rr-pillars::before,
.rr-pillars::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 25%;
	width: var(--rr-orb);
	aspect-ratio: 1;
	margin: calc(var(--rr-orb) / -2) 0 0 calc(var(--rr-orb) / -2);
	border-radius: 50%;
	mix-blend-mode: multiply;
	transition: translate 2.6s var(--rr-ease), opacity 1.6s ease;
}
.rr-pillars::before { background: var(--rr-licht-body); translate: calc(var(--rr-orb-gap) / -2) 0; }
.rr-pillars::after { background: var(--rr-licht-mind); translate: calc(var(--rr-orb-gap) / 2) 0; }

/* Vor dem Hineinscrollen liegen die Kreise weit auseinander */
.rr-pillars.rr-reveal:not(.is-visible)::before { translate: calc(var(--rr-orb-gap) / -2 - 32%) 0; opacity: 0; }
.rr-pillars.rr-reveal:not(.is-visible)::after { translate: calc(var(--rr-orb-gap) / 2 + 32%) 0; opacity: 0; }

/* Zeigt man auf einen Bereich, tritt der andere Kreis zurück */
.rr-pillars:has(.rr-pillar--body:hover)::after,
.rr-pillars:has(.rr-pillar--mind:hover)::before { opacity: .28; transition-duration: .8s; }

.rr-pillar {
	grid-column: 2;
	display: grid;
	grid-template-columns: 1.1rem minmax(0, 1fr);
	column-gap: 1.25rem;
	row-gap: .6rem;
	align-items: baseline;
	padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
	border-top: 1px solid var(--rr-linie);
}
.rr-pillar:last-child { border-bottom: 1px solid var(--rr-linie); }
.rr-pillar::before {
	content: "";
	width: .8rem;
	height: .8rem;
	border-radius: 50%;
	align-self: center;
}
.rr-pillar > * { grid-column: 2; }
.rr-pillar h3 {
	font-size: clamp(1.7rem, 2.5vw, 2.3rem);
	font-weight: 300;
	letter-spacing: .14em;
	line-height: 1;
	grid-row: 1;
}
.rr-pillar p { color: var(--rr-text-sanft); max-width: 30rem; }
.rr-pillar--body::before { background: var(--rr-licht-body); }
.rr-pillar--mind::before { background: var(--rr-licht-mind); }
.rr-pillar--balance::before { background: linear-gradient(90deg, #7E9A9C 50%, #EDB063 50%); }

/* ---------- Angebote ---------- */

.rr-offers { background: var(--rr-leinen); }
.rr-offer-list { display: grid; gap: clamp(4.5rem, 9vw, 8rem); }

/* Status als Punkt: voll = erhältlich, halb = in Planung, leer = Zukunftsprojekt */
.rr-status {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	width: fit-content;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .01em;
	line-height: 1.4;
	color: var(--rr-moor);
}
.rr-status::before {
	content: "";
	width: .7rem;
	height: .7rem;
	border-radius: 50%;
	border: 1px solid var(--rr-moor);
}
.rr-status--now::before { background: var(--rr-moor); }
.rr-status--soon::before { background: linear-gradient(90deg, var(--rr-moor) 50%, transparent 50%); }

.rr-offer h3 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); font-weight: 300; letter-spacing: -.02em; }
.rr-offer-copy { display: grid; gap: 1.15rem; justify-items: start; align-content: start; }
.rr-offer-copy > p:not([class]) { color: var(--rr-text-sanft); max-width: 31rem; }
.rr-offer-copy .wp-block-buttons { padding-top: .5rem; }

.rr-offer--books {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: clamp(2.5rem, 6vw, 6rem);
}
.rr-offer--books h3 { font-size: clamp(2.2rem, 4vw, 3.6rem); max-width: 12ch; }

/* Drei Cover, aufgefächert wie auf einem Tisch */
.rr-shelf {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding-block: 2rem 3rem;
}
.rr-shelf::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: 2.2rem;
	height: 2rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(31, 45, 42, .22), transparent);
	filter: blur(6px);
	z-index: 0;
}
.rr-cover {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .4rem;
	width: clamp(120px, 13vw, 190px);
	aspect-ratio: 3 / 4.2;
	padding: 1.2rem 1.05rem;
	border-radius: 3px 7px 7px 3px;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, .16) 0, rgba(255, 255, 255, .14) 3px, rgba(0, 0, 0, .04) 9px, transparent 16px);
	box-shadow: 0 1px 2px rgba(31, 45, 42, .2), 0 24px 40px -18px rgba(31, 45, 42, .5);
	transition: rotate 1.2s var(--rr-ease), translate 1.2s var(--rr-ease), opacity 1s ease;
}
.rr-cover p { line-height: 1.15; }
.rr-cover-title { font-family: var(--rr-display); font-weight: 350; font-size: 1.15rem; letter-spacing: -.01em; }
.rr-cover-sub { font-size: .72rem; line-height: 1.35; opacity: .85; }
.rr-cover-kicker { font-size: .7rem; font-weight: 500; opacity: .7; }

.rr-cover--compass {
	z-index: 2;
	width: clamp(150px, 17vw, 240px);
	margin-inline: -1.75rem;
	background-color: var(--rr-fjord);
	color: var(--rr-hell);
}
.rr-cover--compass::before {
	content: "";
	position: absolute;
	top: 13%;
	left: 50%;
	width: 50%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: url(../img/compass.svg) center / contain no-repeat;
}
.rr-cover--compass .rr-cover-title { font-size: clamp(1.3rem, 1.9vw, 1.7rem); font-weight: 300; }

.rr-cover--pending { background-color: #E9BE78; color: var(--rr-moor); rotate: -7deg; translate: 0 .6rem; }
.rr-cover--sage {
	background-color: var(--rr-salbei);
	color: var(--rr-moor);
	rotate: 7deg;
	translate: 0 .6rem;
	align-items: flex-end;
	text-align: right;
}
.rr-cover--pending .rr-cover-title, .rr-cover--sage .rr-cover-title { opacity: .55; }

.rr-shelf:hover .rr-cover--pending { rotate: -10deg; translate: -1rem .9rem; }
.rr-shelf:hover .rr-cover--sage { rotate: 10deg; translate: 1rem .9rem; }
.rr-shelf:hover .rr-cover--compass { translate: 0 -.5rem; }

/* Beim Hineinscrollen legen sich die Cover nacheinander auf den Tisch */
@keyframes rr-cover-in { from { opacity: 0; rotate: 0deg; translate: 0 3rem; } }
.rr-shelf.rr-reveal:not(.is-visible) .rr-cover { opacity: 0; }
.rr-shelf.rr-reveal.is-visible .rr-cover { animation: rr-cover-in 1.4s var(--rr-ease) backwards; }
.rr-shelf.rr-reveal.is-visible .rr-cover--compass { animation-delay: .12s; }
.rr-shelf.rr-reveal.is-visible .rr-cover--sage { animation-delay: .24s; }

.rr-offer-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.rr-offer-row > :nth-child(2) { padding-top: clamp(0rem, 9vw, 8rem); }

.rr-offer--future { display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); align-content: start; }
.rr-offer-img { margin: 0; overflow: hidden; border-radius: 3px; }
.rr-offer-img img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }

/* Auf der Seite „Angebote“ sitzt die Liste ohne eigenen Hintergrund */
.rr-page-offers { margin-top: clamp(3rem, 6vw, 5rem); }

/* ---------- Wissen & Impulse ---------- */

.rr-pillar-tag { font-size: .85rem; font-weight: 500; letter-spacing: .01em; }
.rr-pillar-tag a { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.rr-pillar-tag a::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--rr-text-sanft); }
.rr-pillar-tag a[href*="/body"]::before { background: var(--rr-licht-body); }
.rr-pillar-tag a[href*="/mind"]::before { background: var(--rr-licht-mind); }
.rr-pillar-tag a[href*="/balance"]::before { background: linear-gradient(90deg, #7E9A9C 50%, #EDB063 50%); }
.rr-pillar-tag .wp-block-post-terms__separator { display: none; }

.rr-post-copy { display: grid; gap: .75rem; justify-items: start; align-content: start; }
.rr-post-title { font-size: clamp(1.45rem, 1.9vw, 1.75rem); font-weight: 350; line-height: 1.18; letter-spacing: -.012em; }
.rr-post-title a { text-decoration: none; }
.rr-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rr-post-title a {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .6s var(--rr-ease);
}
.wp-block-post:hover .rr-post-title a { background-size: 100% 1px; }
.rr-post-copy .wp-block-post-excerpt { color: var(--rr-text-sanft); font-size: 1rem; }
.rr-post-copy .wp-block-post-excerpt__excerpt { margin: 0; }
.rr-post-img { margin: 0; overflow: hidden; border-radius: 3px; }
.rr-post-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: scale 1.4s var(--rr-ease); }
.wp-block-post:hover .rr-post-img img { scale: 1.04; }

.rr-latest .wp-block-post-template,
.rr-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4rem clamp(1.5rem, 3.5vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rr-latest .wp-block-post,
.rr-post-grid .wp-block-post {
	position: relative;
	display: grid;
	gap: 1.5rem;
	align-content: start;
	margin: 0;
}

/* Beitragsübersicht und Kategorien */
.rr-archive {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: clamp(3.5rem, 7vw, 5.5rem);
	padding: calc(var(--rr-header-h) + clamp(3rem, 8vw, 6rem)) var(--rr-inline) var(--rr-section);
}
.rr-archive-head { display: grid; gap: 1.25rem; max-width: 46rem; }
.rr-archive-head h1 { font-size: clamp(3rem, 7vw, 6.25rem); }
.rr-archive-head p { color: var(--rr-text-sanft); font-size: 1.2rem; max-width: 34rem; }
.rr-pagination { margin-top: 1rem; font-weight: 500; }

/* ---------- Haltung ---------- */

.rr-about {
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: center;
}

/* Bogenform mit feinem Lichtkranz: die aufgehende Sonne aus dem Einstieg */
.rr-arch { position: relative; margin: 0; }
.rr-arch img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 3px 3px; }
.rr-arch::after {
	content: "";
	position: absolute;
	inset: -1rem -1rem auto;
	aspect-ratio: 2 / 1;
	border: 1px solid var(--rr-linie);
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
	pointer-events: none;
}
.rr-reveal.rr-arch img { clip-path: inset(0 0 0 0 round 999px 999px 3px 3px); }
.rr-reveal.rr-arch:not(.is-visible) img { clip-path: inset(100% 0 0 0 round 999px 999px 3px 3px); }

.rr-about-copy { display: grid; gap: 1.2rem; justify-items: start; }
.rr-about-copy h2 { padding-bottom: 1rem; max-width: 12ch; }
.rr-about-copy > p { max-width: 35rem; color: var(--rr-text-sanft); }
.rr-about-copy .rr-values {
	color: var(--rr-moor);
	font-family: var(--rr-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(1.35rem, 2vw, 1.7rem);
	line-height: 1.4;
	letter-spacing: -.005em;
	max-width: 32rem;
	padding-block: 1rem 1.25rem;
}

/* ---------- Abschluss ----------
   Dunkle Erde, am unteren Rand geht eine zweite Sonne auf. Der Fußbereich liegt unter dem Horizont. */

.rr-closing {
	--rr-sun: clamp(12rem, 22vw, 20rem);
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: grid;
	justify-items: center;
	gap: 1.5rem;
	text-align: center;
	padding: var(--rr-section) var(--rr-inline) calc(var(--rr-section) + var(--rr-sun) * .4);
	background:
		radial-gradient(60% 55% at 50% 100%, rgba(227, 164, 71, .22), transparent 75%),
		var(--rr-moor);
	color: var(--rr-hell);
}
.rr-closing::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: 0;
	width: var(--rr-sun);
	aspect-ratio: 1;
	margin-left: calc(var(--rr-sun) / -2);
	border-radius: 50%;
	background: var(--rr-sonne);
	box-shadow: 0 0 5rem 1rem rgba(232, 160, 70, .26), 0 0 14rem 3rem rgba(232, 160, 70, .12);
	translate: 0 calc(78% - var(--rr-rise, 0) * 28%);
}
.rr-closing::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: color-mix(in srgb, var(--rr-hell) 24%, transparent);
}
.rr-closing h2 { font-size: clamp(2.6rem, 6vw, 5.4rem); max-width: 14ch; }
.rr-closing p { color: var(--rr-hell-sanft); max-width: 32rem; font-size: 1.15rem; padding-bottom: 1rem; }
.rr-closing .wp-block-buttons { justify-content: center; }

/* ---------- Fußbereich ---------- */

.rr-footer {
	display: grid;
	padding: clamp(4rem, 8vw, 6rem) var(--rr-inline) 2rem;
	background: var(--rr-moor-tief);
	color: var(--rr-hell-sanft);
	font-size: .95rem;
}
.rr-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: 3rem;
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.rr-footer-brand { display: grid; align-content: start; gap: .35rem; color: var(--rr-hell); }
.rr-footer .rr-wordmark { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 300; }
.rr-footer .rr-tagline { opacity: .6; }
.rr-footer-col { display: grid; align-content: start; gap: 1rem; }
.rr-footer-heading.wp-block-heading {
	font-family: var(--rr-body);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .04em;
	color: color-mix(in srgb, var(--rr-hell) 55%, transparent);
}
.rr-footer-nav { gap: .55rem; }
.rr-footer a { text-decoration: none; transition: color .3s ease; }
.rr-footer a:hover { color: var(--rr-hell); }
.rr-footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: 1rem 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(241, 236, 225, .12);
	font-size: .82rem;
	color: color-mix(in srgb, var(--rr-hell-sanft) 80%, transparent);
}
.rr-footer-bottom p:last-child { max-width: 38rem; text-align: right; }

/* ---------- Seiten und Beiträge ---------- */

/* Leichter Sonnenschein oben rechts auf allen Unterseiten */
:is(.rr-page, .rr-single, .rr-archive)::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 auto;
	height: min(54rem, 95vh);
	background: radial-gradient(52% 62% at 92% 0%, color-mix(in srgb, var(--rr-aprikose) 70%, transparent), transparent 75%);
	pointer-events: none;
}

.rr-page, .rr-single {
	position: relative;
	isolation: isolate;
	padding-block: calc(var(--rr-header-h) + clamp(3rem, 8vw, 6rem)) var(--rr-section);
}
.rr-page-title { font-size: clamp(3rem, 7vw, 6.25rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.rr-lead { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.55; color: var(--rr-moor); }
.rr-note {
	background: color-mix(in srgb, var(--rr-leinen) 70%, transparent);
	border: 1px dashed color-mix(in srgb, var(--rr-moor) 22%, transparent);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	font-size: .95rem;
	color: var(--rr-text-sanft);
}
.rr-page-content > h2, .rr-single-content > h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 300; margin-top: 3rem; }
.rr-page-content > h3, .rr-single-content > h3 { font-size: 1.5rem; font-weight: 400; margin-top: 2.25rem; }
.rr-page-content li::marker, .rr-single-content li::marker { color: var(--rr-safran); }

.rr-single-head { display: grid; gap: 1.25rem; justify-items: start; }
.rr-single-head .wp-block-post-title { font-size: clamp(2.6rem, 5.6vw, 4.75rem); }
.rr-single-date { color: var(--rr-text-sanft); font-size: .95rem; }
.rr-single-img { margin-block: clamp(2.5rem, 5vw, 4rem) !important; overflow: hidden; border-radius: 3px; }
.rr-single-img img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.rr-single-content { font-size: 1.15rem; }
.rr-sources { font-size: .95rem; color: var(--rr-text-sanft); border-top: 1px solid var(--rr-linie); padding-top: 1.5rem; }
.rr-back-link { margin-top: 3.5rem !important; }

/* ---------- Seite nicht gefunden ---------- */

.rr-growing { display: grid; grid-template-rows: auto auto; min-height: 100svh; }
.rr-growing-sky {
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: grid;
	justify-items: center;
	align-content: center;
	padding: calc(var(--rr-header-h) + 4rem) var(--rr-gutter) clamp(9rem, 16vw, 13rem);
	text-align: center;
	background: linear-gradient(180deg, var(--rr-papier), #F6E2C2);
}
.rr-growing-sky h1 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); max-width: 14ch; }
.rr-growing-sky::after {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: 0;
	width: clamp(12rem, 22vw, 18rem);
	aspect-ratio: 1;
	translate: -50% 50%;
	border-radius: 50%;
	background: var(--rr-sonne);
	box-shadow: 0 0 6rem 1rem rgba(243, 182, 96, .35);
	animation: rr-sunrise 3s var(--rr-ease) both;
}
.rr-growing-earth {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 2rem;
	padding: 3rem var(--rr-gutter) 6rem;
	text-align: center;
	background: var(--rr-moor);
	color: var(--rr-hell);
}
.rr-growing-earth p { color: var(--rr-hell-sanft); max-width: 30rem; }

/* ---------- Seitenwechsel ---------- */

@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root),
	::view-transition-new(root) { animation-duration: .5s; animation-timing-function: var(--rr-ease); }
	.rr-site-header { view-transition-name: rr-header; }
}

/* ==========================================================
   Tablet & Smartphone
   ========================================================== */

@media (max-width: 1080px) {
	.rr-section-head, .rr-section-head--link { grid-template-columns: minmax(0, 1fr); }
	.rr-offer--books { grid-template-columns: minmax(0, 1fr); }
	.rr-latest .wp-block-post-template, .rr-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rr-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.rr-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
	:root { --rr-header-h: 4.75rem; }

	.rr-hero { --rr-sun: min(78vw, 24rem); }
	.rr-hero-sky { align-content: start; padding-bottom: calc(var(--rr-sun) * .62); }
	.rr-hero-title.wp-block-heading { font-size: clamp(2.7rem, 12.5vw, 4.4rem); max-width: 13ch; }
	.rr-hero-sky::after { right: auto; left: 50%; margin-left: calc(var(--rr-sun) / -2); }
	.rr-hero-earth { background: radial-gradient(70% 70% at 50% 0%, rgba(232, 168, 86, .24), transparent 75%), var(--rr-leinen); }
	.rr-hero-earth::after { right: 0; width: 100%; margin-right: 0; opacity: .45; }

	.rr-pillars { --rr-orb: min(56vw, 17rem); grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--rr-orb) + 3rem); min-height: 0; }
	.rr-pillars::before, .rr-pillars::after { top: calc(var(--rr-orb) / 2); left: 50%; }
	.rr-pillar { grid-column: 1; }

	.rr-offer-row { grid-template-columns: minmax(0, 1fr); }
	.rr-offer-row > :nth-child(2) { padding-top: 0; }

	.rr-about { grid-template-columns: minmax(0, 1fr); }
	.rr-arch { max-width: 24rem; margin-inline: 1rem; }

	.rr-footer-bottom { flex-direction: column; }
	.rr-footer-bottom p:last-child { text-align: left; }
}

@media (max-width: 600px) {
	.rr-latest .wp-block-post-template, .rr-post-grid { grid-template-columns: minmax(0, 1fr); }
	.rr-post-img img { aspect-ratio: 4 / 3; }
	.rr-tagline { display: none; }
	.rr-cover { width: 96px; padding: .8rem .65rem; }
	.rr-cover--compass { width: 132px; margin-inline: -1.1rem; }
	.rr-cover-title { font-size: 1rem; }
	.rr-cover-sub, .rr-cover-kicker { display: none; }
	.rr-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-delay: 0s !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
}