/*
Theme Name: Seasons of Returning
Theme URI: https://seasons-of-returning.com
Author: Chantal-Virginie Stab
Author URI: https://seasons-of-returning.com
Description: Block-Theme für die Dachmarke Seasons of Returning. Dunkle Palette Nachtmoos mit Gold als Akzent, Playfair Display, Raleway und Luxurious Script selbst gehostet (DSGVO), Farbcodierung für alle sieben Seasons, fertige Block-Patterns für Startseite, Season-Seiten und Verkaufsseiten. Formulare, Phasen-Test und Buchungsanfragen liegen bewusst im separaten Plugin "Seasons of Returning Toolkit".
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.3.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seasons-of-returning
Tags: blog, one-column, two-columns, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* ==========================================================================
   Seasons of Returning
   Fast alles Gestalterische steckt in theme.json. Hier steht nur, was
   theme.json nicht kann: Kornstruktur, Goldverlauf auf Text, die
   Bildbehandlung, das Seasons-Raster und die Feinheiten fürs Handy.
   ========================================================================== */

:root {
	--sor-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
	--sor-gold-grad: var(--wp--preset--gradient--edelgold, linear-gradient(118deg, #A97F37 0%, #B08F42 14%, #E8D3A0 38%, #F4E6BE 47%, #D4B36A 56%, #A78039 76%, #C9A45C 100%));
}

/* --- Kornstruktur über der ganzen Seite. Der Effekt, der aus digitalen
       Bildern eine Marke macht. Abschaltbar im Customizer-Ersatz unten. --- */
body.sor-korn::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background-image: var(--sor-korn);
	opacity: var(--wp--custom--korn-deckkraft, 0.13);
	mix-blend-mode: overlay;
}

/* --- Grundlagen --- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, video, iframe, svg { max-width: 100%; height: auto; }
:where(p, li) { text-wrap: pretty; }
:where(h1, h2, h3, h4) { text-wrap: balance; }

/* Sichtbarer Fokus. Auf dunklem Grund unverzichtbar. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Skip-Link */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--tiefe);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.86rem;
	font-weight: 600;
	padding: 0.7rem 1.2rem;
	left: 1rem;
	top: 1rem;
	z-index: 100000;
	text-decoration: none;
}

/* Lesebreite. Die Regel aus dem Styleguide lautet "unter 70 Zeichen".
   Wichtig: 66ch sind NICHT 66 Zeichen. Die Einheit ch misst die Breite der
   Null, und die ist bei Raleway breiter als der Durchschnittsbuchstabe.
   66ch ergaben gemessene 69 bis 80 Zeichen pro Zeile. 36em ergeben
   gemessene 65 und skalieren mit der Schriftgröße mit. */
.is-style-sor-lesebreite :where(p, ul, ol, blockquote, .wp-block-quote) { max-width: var(--wp--custom--lesebreite, 36em); }
/* Der Fließtext eines Beitrags soll die Regel auch ohne Blockstil einhalten. */
.wp-block-post-content > :where(p, ul, ol, blockquote) { max-width: var(--wp--custom--lesebreite, 36em); }

/* ==========================================================================
   BLOCK-STYLE: Kicker
   Der einzige Ort in der Marke, an dem Versalien erlaubt sind.
   ========================================================================== */
.is-style-sor-kicker {
	font-family: var(--wp--preset--font-family--raleway) !important;
	font-size: var(--wp--preset--font-size--kicker) !important;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	line-height: 1.5;
	margin-bottom: 1.1rem;
}

/* ==========================================================================
   TYPOGRAFIE-FEINHEITEN
   Playfair Display ist eine Display-Serif mit hohem Strichkontrast. Sie will
   groß gesetzt werden, eng laufen und braucht auf dunklem Grund ein
   Gewicht mehr, weil helle Schrift auf dunkel optisch dünner wirkt.
   ========================================================================== */

/* Ab dieser Größe darf Playfair leichter werden, sonst wirkt es klobig. */
h1, .wp-block-post-title {
	font-variation-settings: "wght" 500;
	font-synthesis: none;
}
h2 { font-variation-settings: "wght" 500; }
h3 { font-variation-settings: "wght" 600; letter-spacing: -0.01em; }

/* Playfair unter etwa 22 Pixel verliert die Haarstriche. Kleine
   Überschriften übernimmt deshalb Raleway, siehe theme.json bei h4. */

/* Raleway läuft von Natur aus etwas eng. Ein Hauch Laufweite im Fließtext
   macht auf dunklem Grund den Unterschied zwischen lesbar und anstrengend. */
:where(p, li, dd) { letter-spacing: 0.002em; }

/* Zahlen und Preise: Raleway hat Versalziffern, die im Fließtext springen.
   Für Preise ist das gewollt, im Text nicht. */
