/* =========================================================================
   Editorial Block-Patterns — kleine, eigenständige CSS für Inhalte
   die Markus per Block-Editor zusammenbaut. Wird auf JEDER Seite geladen
   und enthält nur das, was die Patterns brauchen — keine Hero/Loader/Pin.

   Tokens kommen aus den Parent-Theme bzw. werden hier als Fallback gesetzt
   (für Seiten ohne Editorial-Wrapper).
   ========================================================================= */

:root {
	--rp-ink:        var(--ink, #0F2418);
	--rp-ink-soft:   var(--ink-soft, #1f3329);
	--rp-paper:      var(--paper, #F5F1E7);
	--rp-paper-warm: var(--paper-warm, #ECE5D2);
	--rp-leaf:       var(--leaf, #1A6B3C);
	--rp-amber:      var(--amber, #A04500);
	--rp-muted:      var(--muted, #5E6862);
	--rp-display:    var(--font-display, "Fraunces", "Iowan Old Style", Georgia, serif);
	--rp-body:       var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	--rp-gutter:     clamp(1.25rem, 4vw, 4rem);
}

/* =========================================================================
   Typografie-Klassen (Selektoren-Fallback falls front-page.css nicht aktiv)
   ========================================================================= */
.is-style-ritter-eyebrow,
p.ritter-eyebrow {
	font-family: var(--rp-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--rp-muted);
	margin: 0 0 1.25rem;
	display: inline-block;
}
h1.ritter-headline,
h2.ritter-headline,
h3.ritter-headline {
	font-family: var(--rp-display);
	font-weight: 300;
	font-style: normal;
	font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--rp-ink);
	margin: 0 0 1.5rem;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}
.ritter-headline em {
	font-style: italic;
	color: var(--rp-leaf);
	font-variation-settings: "opsz" 144, "SOFT" 80;
}
p.ritter-lede {
	font-family: var(--rp-body);
	font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
	line-height: 1.55;
	color: var(--rp-ink-soft);
	max-width: 56ch;
	margin: 0 0 1.5rem;
}

/* =========================================================================
   Pattern-Container & Layout-Klassen
   ========================================================================= */
.is-style-ritter-section {
	padding-block: clamp(3rem, 8vw, 7rem);
	padding-inline: var(--rp-gutter);
	max-width: 1600px;
	margin-inline: auto;
}
.is-style-ritter-section--paper-warm {
	background: var(--rp-paper-warm);
}
.is-style-ritter-section--ink {
	background: var(--rp-ink);
	color: var(--rp-paper);
}
.is-style-ritter-section--ink .ritter-headline { color: var(--rp-paper); }
.is-style-ritter-section--ink .ritter-headline em { color: var(--rp-amber); }
.is-style-ritter-section--ink .ritter-eyebrow { color: color-mix(in srgb, var(--rp-paper) 70%, transparent); }
.is-style-ritter-section--ink .ritter-lede { color: color-mix(in srgb, var(--rp-paper) 88%, transparent); }

/* Editorial Quote (Pull Quote) */
.is-style-ritter-pullquote {
	font-family: var(--rp-display);
	font-style: italic;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
	line-height: 1.4;
	color: var(--rp-ink);
	border: none;
	padding-block: clamp(1.5rem, 3vw, 3rem);
	padding-inline: 0;
	max-width: 48ch;
	margin-inline: auto;
	position: relative;
}
.is-style-ritter-pullquote::before {
	content: "„";
	position: absolute;
	left: -.55em;
	top: -.15em;
	font-size: 2.2em;
	color: color-mix(in srgb, var(--rp-leaf) 30%, transparent);
	line-height: 1;
	font-style: normal;
}
.is-style-ritter-pullquote cite {
	display: block;
	font-style: normal;
	font-family: var(--rp-body);
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rp-muted);
	margin-top: 1.5rem;
}

/* Editorial Timeline Item */
.is-style-ritter-timeline-item {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding-block: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--rp-ink) 12%, transparent);
}
.is-style-ritter-timeline-item .ritter-timeline-item__year {
	font-family: var(--rp-display);
	font-size: clamp(1.5rem, 1.2rem + .6vw, 2.2rem);
	font-weight: 300;
	color: var(--rp-leaf);
	letter-spacing: -.02em;
}
.is-style-ritter-timeline-item h3,
.is-style-ritter-timeline-item h4 {
	font-family: var(--rp-display);
	font-size: clamp(1.15rem, 1rem + .4vw, 1.5rem);
	font-weight: 400;
	color: var(--rp-ink);
	margin: 0 0 .5rem;
}
.is-style-ritter-timeline-item p {
	font-family: var(--rp-body);
	color: var(--rp-ink-soft);
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 600px) {
	.is-style-ritter-timeline-item { grid-template-columns: 1fr; gap: .5rem; }
}

/* Editorial Stat / Counter */
.is-style-ritter-stat {
	text-align: center;
	padding-block: clamp(2rem, 5vw, 4rem);
}
.is-style-ritter-stat .ritter-stat__number {
	font-family: var(--rp-display);
	font-size: clamp(4rem, 3rem + 6vw, 9rem);
	font-weight: 200;
	line-height: 1;
	color: var(--rp-leaf);
	letter-spacing: -.03em;
	display: block;
	margin-bottom: .5rem;
	font-variation-settings: "opsz" 144;
}
.is-style-ritter-stat .ritter-stat__label {
	font-family: var(--rp-body);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--rp-muted);
}

/* Editorial Full-Bleed Image */
.is-style-ritter-fullbleed figure,
figure.is-style-ritter-fullbleed {
	margin: 0;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
.is-style-ritter-fullbleed img {
	width: 100%;
	height: auto;
	display: block;
}
.is-style-ritter-fullbleed figcaption {
	font-family: var(--rp-display);
	font-style: italic;
	font-size: .9rem;
	color: var(--rp-muted);
	text-align: center;
	padding: 1rem var(--rp-gutter);
	max-width: 56ch;
	margin: 0 auto;
}

/* Editorial Two-Column Long-Read Text */
.is-style-ritter-twocols {
	column-count: 2;
	column-gap: clamp(2rem, 4vw, 4rem);
	column-rule: 1px solid color-mix(in srgb, var(--rp-ink) 10%, transparent);
	font-family: var(--rp-body);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--rp-ink-soft);
	max-width: 72ch;
	margin-inline: auto;
}
.is-style-ritter-twocols p { margin-block: 0 1em; break-inside: avoid; }
.is-style-ritter-twocols p:first-of-type::first-letter {
	font-family: var(--rp-display);
	font-size: 3.5em;
	float: left;
	line-height: .9;
	margin-right: .15em;
	margin-top: .05em;
	color: var(--rp-leaf);
	font-weight: 300;
}
@media (max-width: 720px) {
	.is-style-ritter-twocols { column-count: 1; }
}

/* Editorial CTA */
.is-style-ritter-cta {
	text-align: center;
	padding-block: clamp(3rem, 6vw, 5rem);
	padding-inline: var(--rp-gutter);
	border-top: 1px solid color-mix(in srgb, var(--rp-ink) 12%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--rp-ink) 12%, transparent);
	max-width: 1200px;
	margin-inline: auto;
}
.is-style-ritter-cta .wp-block-button__link {
	display: inline-block;
	background: var(--rp-ink);
	color: var(--rp-paper);
	font-family: var(--rp-body);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 1rem 2.5rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background .3s ease, transform .3s ease;
}
.is-style-ritter-cta .wp-block-button__link:hover {
	background: var(--rp-leaf);
	transform: translateY(-2px);
}

/* Editorial Mini-Bento (2x2 oder 2x1) */
.is-style-ritter-bento-mini {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2vw, 2rem);
	padding-inline: var(--rp-gutter);
	max-width: 1200px;
	margin-inline: auto;
	padding-block: clamp(2rem, 5vw, 4rem);
}
.is-style-ritter-bento-mini > * {
	background: var(--rp-paper-warm);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 4px;
	min-height: 180px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (max-width: 600px) {
	.is-style-ritter-bento-mini { grid-template-columns: 1fr; }
}

/* Editor preview: subtler styling im Editor zeigt die Klassen */
.editor-styles-wrapper .is-style-ritter-section { outline: 1px dashed rgba(0,0,0,.08); outline-offset: 4px; }