/* Roetgener Platt – was theme.json nicht abdeckt.
   Regel: Platt immer Serif (Vollkorn), Hochdeutsch immer Sans (Source Sans 3).
   Der Doppelpunkt im Platt (.dp) ist Heide. */

/* Dunkles Thema: Farb-Presets aus theme.json umdefinieren */
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--kalk: #182124;
		--wp--preset--color--flaeche: #1E292C;
		--wp--preset--color--schiefer: #E6E9E4;
		--wp--preset--color--nebel: #A2ACAF;
		--wp--preset--color--linie: #2F3C40;
		--wp--preset--color--hecke: #93C29F;
		--wp--preset--color--hecke-hell: #22332A;
		--wp--preset--color--heide: #D9A0CC;
		--wp--preset--color--fussgrund: #0F1517;
		color-scheme: dark;
	}
}

:root { --rp-mark: color-mix(in srgb, var(--wp--preset--color--heide) 18%, transparent); }

html { scroll-padding-top: 7rem; }
body { -webkit-text-size-adjust: 100%; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--wp--preset--color--heide); outline-offset: 3px; }
mark { background: var(--rp-mark); color: inherit; border-radius: 2px; }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

.platt { font-family: var(--wp--preset--font-family--serif); }
.dp { color: var(--wp--preset--color--heide); font-weight: 700; padding-inline: .03em; }

.skip-link.screen-reader-text:focus { background: var(--wp--preset--color--hecke); color: var(--wp--preset--color--kalk); }

/* Kopf */
.rp-kopf { border-bottom: 1px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--kalk); position: relative; z-index: 20; }
.rp-kopf .wp-block-navigation-item__content { min-height: 44px; display: flex; align-items: center; padding-inline: .75rem; border-radius: 6px; }
.rp-kopf .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--hecke-hell); }
.rp-kopf .current-menu-item > .wp-block-navigation-item__content,
.rp-kopf .wp-block-navigation [aria-current="page"] { color: var(--wp--preset--color--hecke); box-shadow: inset 0 -3px 0 var(--wp--preset--color--hecke); border-radius: 0; }
/* Der ganze Kopf bleibt oben. kopf.js setzt --rp-kopf-hoehe (für die Suchleiste des Wörterbuchs)
   und schaltet auf den Burger um: auf schmalen Bildschirmen immer, am Desktop nach dem Scrollen. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 40; }
.rp-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--wp--preset--color--linie); border-radius: 6px; background: transparent; color: var(--wp--preset--color--schiefer); cursor: pointer; }
.rp-burger:hover { background: var(--wp--preset--color--hecke-hell); }
.rp-burger svg { width: 1.375rem; height: 1.375rem; }
.rp-burger .rp-burger-auf, .rp-kopf.menue-offen .rp-burger .rp-burger-zu { display: none; }
.rp-kopf.menue-offen .rp-burger .rp-burger-auf { display: inline; }
.rp-kopf.ist-kompakt .rp-burger { display: inline-flex; }
.rp-kopf.ist-kompakt .rp-hauptnav { display: none; }
.rp-kopf.ist-kompakt.menue-offen .rp-hauptnav {
	display: block; position: fixed; left: 0; right: 0; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--rp-kopf-hoehe, 4rem));
	z-index: 2; margin: 0 !important; max-width: none !important; width: auto;
	background: var(--wp--preset--color--flaeche); border-bottom: 2px solid var(--wp--preset--color--hecke);
	box-shadow: 0 16px 32px -12px rgb(0 0 0 / .5); padding: .5rem var(--wp--style--root--padding-right) 1rem var(--wp--style--root--padding-left);
}
.rp-kopf.ist-kompakt.menue-offen .rp-hauptnav .wp-block-navigation__container { flex-direction: column; align-items: stretch; gap: 0; max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.rp-kopf.ist-kompakt.menue-offen .rp-hauptnav .wp-block-navigation-item { width: 100%; }
.rp-kopf.ist-kompakt.menue-offen .rp-hauptnav .wp-block-navigation-item__content { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 1.125rem; border-bottom: 1px solid var(--wp--preset--color--linie); border-radius: 0; }

/* Fuß */
.rp-fuss-bild { margin: 0; position: relative; }
.rp-fuss-bild img { display: block; width: 100%; height: clamp(9rem, 20vw, 17rem); object-fit: cover; object-position: 50% 40%; }
.rp-fuss-bild::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, transparent, var(--wp--preset--color--fussgrund)); }
.rp-fuss { background: var(--wp--preset--color--fussgrund); color: #F3F4F1; }
/* Bild und Fußleiste ohne Lücke: den Block-Abstand des Layouts hier aufheben */
.wp-block-group.rp-fuss, .rp-fuss-bild { margin-block: 0; }
.rp-fuss a { color: #F3F4F1; }
.rp-fuss .wp-block-site-title a { color: #F3F4F1; }
/* Doppelpunkt im Schriftzug: im dunklen Fuß die helle Heide, damit er sich abhebt */
.rp-marke-dp { padding-inline: .04em; }
.rp-fuss .rp-marke-dp { color: #D9A0CC; }

/* Geschichten: in Erzählungen sind <strong> die Platt-Sätze, in Gedichten nur Hervorhebungen */
.rp-art-erzaehlung .wp-block-post-content strong { font-family: var(--wp--preset--font-family--serif); font-size: 1.08em; font-weight: 500; color: var(--wp--preset--color--heide); }
.rp-art-gedicht .wp-block-post-content { font-family: var(--wp--preset--font-family--serif); font-size: calc(1.1875rem * var(--rp-zoom, 1)); line-height: 1.7; }
.rp-art-gedicht .wp-block-post-content strong { font-weight: 600; }
/* Erzählung ganz in Platt: Serif wie ein Gedicht, Hervorhebungen nur halbfett, normale Absätze */
.rp-art-platt-erzaehlung .wp-block-post-content { font-family: var(--wp--preset--font-family--serif); font-size: calc(1.1875rem * var(--rp-zoom, 1)); line-height: 1.75; }
.rp-art-platt-erzaehlung .wp-block-post-content strong { font-weight: 600; }
.rp-art-gedicht .wp-block-post-content p { margin-block-end: 1.6em; }
.wp-block-post-content { line-height: 1.75; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Startseite: Panorama, darüber im Himmel das Wort des Tages, darunter die Suchtafel über der Wiese */
.rp-held { position: relative; }
.rp-held-bild { margin: 0; position: relative; }
.rp-held-bild img { display: block; width: 100%; height: clamp(15rem, 42vw, 36rem); object-fit: cover; object-position: 50% 62%; }
.rp-held-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--kalk) 82%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--kalk) 55%, transparent) 30%, transparent 58%); }
.rp-held > .rp-wdt { position: absolute; inset: 0 0 auto 0; z-index: 1; padding-top: clamp(1.25rem, 3.5vw, 3rem); margin: 0 auto; max-width: var(--wp--style--global--wide-size); padding-inline: var(--wp--style--root--padding-left); box-sizing: border-box; }
.rp-held .rp-knopf { background: color-mix(in srgb, var(--wp--preset--color--kalk) 70%, transparent); }
.rp-tafel { position: relative; z-index: 2; margin-top: clamp(-6rem, -7vw, -3rem) !important; }
.rp-tafel > .wp-block-group { background: var(--wp--preset--color--flaeche); border: 1px solid var(--wp--preset--color--linie); border-radius: 10px; padding: clamp(1.25rem, 3vw, 2.25rem); max-width: 46rem; box-shadow: 0 1px 0 var(--wp--preset--color--linie), 0 18px 40px -28px rgb(30 42 46 / .45); }
@media (max-width: 40rem) {
	.rp-held-bild img { height: 13rem; object-position: 50% 70%; }
	.rp-held-bild::after { display: none; }
	.rp-held > .rp-wdt { position: static; padding-top: 1.5rem; }
	.rp-tafel { margin-top: 1.5rem !important; }
}