.wp-block-table td, .wp-block-table th { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   LUXURIOUS SCRIPT
   Eine Schreibschrift ist ein Akzent, kein Textwerkzeug. Deshalb hier
   Leitplanken, die verhindern, dass sie an der falschen Stelle landet.
   ========================================================================== */
.is-style-sor-script,
.wp-block-pullquote blockquote p,
.wp-block-pullquote p {
	font-family: var(--wp--preset--font-family--script) !important;
	font-weight: 400 !important;
	font-style: normal !important;
	/* Versalien zerstören jede Schreibschrift, die Buchstaben verbinden nicht mehr. */
	text-transform: none !important;
	/* Verbundene Schrift verträgt keine zusätzliche Laufweite. */
	letter-spacing: 0 !important;
	/* Die Oberlängen sind hoch, deshalb mehr Zeilenabstand. */
	line-height: 1.3;
}

.is-style-sor-script {
	font-size: var(--wp--preset--font-size--script);
	color: var(--wp--preset--color--gold);
	display: block;
}

/* Warum die Schreibschrift so viel größer gesetzt wird als alles andere:
   Ihre x-Höhe beträgt nur 0,33 em, bei Playfair sind es 0,51 em. Bei
   gleicher Punktgröße wirkt sie also etwa ein Drittel kleiner. Der Faktor
   liegt bei rund 1,5. Deshalb 4rem, wo eine Überschrift 2,35rem hätte.
   Unter 2,4rem ist sie auf dunklem Grund kaum entzifferbar, das ist die
   Untergrenze, falls doch jemand eine kleine Größe setzt. */
.is-style-sor-script,
.wp-block-pullquote blockquote p {
	font-size: max(2.4rem, var(--wp--preset--font-size--script));
}

.wp-block-pullquote {
	border: 0;
	padding: clamp(1.4rem, 4vw, 2.6rem) 0;
	text-align: left;
	color: var(--wp--preset--color--gold);
}
.wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.wp-block-pullquote cite {
	display: block;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--asche);
	margin-top: 1.1rem;
}
/* Zentriert wirkt die Schreibschrift ruhiger, wenn sie allein steht. */
.wp-block-pullquote.has-text-align-center { text-align: center; }

/* ==========================================================================
   BLOCK-STYLE: Edelgold auf Text
   Metallischer Verlauf. Nur für Überschriften und Preise, nie für Fließtext.
   ========================================================================== */
/* Beide Wege zum selben Gold: der Block-Stil faerbt eine ganze Ueberschrift,
   die Auszeichnung .sor-edelgold nur eine Markierung darin. Eine Regel fuer
   beide, damit sie nie auseinanderlaufen koennen. */
.is-style-sor-edelgold,
.sor-edelgold {
	background: var(--sor-gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	-webkit-text-fill-color: transparent;
}
/* Der Block-Stil faerbt einen ganzen Block, da darf der Kasten eigenstaendig
   sein. Die Auszeichnung sitzt dagegen mitten im Satz und muss mitfliessen:
   Mit inline-block reisst sie eine Zeile auf und schiebt den Text davor und
   danach auf eigene Zeilen. Gemessen an einem Beispielsatz waren das drei
   Zeilen statt zwei. */
.is-style-sor-edelgold { display: inline-block; }
.sor-edelgold { display: inline; }
@supports not (background-clip: text) {
	.is-style-sor-edelgold,
	.sor-edelgold { color: var(--wp--preset--color--gold) !important;
		-webkit-text-fill-color: currentColor; }
}

/* ==========================================================================
   QUELLEN UNTER DEM ARTIKEL
   Belege sichtbar, aber ruhig. Kleiner als der Fließtext und in Asche
   gesetzt, damit sie den Text nicht überstimmen, und trotzdem groß genug,
   dass man sie liest statt sie zu übersehen. Eingeklappt wären sie für
   Leserinnen weniger wert, denn ein Beleg wirkt nur, wenn man ihn sieht.

   Die Nummer kommt aus einem CSS-Zähler statt aus der Listenpunkt-Anzeige.
   Damit hängt der Text eingerückt unter sich selbst, so wie in einem
   Literaturverzeichnis, statt nach der ersten Zeile nach links zu springen.
   ========================================================================== */
.sor-quellen,
.is-style-sor-quellen {
	border-top: 1px solid var(--wp--preset--color--nebelkante);
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 2.2rem;
}
.sor-quellen :where(h2, h3),
.is-style-sor-quellen :where(h2, h3) {
	font-size: 1.15rem;
	margin-bottom: 1.1rem;
}
.sor-quellen :where(ol, ul),
.is-style-sor-quellen :where(ol, ul) {
	list-style: none;
	padding-left: 0;
	margin: 0;
	counter-reset: sor-quelle;
	max-width: var(--wp--custom--lesebreite, 36em);
}
.sor-quellen li,
.is-style-sor-quellen li {
	counter-increment: sor-quelle;
	position: relative;
	padding-left: 2.4rem;
	margin-bottom: 1rem;
	font-size: 0.92rem;
	line-height: 1.62;
	color: var(--wp--preset--color--leinen);
}
.sor-quellen li::before,
.is-style-sor-quellen li::before {
	content: counter(sor-quelle);
	position: absolute;
	left: 0;
	top: 0.15rem;
	min-width: 1.5rem;
	text-align: right;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--gold);
}
.sor-quellen a,
.is-style-sor-quellen a {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
.sor-quellen a:hover,
.is-style-sor-quellen a:hover { color: var(--wp--preset--color--champagner); }
/* Kleiner Pfeil an Links, die das Haus verlassen. Nur dekorativ, deshalb
   über ein Pseudoelement und nicht als Zeichen im Text. */
.sor-quellen a[href^="http"]::after,
.is-style-sor-quellen a[href^="http"]::after {
	content: "\2197";
	display: inline-block;
	margin-left: 0.22em;
	font-size: 0.82em;
	text-decoration: none;
	vertical-align: baseline;
}
@media print {
	.sor-quellen a[href^="http"]::after,
	.is-style-sor-quellen a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ==========================================================================
   BLOCK-STYLE: Goldene Haarlinie (core/separator)
   ========================================================================== */
.wp-block-separator.is-style-sor-goldlinie {
	border: 0;
	height: 1px;
	background: var(--sor-gold-grad);
	opacity: 0.55;
	max-width: 100%;
	width: 100%;
}

/* ==========================================================================
   BLOCK-STYLE: Ergebnis-Kasten (core/paragraph, core/group)
   "Am Ende hast du ___". Die Produktregel, sichtbar gemacht.
   ========================================================================== */
.is-style-sor-ergebnis {
	border-left: 2px solid var(--wp--preset--color--gold);
	padding-left: 1.15rem;
	color: var(--wp--preset--color--knochenweiss);
	font-size: 1.1rem;
	line-height: 1.6;
}

/* ==========================================================================
   BLOCK-STYLE: Karte (core/group, core/column)
   ========================================================================== */
.is-style-sor-karte {
	background-color: var(--wp--preset--color--waldschatten);
	border: 1px solid var(--wp--preset--color--moosgrau);
	border-radius: 3px;
	padding: 1.5rem;
}
.is-style-sor-karte-hoch {
	background-color: var(--wp--preset--color--moosgrau);
	border: 1px solid var(--wp--preset--color--nebelkante);
	border-radius: 4px;
	padding: clamp(1.6rem, 4vw, 2.6rem);
}

/* ==========================================================================
   BLOCK-STYLE: Goldrahmen (core/group)
   Haarlinie in Edelgold. Nur um Premium-Produkte, nie um Freebies.
   ========================================================================== */
.is-style-sor-goldrahmen {
	position: relative;
	background-color: var(--wp--preset--color--waldschatten);
	border-radius: 4px;
	padding: clamp(1.7rem, 4vw, 2.8rem);
}
.is-style-sor-goldrahmen::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 4px;
	padding: 1px;
	background: var(--sor-gold-grad);
	opacity: 0.5;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* ==========================================================================
   BLOCK-STYLE: Markenbehandlung für Bilder
   Das Rezept aus dem Bildsprache-Labor, als ein Klick im Editor.
   Entsättigen, Gold rein, abdunkeln, Korn drauf.
   ========================================================================== */
.is-style-sor-behandelt { position: relative; overflow: hidden; }
.is-style-sor-behandelt :where(img, video) {
	filter: grayscale(0.72) sepia(0.28) saturate(1.25) contrast(1.14) brightness(0.72);
}
.is-style-sor-behandelt::before,
.is-style-sor-behandelt::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
/* Goldschleier plus Vignette */
.is-style-sor-behandelt::before {
	background:
		linear-gradient(148deg, rgba(212, 179, 106, 0.3), rgba(16, 26, 22, 0) 58%, rgba(8, 13, 11, 0.5)),
		radial-gradient(120% 110% at 50% 40%, transparent 34%, rgba(8, 13, 11, 0.68) 100%);
	mix-blend-mode: normal;
}
/* Korn */
.is-style-sor-behandelt::after {
	background-image: var(--sor-korn);
	opacity: 0.2;
	mix-blend-mode: overlay;
}
/* Bildunterschrift darf nicht mitbehandelt werden */
.is-style-sor-behandelt figcaption { position: relative; z-index: 3; }

/* Cover-Blöcke: gleiche Behandlung, aber der Text muss lesbar bleiben */
.wp-block-cover.is-style-sor-behandelt .wp-block-cover__image-background {
	filter: grayscale(0.72) sepia(0.28) saturate(1.25) contrast(1.14) brightness(0.68);
}
.wp-block-cover.is-style-sor-behandelt > :where(.wp-block-cover__inner-container) { position: relative; z-index: 4; }

/* ==========================================================================
   BUTTONS
   Core bringt den Stil "Umriss" mit, aber mit falschen Farben auf dunkel.
   ========================================================================== */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--nebelkante);
	color: var(--wp--preset--color--knochenweiss);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	background: transparent;
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* Der Hero ist eine core/group mit Hintergrundbild. Das ist im Editor
   deutlich robuster als ein Cover-Block und du setzt das Bild ganz normal
   rechts unter "Hintergrund".
   Wichtig: Ein Hintergrundbild lässt sich per CSS nicht filtern. Schick das
   Hero-Bild deshalb vorher durch das Rezept aus dem Bildsprache-Labor
   (entsättigen, Gold rein, abdunkeln). Scrim und Korn legt das Theme drauf. */
.sor-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Seitenrand ausdruecklich hier, nicht ueber has-global-padding: Diese
	   Klasse vergibt WordPress nur unter bestimmten Bedingungen, und ohne sie
	   klebte die Ueberschrift am linken Bildrand. */
	padding-left: var(--wp--custom--seite-rand);
	padding-right: var(--wp--custom--seite-rand);
	min-height: min(94vh, 780px);
	display: flex;
	align-items: center;
	background-color: var(--wp--preset--color--tiefe);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* Scrim: sorgt dafür, dass Text über jedem Bild lesbar bleibt. */
.sor-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(54% 64% at 78% 24%, rgba(255, 244, 214, 0.2), rgba(255, 244, 214, 0) 66%),
		linear-gradient(to top, var(--wp--preset--color--nachtmoos) 3%, rgba(16, 26, 22, 0.58) 34%, rgba(8, 13, 11, 0.16) 100%),
		linear-gradient(rgba(8, 13, 11, 0.1), rgba(8, 13, 11, 0.1));
}
/* Korn direkt auf dem Hero, damit der Look auch ohne globale Kornschicht sitzt. */
.sor-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--sor-korn);
	opacity: 0.16;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.sor-hero > * { position: relative; z-index: 1; }
/* Der Textkasten im Kopfbild ist so breit wie eine Textspalte und wird damit
   genauso zentriert wie jeder Abschnitt darunter. Erst die Elemente DARIN
   werden auf Lesebreite begrenzt. Ohne diese Zweiteilung wuerde der Kasten
   selbst zentriert, und die Ueberschrift im Kopfbild staende sichtbar weiter
   rechts als jede Ueberschrift darunter. */