/* Knopf "Nach oben" (nach-oben.js blendet ihn ab einer Bildschirmhöhe ein) */
.rp-nach-oben {
	position: fixed; z-index: 30;
	right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1rem, env(safe-area-inset-bottom, 0px));
	display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 1rem;
	border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--hecke); color: var(--wp--preset--color--kalk);
	font: 600 1rem var(--wp--preset--font-family--sans);
	box-shadow: 0 6px 18px -8px rgb(0 0 0 / .45);
	opacity: 0; visibility: hidden; translate: 0 .5rem;
	transition: opacity .2s, translate .2s, visibility 0s .2s;
}
.rp-nach-oben.ist-sichtbar { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .2s, translate .2s; }
.rp-nach-oben:hover { background: var(--wp--preset--color--schiefer); }
.rp-nach-oben svg { width: 1.25rem; height: 1.25rem; flex: none; }
.wp-site-blocks:focus { outline: none; }
@media (max-width: 40rem) {
	.rp-nach-oben { padding: 0; width: 48px; justify-content: center; }
	.rp-nach-oben span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Offenes Menü: Seite dahinter abdunkeln, damit das Menü klar davor steht; aktuelle Seite markieren */
.rp-kopf.ist-kompakt.menue-offen::after { content: ""; position: fixed; inset: calc(var(--wp-admin--admin-bar--height, 0px) + var(--rp-kopf-hoehe, 4rem)) 0 0 0; z-index: 1; background: rgb(0 0 0 / .55); }
.rp-kopf.ist-kompakt.menue-offen .rp-hauptnav .wp-block-navigation-item__content { color: var(--wp--preset--color--schiefer); }
.rp-kopf.ist-kompakt.menue-offen .rp-hauptnav [aria-current="page"] { color: var(--wp--preset--color--hecke); box-shadow: inset 4px 0 0 var(--wp--preset--color--hecke); padding-left: 1rem; }