.sor-hero-text {
	width: 100%;
	max-width: var(--wp--custom--spalte, 1240px);
	/* Eine Zahl fuer beides: Textbreite und Breite der dunklen Flaeche. Solange
	   die Platte weiter unten aus derselben Variablen rechnet, koennen die
	   beiden Kanten nicht mehr auseinanderlaufen. */
	--sor-hero-breite: 600px;
	--sor-hero-luft: 5.5rem;
}
/* Feste Breite statt ch: Die Einheit ch rechnet gegen die Schriftgroesse
   des Elements selbst. Auf der Ueberschrift mit 3,5rem waeren 54ch rund
   1500 px, im Absatz darunter nur 500. Die beiden Kanten waeren nie
   deckungsgleich. 600 px entspricht dem, was im Mockup gemessen wurde. */
/* Bewusst zwei Klassen tief. Einzelne Bausteine bringen eigene Maximalbreiten
   mit, der Lead-Absatz zum Beispiel 38em. Die stehen weiter unten im
   Stylesheet, sind gleich stark und gewinnen dadurch. Gemessen war der Absatz
   im Kopfbild deshalb 790 statt 600 px breit und stand sichtbar ueber die
   dunkle Flaeche hinaus. Mit der zweiten Klasse gilt im Kopfbild wieder eine
   einzige Breite fuer alle. */
.sor-hero .sor-hero-text > * { max-width: var(--sor-hero-breite); margin-left: auto; margin-right: auto; }

/* Die Verdunkelung sitzt nur hinter dem Textkasten, nicht ueber dem ganzen
   Bild. Das ist der Unterschied, der die Zentrierung ueberhaupt erst moeglich
   macht: Gemessen bleibt das rechte Bilddrittel bei 42 von 43 Helligkeits-
   punkten, waehrend der schlechteste Goldkontrast von 2,09 auf 4,10 steigt.
   Ein Schleier ueber dem ganzen Bild haette fuer denselben Kontrast das Licht
   auf 32 gedrueckt, also genau das geloescht, wofuer die Bilder ausgesucht
   wurden.
   left/width statt inset, weil der Kasten .sor-hero-text die volle Spalte
   breit ist und die Platte nur den Text umgeben soll.

   Frueher war das eine Ellipse (radial-gradient). Eine Ellipse ist aber in der
   Mitte breit und oben wie unten schmal. Die Ueberschrift sass in der breiten
   Mitte, der Absatz darunter im schmaler werdenden Teil, und stand deshalb
   sichtbar ueber die dunkle Flaeche hinaus. Jetzt ist die Platte ueber die
   ganze Texthoehe gleich breit: Der Verlauf verdunkelt nur noch nach oben und
   unten, die weichen Seitenkanten macht eine Maske. Damit haben Text und
   dunkle Flaeche auf jeder Zeile dieselbe Breite. */
.sor-hero-text { position: relative; z-index: 0; }
.sor-hero-text::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	top: -3.4rem;
	bottom: -3.4rem;
	left: 50%;
	width: calc(var(--sor-hero-breite) + var(--sor-hero-luft) * 2);
	max-width: calc(100% + 4.4rem);
	transform: translateX(-50%);
	background: linear-gradient(
		to bottom,
		rgba(8, 13, 11, 0) 0,
		rgba(8, 13, 11, 0.9) 2.4rem,
		rgba(8, 13, 11, 0.9) calc(100% - 2.4rem),
		rgba(8, 13, 11, 0) 100%);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 3rem,
		#000 calc(100% - 3rem),
		transparent 100%);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 3rem,
		#000 calc(100% - 3rem),
		transparent 100%);
}
/* Die Knopfreihe hatte hier frueher keine Begrenzung. Ein Flex-Kasten ohne
   Begrenzung wird so breit wie die ganze Spalte, und weil Knoepfe darin links
   anfangen, stand der Knopf gemessen 320 px weiter links als die Ueberschrift
   und damit ausserhalb der dunklen Flaeche. Jetzt gilt fuer ihn dieselbe
   Breite wie fuer den Text darueber. */
@media (max-width: 781px) {
	.sor-hero { min-height: auto; padding-top: 7.5rem; padding-bottom: 3.5rem; }
	.sor-hero-text > * { max-width: none; }
	.sor-hero-text::before { top: -2.4rem; bottom: -2.4rem; }
}

/* ==========================================================================
   KOPF- UND FUSSBEREICH
   ========================================================================== */
.sor-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	width: 100%;
}
/* Liegt der Kopfbereich ueber einem Bild, braucht die Menuezeile einen
   Schleier. Ohne ihn ist sie auf einem hellen Nebelbild schlicht nicht da:
   gemessen 1,11 zu 1 bei verlangten 4,5. Der Schleier faengt nur das oberste
   Band ab und laeuft nach unten vollstaendig aus, damit vom Bild nichts
   verloren geht. Im Mockup gab es diese Regel laengst, ins Theme war sie nie
   uebertragen worden. */
html {
	background-color: var(--wp--preset--color--tiefe);
}

body.sor-has-hero .sor-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 210px;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(8, 13, 11, 0.92) 0%,
		rgba(8, 13, 11, 0.78) 38%,
		rgba(8, 13, 11, 0.42) 68%,
		rgba(8, 13, 11, 0) 100%);
}
@media (max-width: 820px) {
	/* Schmaler Bildschirm heisst hoehere Menuezeile und mehr Bild darunter,
	   also muss der Schleier tiefer reichen. */
	body.sor-has-hero .sor-header::before {
		height: 260px;
		background: linear-gradient(to bottom,
			rgba(8, 13, 11, 0.96) 0%,
			rgba(8, 13, 11, 0.82) 42%,
			rgba(8, 13, 11, 0.44) 72%,
			rgba(8, 13, 11, 0) 100%);
	}
}

/* Auf Unterseiten ohne Hero braucht der Kopf einen eigenen Hintergrund */
body:not(.sor-has-hero) .sor-header {
	position: relative;
	background-color: var(--wp--preset--color--tiefe);
	border-bottom: 1px solid var(--wp--preset--color--moosgrau);
}
.sor-signet { display: block; flex: 0 0 auto; }
.sor-signet svg { display: block; width: 100%; height: auto; }

.sor-footer {
	border-top: 1px solid var(--wp--preset--color--moosgrau);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.84rem;
	color: var(--wp--preset--color--asche);
}
.sor-footer a { color: var(--wp--preset--color--asche); }
.sor-footer a:hover { color: var(--wp--preset--color--gold); }

/* Navigation: Untermenüs auf dunklem Grund */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--waldschatten);
	border: 1px solid var(--wp--preset--color--nebelkante);
	border-radius: 3px;
}
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--tiefe) !important;
	padding-top: 4.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--knochenweiss); font-size: 1.2rem; }

/* ==========================================================================
   SEASONS-LISTE (eigener Block sor/seasons + sor/season)
   ========================================================================== */
.sor-seasons { display: grid; gap: 0.7rem; }
.sor-season {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.1rem;
	align-items: baseline;
	padding: 1rem 1.2rem;
	background-color: var(--wp--preset--color--waldschatten);
	border-left: 3px solid var(--sor-season-farbe, var(--wp--preset--color--gold));
	border-radius: 2px;
	text-decoration: none;
}
a.sor-season:hover { background-color: var(--wp--preset--color--moosgrau); }
.sor-season.is-hier { background-color: var(--wp--preset--color--moosgrau); }
.sor-season__nr {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--asche);
	white-space: nowrap;
}
.sor-season__name {
	display: block;
	font-size: 1.12rem;
	line-height: 1.3;
	color: var(--sor-season-farbe, var(--wp--preset--color--gold));
}
.sor-season__ds { font-size: 0.98rem; color: var(--wp--preset--color--leinen); line-height: 1.6; }
.sor-season__tag {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-left: 0.6rem;
	white-space: nowrap;
}
@media (max-width: 600px) {
	.sor-season { grid-template-columns: 1fr; gap: 0.35rem; }
	.sor-season__tag { display: block; margin: 0.3rem 0 0; }
}

/* ==========================================================================
   ARTIKELRHYTHMUS
   WordPress setzt zwischen allen Blöcken denselben Abstand. Für einen
   langen Artikel ist das zu gleichmäßig: Eine Zwischenüberschrift braucht
   Luft davor und soll dicht an ihrem ersten Absatz stehen.
   ========================================================================== */
:where( .wp-block-post-content, .is-style-sor-lesebreite ) > :where( h2, h3 ) {
	margin-top: 2.6rem;
}
:where( .wp-block-post-content, .is-style-sor-lesebreite ) > :where( h2, h3 ) + * {
	margin-top: 0.7rem;
}
/* Der erste Block eines Artikels braucht oben keinen Abstand. */
:where( .wp-block-post-content ) > :first-child { margin-top: 0; }

/* Listen im Fließtext */
.wp-block-post-content :where( ul, ol ):not( .wp-block-navigation ) { padding-left: 1.3rem; }
.wp-block-post-content li { margin-bottom: 0.45rem; }
.wp-block-post-content li::marker { color: var(--wp--preset--color--gold); }

/* ==========================================================================
   AUFKLAPPBARE FRAGEN (core/details)
   Für die FAQ im Artikel. Ohne JavaScript bedienbar, für Suchmaschinen
   als Text lesbar.
   ========================================================================== */
.wp-block-details {
	background-color: var(--wp--preset--color--waldschatten);
	border: 1px solid var(--wp--preset--color--moosgrau);
	border-left: 3px solid var(--wp--preset--color--nebelkante);
	border-radius: 3px;
	padding: 1rem 1.2rem;
	margin-bottom: 0.6rem;
	transition: border-left-color 0.2s;
}
.wp-block-details[open] { border-left-color: var(--wp--preset--color--gold); }
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--wp--preset--color--knochenweiss);
	cursor: pointer;
	list-style: none;
	display: flex;
	gap: 0.7rem;
	align-items: baseline;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
/* Eigenes Plus- und Minuszeichen in Gold, statt des Browserpfeils. */
.wp-block-details summary::before {
	content: "+";
	flex: 0 0 auto;
	font-weight: 400;
	color: var(--wp--preset--color--gold);
	font-size: 1.2em;
	line-height: 1;
}
.wp-block-details[open] summary::before { content: "\2013"; }
.wp-block-details summary:hover { color: var(--wp--preset--color--gold); }
.wp-block-details > :not(summary) { margin-top: 0.9rem; }

/* ==========================================================================
   ARTIKEL, ARCHIV, KOMMENTARE
   ========================================================================== */
.sor-artikelbild img { border-radius: 3px; }
.sor-meta {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--asche);
}
.sor-teaser { background-color: var(--wp--preset--color--waldschatten); border: 1px solid var(--wp--preset--color--moosgrau); border-radius: 4px; overflow: hidden; }
.sor-teaser .wp-block-post-featured-image { margin: 0; }
.sor-teaser .wp-block-post-featured-image img { border-radius: 0; }

.wp-block-post-comments-form input:not([type="submit"]),
.wp-block-post-comments-form textarea,
.wp-block-search__input {
	background-color: var(--wp--preset--color--tiefe);
	border: 1px solid var(--wp--preset--color--nebelkante);
	color: var(--wp--preset--color--knochenweiss);
	border-radius: 2px;
	padding: 0.75rem 0.9rem;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.9rem;
	max-width: 100%;
}
.wp-block-post-comments-form input::placeholder,
.wp-block-post-comments-form textarea::placeholder { color: var(--wp--preset--color--asche); }

/* Tabellen lesbar auf dunkel */
.wp-block-table :where(th, td) { border-color: var(--wp--preset--color--moosgrau); padding: 0.7rem 0.8rem; }
.wp-block-table th {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--asche);
	font-weight: 600;
}
.wp-block-table figcaption { color: var(--wp--preset--color--asche); }

/* ==========================================================================
   LESEMODUS HELL
   Der Kompromiss aus dem Styleguide: die Marke bleibt dunkel, nur der
   Artikelfließtext darf auf Wunsch hell werden. Der Umschalter kommt aus
   dem Plugin oder aus dem Button-Pattern und setzt data-sor-lesemodus.
   ========================================================================== */
html[data-sor-lesemodus="hell"] {
	--wp--preset--color--nachtmoos: #F4F1EA;
	--wp--preset--color--tiefe: #EBE6DC;
	--wp--preset--color--waldschatten: #EFEBE2;
	--wp--preset--color--moosgrau: #E2DCD0;
	--wp--preset--color--nebelkante: #CFC7B8;
	--wp--preset--color--knochenweiss: #14201A;
	--wp--preset--color--leinen: #33403A;
	--wp--preset--color--asche: #6B6559;
	--wp--preset--color--gold: #7A5E1F;
	--wp--preset--color--champagner: #5C4614;
}
html[data-sor-lesemodus="hell"] body.sor-korn::after { display: none; }
html[data-sor-lesemodus="hell"] .is-style-sor-behandelt :where(img, video) { filter: none; }
html[data-sor-lesemodus="hell"] .is-style-sor-behandelt::before,
html[data-sor-lesemodus="hell"] .is-style-sor-behandelt::after { display: none; }

.sor-lesemodus-btn {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	background: transparent;
	border: 1px solid var(--wp--preset--color--nebelkante);
	color: var(--wp--preset--color--leinen);
	padding: 0.34rem 0.8rem;
	border-radius: 99px;
	cursor: pointer;
}
.sor-lesemodus-btn:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }

/* ==========================================================================
   RESPONSIVE FEINHEITEN
   ========================================================================== */
@media (max-width: 781px) {
	.sor-hero .sor-hero-text > * { max-width: none; }
	.wp-block-columns:not(.is-not-stacked-on-mobile) { gap: 1.6rem; }
	.is-style-sor-karte, .is-style-sor-karte-hoch { padding: 1.25rem; }
	.is-style-sor-goldrahmen { padding: 1.4rem; }
}
@media (max-width: 480px) {
	.is-style-sor-kicker { letter-spacing: 0.18em; }
}

/* Weniger Bewegung, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Druck: dunkel drucken wäre eine Tonerverschwendung */
@media print {
	body { background: #fff !important; color: #000 !important; }
	body.sor-korn::after, .sor-header, .sor-footer { display: none !important; }
	:where(h1, h2, h3, h4) { color: #000 !important; }
	.is-style-sor-behandelt :where(img, video) { filter: none !important; }
	.is-style-sor-behandelt::before, .is-style-sor-behandelt::after { display: none !important; }
}

/* Kopfbereich, sobald man am Hero vorbeigescrollt ist */
.sor-header.is-scrolled {
	position: fixed;
	top: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--tiefe) 92%, transparent);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--wp--preset--color--moosgrau);
	animation: sor-einblenden 0.25s ease both;
}
@supports not (backdrop-filter: blur(1px)) {
	.sor-header.is-scrolled { background-color: var(--wp--preset--color--tiefe); }
}
@keyframes sor-einblenden { from { transform: translateY(-100%); } to { transform: translateY(0); } }


/* ==========================================================================
   DIE EINE TEXTSPALTE
   --------------------------------------------------------------------------
   Der Kopfbereich, die Kopfbilder und die Zaesur-Baender laufen bis an den
   Bildschirmrand. Der Text darin sitzt in einer Spalte, und diese Spalte ist
   nicht mittig, sondern leicht nach links versetzt.

   Warum ueberhaupt ein Versatz: Auf einem breiten Monitor steht das Logo ganz
   links am Rand. Waere die Textspalte exakt mittig, gaebe es zwei konkurrierende
   Achsen. Der Versatz zieht den Text in Richtung Logo, ohne ihn an den Rand zu
   nageln.

   Warum max(): Ohne die Klammer wuerde die Rechnung auf schmalen Bildschirmen
   negativ, und die Spalte liefe links aus dem Bild heraus.

   Warum eine Containerabfrage und nicht @media: Gemessen werden soll die
   Breite des Inhaltsbereichs, nicht die des Fensters. Sonst verschiebt sich
   der Text auch dann, wenn daneben noch eine Seitenleiste steht.
   ========================================================================== */

/* Ein Abschnitt bringt seinen Seitenrand selbst mit, damit er in jeder
   Seitenvorlage gleich sitzt, auch in einer ohne eigenen Rand. */
.sor-abschnitt { padding-left: var(--wp--custom--seite-rand); padding-right: var(--wp--custom--seite-rand); }

/* Kein Versatz nach links mehr: Jeder Block steht mittig, der Text darin ist
   linksbuendig. Falls der Versatz doch wieder gewuenscht ist, reicht es, hier
   wieder ein groesseres Polster rechts zu setzen; die Variable dafuer steht
   weiterhin in der theme.json. */

.sor-header-in {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}


/* ==========================================================================
   BAUSTEINE AUS DEN SEITEN-MUSTERN
   Die Werte stammen eins zu eins aus dem Gesamt-Mockup, damit die fertige
   Seite genauso aussieht wie das, was dort abgenommen wurde.
   ========================================================================== */

/* Der Vorspann unter der Ueberschrift. */
.is-style-sor-lead {
	font-size: 1.3rem;
	line-height: 1.55;
	color: var(--wp--preset--color--knochenweiss);
	max-width: 38em;
}

/* Zitat mit goldener Kante. Nicht zu verwechseln mit der Schreibschrift,
   die nur fuer kurze frei stehende Zeilen gedacht ist. */
.is-style-sor-zitat {
	border-left: 2px solid var(--wp--preset--color--gold);
	padding-left: 1.3rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
	max-width: 36em;
	font-family: var(--wp--preset--font-family--playfair);
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.5;
	color: var(--wp--preset--color--knochenweiss);
}
.is-style-sor-zitat p { font-size: inherit; font-style: inherit; }
.is-style-sor-zitat::before { content: none; }

/* Kleine Hilfsklassen. */
.sor-hell { color: var(--wp--preset--color--knochenweiss); }
.sor-fein { font-size: 0.78rem; color: var(--wp--preset--color--asche); margin-top: 0.9rem; }
.sor-klein { font-size: 0.875rem; }
.sor-meta { font-size: 0.875rem; color: var(--wp--preset--color--asche); }
.sor-mitte { text-align: center; }

/* Einwilligung unter Formularen. */
.sor-consent {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin-top: 1rem;
	font-size: 0.82rem;
	max-width: none;
}
.sor-consent input { margin-top: 0.28em; accent-color: var(--wp--preset--color--gold); }

/* Listen tragen einen goldenen Bogen statt eines Punktes. Der Bogen ist
   dasselbe Zeichen wie im Signet, nur sehr klein. */
.sor-liste { list-style: none; padding-left: 0; }
.sor-liste li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.55rem;
}
.sor-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.8rem;
	height: 0.42rem;
	border: 1px solid var(--wp--preset--color--gold);
	border-bottom: 0;
	border-radius: 0.8rem 0.8rem 0 0;
	opacity: 0.85;
}

/* Spalten im Markendesign: oben ausgerichtet, grosszuegiger Abstand. */
.sor-spalten { gap: clamp(1.6rem, 4vw, 3rem); align-items: flex-start; }

/* ==========================================================================
   BAUSTEINE AUS DEM MOCKUP
   --------------------------------------------------------------------------
   Die Seiten-Muster enthalten ein paar zusammengesetzte Bausteine als
   wp:html: die Season-Liste, die Kursmodule, Preiszeilen, Formulare und die
   Fragen des Phasen-Tests. Fuer die gibt es keinen passenden Kernblock.
   Ihr Markup stammt eins zu eins aus dem Mockup, also braucht das Theme auch
   deren CSS, sonst stehen sie auf der fertigen Seite voellig unformatiert da.

   Die Regeln darunter sind woertlich aus dem Mockup uebernommen. Damit sie
   hier funktionieren, werden zuerst die Variablennamen des Mockups auf die
   Farben und Schriften aus der theme.json gelegt. So gibt es weiterhin nur
   eine Quelle fuer die Farbwerte: die Palette.
   ========================================================================== */
:root {
	--bg-0: var(--wp--preset--color--tiefe);
	--bg-1: var(--wp--preset--color--nachtmoos);
	--bg-2: var(--wp--preset--color--waldschatten);
	--bg-3: var(--wp--preset--color--moosgrau);
	--line: var(--wp--preset--color--nebelkante);
	--line-soft: var(--wp--preset--color--moosgrau);
	--tx-1: var(--wp--preset--color--knochenweiss);
	--tx-2: var(--wp--preset--color--leinen);
	--tx-3: var(--wp--preset--color--asche);
	--acc: var(--wp--preset--color--gold);
	--acc-hi: var(--wp--preset--color--champagner);
	--acc-deep: var(--wp--preset--color--bronze);
	--on-acc: var(--wp--preset--color--tiefe);
	--warn: var(--wp--preset--color--kupferlicht);
	--err: var(--wp--preset--color--beerenschatten);
	--ok: var(--wp--preset--color--salbei);
	--gold: linear-gradient(118deg, #A97F37 0%, #B08F42 14%, #E8D3A0 38%, #F4E6BE 47%, #D4B36A 56%, #A78039 76%, #C9A45C 100%);
	--f-h: var(--wp--preset--font-family--playfair);
	--f-b: var(--wp--preset--font-family--raleway);
	--f-s: var(--wp--preset--font-family--script);
	--korn: var(--sor-korn);
	--rand: var(--wp--custom--seite-rand);
	--spalte: var(--wp--custom--spalte);
}


.fuss .klein{font-size:.82rem}

.kicker{font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);display:block;margin-bottom:1.05rem}

.kicker.klein{letter-spacing:.16em;margin-bottom:.7rem}

.hell{color:var(--tx-1)}

.klein{font-size:.875rem}

.kicker+h2,.kicker+h1{margin-top:0}

.script{font-family:var(--f-s);font-size:clamp(2.6rem,6vw,4rem);line-height:1.2;color:var(--acc);letter-spacing:0;margin-top:1.6rem;max-width:none}

.script-cite{font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);display:block;margin-top:.5rem}

.zitat{border-left:2px solid var(--acc);padding-left:1.3rem;font-family:var(--f-h);font-style:italic;font-size:1.3rem;color:var(--tx-1);line-height:1.5;margin:2rem 0;max-width:36em}

.ergebnis{border-left:2px solid var(--acc);padding-left:1.15rem;color:var(--tx-1);font-size:1.1rem;line-height:1.6;margin:1.4rem 0}

.karte{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:3px;padding:1.5rem}

.karte-hoch{background:var(--bg-3);border:1px solid var(--line);border-radius:4px;padding:clamp(1.6rem,4vw,2.6rem)}

.mitte{text-align:center}

.mitte h2,.mitte p{margin-left:auto;margin-right:auto}

.goldrahmen{position:relative;background:var(--bg-2);border-radius:4px;padding:clamp(1.7rem,4vw,2.8rem)}

.goldrahmen::before{content:"";position:absolute;inset:0;border-radius:4px;padding:1px;background:var(--gold);opacity:.5;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

.wer{font-size:.82rem;color:var(--tx-3);margin-top:.9rem;display:block}

.textlink{font-size:.92rem;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-size:.86rem;font-weight:600;letter-spacing:.02em;padding:.76rem 1.5rem;border-radius:2px;border:1px solid var(--acc);background:var(--acc);color:var(--on-acc);cursor:pointer}

.btn-2{background:transparent;border-color:var(--line);color:var(--tx-1)}

.btn:disabled{opacity:.75;cursor:default}

.knopfreihe{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.9rem}

.bild-behandelt{position:relative;overflow:hidden;border-radius:3px}

.bild-behandelt img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.72) sepia(.28) saturate(1.25) contrast(1.14) brightness(.72)}

.bild-behandelt::before{content:"";position:absolute;inset:0;background:linear-gradient(148deg,rgba(212,179,106,.3),rgba(16,26,22,0) 58%,rgba(8,13,11,.5)),radial-gradient(120% 110% at 50% 40%,transparent 34%,rgba(8,13,11,.68) 100%)}

.bild-behandelt::after{content:"";position:absolute;inset:0;background-image:var(--korn);opacity:.2;mix-blend-mode:overlay}


/* Season-Liste */
.s-liste{display:grid;gap:.7rem;margin-top:2.4rem}

.s-reihe{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;padding:1rem 1.2rem;background:var(--bg-2);border-left:3px solid var(--s);border-radius:2px;text-decoration:none}

.s-reihe.ist-hier{background:var(--bg-3)}

.s-reihe.ist-aktiv{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--s)}

.s-nr{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);white-space:nowrap}

.s-name{display:block;font-size:1.12rem;color:var(--s);font-family:var(--f-h)}

.s-text{font-size:.98rem;color:var(--tx-2);line-height:1.6;display:block}

.s-prod{font-size:.78rem;color:var(--tx-3);letter-spacing:.04em;display:block;margin-top:.35rem}

.s-tag{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-left:.6rem;white-space:nowrap}

.s-tag--offen{color:var(--warn)}


/* Formulare */
.formular{display:grid;gap:1rem;margin-top:1.4rem}

.formular--zeile{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap}

.formular--zeile .feld{flex:1 1 190px}

.formular--zeile .feld--btn{flex:0 0 auto}

.mitte-form{max-width:440px;margin-left:auto;margin-right:auto}

.feld label{display:block;font-size:.78rem;font-weight:600;color:var(--tx-3);margin-bottom:.35rem}

.feld input,.feld select,.feld textarea{width:100%;background:var(--bg-0);border:1px solid var(--line);color:var(--tx-1);border-radius:2px;padding:.78rem .9rem;font-family:var(--f-b);font-size:.95rem}

.feld textarea{min-height:5rem;resize:vertical}

.consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;font-size:.82rem;color:var(--tx-2);max-width:none}

.consent input{margin-top:.28em;accent-color:var(--acc)}

.fein{font-size:.78rem;color:var(--tx-3);margin-top:.9rem}


/* Quiz */
.frage{border:1px solid var(--line);border-left-width:3px;border-radius:2px;background:var(--bg-2);padding:1.2rem 1.3rem;margin-bottom:.8rem}

.frage.beantwortet{border-left-color:var(--acc)}

.frage legend,.frage .f{font-family:var(--f-h);font-size:1.15rem;line-height:1.35;color:var(--tx-1);margin-bottom:.9rem;display:flex;gap:.7rem;align-items:baseline}

.frage .zahl{font-size:.66rem;letter-spacing:.16em;color:var(--tx-3);flex:0 0 auto}

.antwort{display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0;font-size:1rem;line-height:1.55}

.antwort input{margin-top:.32em;accent-color:var(--acc)}


/* Artikel */
.artikel-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:2rem}

.teaser{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:4px;overflow:hidden}

.teaser .im{aspect-ratio:16/10}

.teaser .b{padding:1.2rem}

.teaser .tag{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--s,var(--acc));display:block;margin-bottom:.5rem}

.teaser h3{font-size:1.12rem;margin-bottom:.5rem}

.teaser p{font-size:.9rem;color:var(--tx-3)}

.lesemodus{font-size:.72rem;font-weight:600;background:transparent;border:1px solid var(--line);color:var(--tx-2);padding:.34rem .8rem;border-radius:99px;cursor:pointer}

.artikel-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.2rem 0 2.4rem;font-size:.875rem;color:var(--tx-3)}


/* Preisblock */
.preis{font-family:var(--f-h);font-size:2.4rem;line-height:1.1;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.preis-zeile{display:flex;gap:2rem;align-items:flex-start;flex-wrap:wrap;margin-top:1.4rem}

.modul{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line-soft);align-items:baseline}

.modul .n{font-size:.7rem;letter-spacing:.14em;color:var(--tx-3);white-space:nowrap}

.modul .t{color:var(--tx-1);font-weight:600;font-size:1rem}

.modul .d{font-size:.92rem;color:var(--tx-2);display:block;margin-top:.15rem}

.hinw{border-left:3px solid var(--acc);background:var(--bg-2);border-radius:0 3px 3px 0;padding:1.1rem 1.3rem;margin-top:1.6rem}

.hinw-err{border-left-color:var(--err)}

.hinw-lbl{font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);display:block;margin-bottom:.5rem}

.hinw-err .hinw-lbl{color:var(--err)}

.hinw p{max-width:44em}
@media(max-width:781px){
  
  .karten-3,.karten-2,.artikel-liste{grid-template-columns:1fr}
}
@media (max-width:660px){
  
  .karten-3,.karten-2,.artikel-liste{grid-template-columns:1fr}
  
  .s-reihe{grid-template-columns:1fr;gap:.3rem}
  
  .preis-zeile{gap:1rem}
  
  .formular--zeile{display:grid}
  
  .artikel-meta{font-size:.8rem}
}