@charset "UTF-8";
/* main.css — Portfolio-Theme "Lisa Jentsch". Handgeschrieben, kein Build.

   01 Custom Properties  02 Reset  03 Typografie  04 Layout-Primitive
   05 Bildbaustein  06 bloom/drawon/Trenner  07 Kopf & Navigation  08 Hero
   09 Knöpfe & Links  10 Karten & Kacheln  11 Malstufen  12 Kurse
   13 Werk & Filter  14 Formular/Suche  15 Krumen/Blättern/404  16 Lightbox
   17 Fußzeile  18 Utilities & WP-Core  19 Breakpoints  20 reduced-motion

   Zwei Regeln, die nicht verletzt werden dürfen:
   - [data-lj-bloom] wird NUR unter .lj-js versteckt; ohne JavaScript muss
     jedes Bild sichtbar sein.
   - .lj-stages ist ohne .is-enhanced die Grundfassung (Bild/Text abwechselnd),
     der klebende Bildstapel ist reine Aufwertung. */

/* === 01  CUSTOM PROPERTIES — die einzige Stelle für Farben und Grundmaße === */

:root {
	/* Grundflächen — warmes Aquarellpapier, kein reines Weiß */
	--lj-paper:        #FAF7F1;
	--lj-paper-deep:   #F2ECE1;
	--lj-paper-edge:   #E4DACA;
	--lj-white:        #FFFFFF;

	/* Tinte */
	--lj-ink:          #012B55;
	--lj-ink-soft:     #3D5A7A;
	--lj-ink-faint:    #5D6884;

	/* Akzent */
	--lj-ocker:        #D98324;
	--lj-ocker-deep:   #8F5514;
	--lj-ocker-wash:   #F7E4C8;

	/* Sekundär */
	--lj-sage:         #6E8B6B;
	--lj-sage-wash:    #DCE5D8;

	/*
	 * Pastelltöne der Stufenfolge (LEITFADEN §1, §4).
	 *
	 * Das sind ausdrücklich KEINE Textfarben. Sie tragen ausschließlich
	 * Flächen, Linien und Kanten — dafür sind sie gemischt, und dafür reichen
	 * sie. Wer einen davon auf Papier unter Fließtext setzt, verletzt SPEC.md:
	 * --lj-wash-farbe hat gegen Papier 1,32:1.
	 *
	 * Die Reihenfolge ist die Erzählung: Graphitgrau oben (noch kein Pigment),
	 * ein erstes verdünntes Blau in der Mitte, warmer Ocker unten, wo die
	 * Entscheidung fällt. Nach unten wird es nicht bunter, sondern wärmer und
	 * eine Spur kräftiger — wie eine Lasur, die man ein zweites Mal aufträgt.
	 */
	--lj-wash-bleistift: #E6E3DC;
	--lj-wash-tusche:    #D9E0E6;
	--lj-wash-farbe:     #F4E2C6;

	/* Dieselben Töne eine Stufe kräftiger, für Linien statt Flächen. */
	--lj-line-bleistift: #C9C4B8;
	--lj-line-tusche:    #A9BAC8;
	--lj-line-farbe:     #DCA95F;

	/* Zustände */
	--lj-success:      #4B7B52;
	--lj-error:        #9B3025;

	/* Typografie */
	--lj-font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--lj-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Maße */
	--lj-measure:      68ch;
	--lj-wrap:         1240px;
	--lj-wrap-wide:    1560px;
	--lj-gutter:       clamp(1.25rem, 4vw, 3rem);

	/* Radien und Schatten — Papier hat keine Schlagschatten */
	--lj-radius:       2px;
	--lj-shadow:       0 1px 2px rgba(1, 43, 85, .06), 0 8px 24px rgba(1, 43, 85, .05);

	/* Motion */
	--lj-ease:         cubic-bezier(.22, 1, .36, 1);
	--lj-dur-fast:     180ms;
	--lj-dur:          320ms;
	--lj-dur-slow:     900ms;
}

/* === 02  RESET — knapp gehalten, nur was wirklich stört === */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/*
 * Sprungziele brauchen Platz nach oben, sonst landet die Überschrift hinter
 * dem klebenden Stapel.
 *
 * --lj-stapel ist die Höhe von Klebebandrand UND Kopf zusammen. Der Wert war
 * einmal für einen einzelnen Kopf gerechnet (max. 7rem = 112 px); mit dem
 * Streifen darüber misst der Stapel je nach Fenster 118 bis 131 px, der Wert
 * reichte danach auf KEINER Fenstergröße mehr. Betroffen waren echte Ziele:
 * Wer aus einem Kurs auf „Schreib mir" klickt, landete mit der Überschrift
 * hinter den Leisten.
 *
 * Lieber großzügig: Zu viel Abstand setzt das Ziel ein Stück tiefer, zu wenig
 * versteckt es. Im Querformat eines Handys ist der Stapel anteilig am höchsten,
 * deshalb greift dort der obere Wert.
 */
:root {
	--lj-stapel: clamp(7.5rem, 16vh, 9rem);
}

[id] {
	scroll-margin-top: var(--lj-stapel);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
	margin: 0;
}

ol[class],
ul[class] {
	list-style: none;
	padding: 0;
}

img,
picture,
svg,
video {
	max-width: 100%;
}

img { border-style: none; }

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

table { border-collapse: collapse; width: 100%; }

/* Fokus: sichtbar und in der Hausfarbe, nie der Browser-Default. */
:focus-visible {
	outline: 2px solid var(--lj-ocker-deep);
	outline-offset: 3px;
	border-radius: var(--lj-radius);
}

/* Fokus per Sprungmarke: ein Rahmen um die halbe Seite wäre Lärm. Bei
   echter Tastaturnavigation (:focus-visible) bleibt er erhalten. */
.lj-main:focus {
	outline: none;
}

/* === 03  BASIS-TYPOGRAFIE === */

.lj-body {
	background: var(--lj-paper);
	color: var(--lj-ink);
	font-family: var(--lj-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--lj-font-display);
	font-weight: 300;
	letter-spacing: -.01em;
	line-height: 1.1;
	color: var(--lj-ink);
}

p { overflow-wrap: break-word; }

a {
	color: var(--lj-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	transition: color var(--lj-dur-fast) var(--lj-ease);
}

a:hover { color: var(--lj-ocker-deep); }
strong { font-weight: 600; }

/* Typenskala exakt nach Spec 1.2 */
.lj-t-hero  { font-family: var(--lj-font-display); font-weight: 300; line-height: 1.02; letter-spacing: -.015em; font-size: clamp(2.75rem, 7vw, 5.5rem); }
.lj-t-h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.lj-t-h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.lj-t-h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.lj-t-lead { font-family: var(--lj-font-body); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.6; color: var(--lj-ink-soft); }
.lj-t-body { font-size: 1.0625rem; line-height: 1.7; }
.lj-t-small { font-size: .9375rem; line-height: 1.55; }

/* === 04  LAYOUT-PRIMITIVE === */

.lj-wrap {
	width: 100%;
	max-width: var(--lj-wrap);
	margin-inline: auto;
	padding-inline: var(--lj-gutter);
}

.lj-wrap--wide { max-width: var(--lj-wrap-wide); }
.lj-wrap--narrow { max-width: calc(var(--lj-measure) + var(--lj-gutter) * 2); }
.lj-main { display: block; padding-bottom: clamp(3rem, 8vw, 6rem); }
.lj-main__crumbs { padding-top: 1.25rem; padding-bottom: .25rem; }
.lj-section { padding-block: clamp(3rem, 8vw, 6rem); }

/* Abgesetzte Sektion: randlos über die volle Breite, damit die Fläche trägt. */
.lj-section--tint {
	background: var(--lj-paper-deep);
}

.lj-section--close { padding-bottom: clamp(3.5rem, 9vw, 7rem); }
.lj-section__head { margin-bottom: clamp(1.75rem, 4vw, 3rem); max-width: var(--lj-measure); }

.lj-section__kicker {
	margin-bottom: .5rem;
	color: var(--lj-ink-faint);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 500;
}

.lj-section__title { margin-bottom: .75rem; }
.lj-section__lead { max-width: var(--lj-measure); }
.lj-section__more { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

.lj-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lj-gutter);
}

/* Die Galerie ist dasselbe Raster ohne Kartenrahmen: Aquarelle sollen auf
   dem Papier liegen, nicht in Kästen stecken. */
.lj-gallery {
	row-gap: clamp(2rem, 5vw, 3.5rem);
}

/* Einheitliche Bildfläche für Galerie-Raster und Kategorie-Kacheln.
   Lisas Formate reichen von hochkant über quadratisch bis quer. Ohne feste
   Fläche endet jedes Werk auf einer anderen Höhe, die Bildunterschriften
   stehen versetzt und das Raster zerfällt.

   Warum 1:1 und nicht 4:3: das Quadrat ist das einzige Verhältnis, das keine
   Orientierung bevorzugt. Ein Hochformat nutzt die volle Höhe, ein Querformat
   die volle Breite, beide bleiben ähnlich groß. In einer 4:3-Fläche würde ein
   Hochformat dagegen auf ein schmales Band zusammenschrumpfen — dieselbe
   Unruhe von der anderen Seite.

   contain statt cover: ein beschnittenes Aquarell ist keine Ware mehr.
   Die Fläche bekommt bewusst KEINEN eigenen Hintergrund und keinen Rahmen,
   sonst stünde der weiße Kasten wieder da, den multiply (Spec 1.3) gerade
   wegnimmt. Der Rand um das Werk bleibt reines Seitenpapier. */
.lj-gallery .lj-card__media,
.lj-cat__media {
	aspect-ratio: 1 / 1;
	/* .lj-card ist ein Spalten-Flexcontainer. Dort hat jedes Kind von Haus aus
	   min-height:auto und wächst auf die Inhaltshöhe — das Bild würde die
	   Fläche wieder auseinanderziehen und das Seitenverhältnis aushebeln. */
	min-height: 0;
}

/* Die Kette figure > a > picture muss die Fläche durchreichen, sonst hat das
   Bild keine Höhe, an der sich object-fit ausrichten kann. */
.lj-gallery .lj-card__media .lj-artwork,
.lj-gallery .lj-card__media .lj-artwork__link,
.lj-gallery .lj-card__media .lj-artwork__pic,
.lj-cat__media .lj-artwork,
.lj-cat__media .lj-artwork__link,
.lj-cat__media .lj-artwork__pic {
	height: 100%;
}

.lj-gallery .lj-card__media .lj-artwork__img,
.lj-cat__media .lj-artwork__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Fließtext aus dem Editor */
.lj-prose {
	max-width: var(--lj-measure);
}

.lj-prose > * + * { margin-top: 1.1em; }
.lj-prose h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-top: 1.8em; }
.lj-prose h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin-top: 1.6em; }

.lj-prose ul,
.lj-prose ol {
	padding-left: 1.3em;
}

.lj-prose li + li { margin-top: .35em; }
.lj-prose a { color: var(--lj-ink); text-decoration: underline; }
.lj-prose a:hover { color: var(--lj-ocker-deep); }

.lj-prose blockquote {
	margin-inline: 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--lj-ocker);
	font-family: var(--lj-font-display);
	font-size: 1.3rem;
	line-height: 1.4;
	color: var(--lj-ink-soft);
}

.lj-prose img { height: auto; border-radius: var(--lj-radius); }

.lj-prose hr {
	border: 0;
	border-top: 1px solid var(--lj-paper-edge);
	margin-block: 2rem;
}

/* Seitenkopf */
.lj-page-head {
	padding-top: clamp(1.5rem, 4vw, 3rem);
	padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.lj-page-head__title { max-width: 22ch; }
.lj-page-head__lead { margin-top: .85rem; max-width: var(--lj-measure); }
.lj-page__media { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.lj-page__content { padding-bottom: clamp(1.5rem, 4vw, 3rem); }

/* Rückfallansicht aus index.php */
.lj-single {
	max-width: var(--lj-measure);
	margin-inline: auto;
}

.lj-single__media { margin-bottom: 1.5rem; }

/* === 05  BILDBAUSTEIN — der multiply-Kniff (Spec 1.3) === */

.lj-artwork {
	margin: 0;
}

.lj-artwork__pic { display: block; }

/* width/height stehen im Markup; hier wird nur skaliert (kein CLS). */
.lj-artwork__img {
	display: block;
	width: 100%;
	height: auto;
}

/* DER Kniff: freigestellte Aquarelle liegen ohne weißen Kasten auf dem
   warmen Papier. Nur für --paper; Fotos (Porträt, Kurs, Plein Air) bekommen
   --photo und müssen ihre eigenen Weißtöne behalten. */
.lj-artwork--paper .lj-artwork__img {
	mix-blend-mode: multiply;
}

.lj-artwork__link { display: block; text-decoration: none; }
.lj-artwork__caption { margin-top: .6rem; color: var(--lj-ink-faint); }

/* === 05b  KANTEN-GRAMMATIK — die Trockenkante (LEITFADEN §4, Leitmotiv 1) === */

/*
 * Beim Trocknen zieht sich das Pigment an den Rand und hinterlässt eine harte
 * Linie. Diese Kante ist hier die Grammatik der Verbindlichkeit: Je weiter
 * unten auf der Seite, desto häufiger und schärfer.
 *
 *   bleistift  gar keine Kante. Nichts ist entschieden, nichts umrandet.
 *   tusche     eine Kante, links, blass. Es nimmt Form an.
 *   farbe      eingefasst und getönt. Hier wird entschieden.
 *
 * Das ist die Führung, und sie kostet keine einzige Zeile JavaScript: Der
 * Blick läuft von der offenen Fläche oben zur eingefassten unten, weil harte
 * Kanten das Auge halten und weiche es weiterziehen lassen.
 *
 * Alles hängt an einem Attribut im Markup (data-stufe), nicht an der
 * Reihenfolge im DOM. Wer eine Sektion verschiebt, verschiebt ihre Kante mit
 * — und wer eine neue einsetzt, muss sich entscheiden, was sie ist.
 */
/*
 * Die Kante liegt AUF dem Papier, nicht IM Fluss.
 *
 * Erster Versuch war border-left plus padding-left — und genau das verschob
 * den Inhalt: Sektionen mit Kante rückten um bis zu 24 px nach rechts,
 * Sektionen ohne blieben stehen. Beim Scrollen sprang die Textspalte also
 * zwischen den Abschnitten hin und her, und zwar sichtbar, weil alle
 * Überschriften an derselben Kante ausgerichtet sein sollen.
 *
 * Ein absolut gesetztes ::before nimmt keinen Platz ein. Die Kante steht
 * damit an derselben Stelle wie vorher, der Satzspiegel bleibt aber über
 * alle Abschnitte hinweg ruhig.
 */
[data-stufe="tusche"],
[data-stufe="farbe"] {
	position: relative;
}

[data-stufe="tusche"]::before,
[data-stufe="farbe"]::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	pointer-events: none;
}

[data-stufe="tusche"]::before {
	width: 1px;
	background: var(--lj-line-tusche);
}

[data-stufe="farbe"]::before {
	width: 3px;
	background: var(--lj-line-farbe);
}

/*
 * Der Hero ist ausgenommen. Er trägt zwar data-stufe="farbe", weil er das
 * fertige Bild zeigt — aber eine Kante am obersten Element wäre eine
 * Behauptung, bevor irgendetwas gesagt wurde. Die Erzählung fängt mit
 * unberührtem Papier an (LEITFADEN §3, „Im Hero gibt es keine einzige
 * harte Kante").
 */
.lj-hero[data-stufe]::before {
	content: none;
}

/* === 06  SIGNATURE-MOMENTE: bloom, drawon, Trenner === */

/* WICHTIG: der versteckte Zustand hängt an .lj-js (vom Skript am <html>
   gesetzt). Ohne JavaScript greift keine dieser Regeln und jedes Bild ist
   sichtbar — genau so muss es sein. */
/*
 * Das Werk erscheint — schlicht und absichtlich unspektakulär.
 *
 * Hier stand bis zuletzt der Aquarellflecken-Bloom: eine mask-image, die von
 * 55 % auf 140 % wuchs und das Bild wie einen sich ausbreitenden Fleck
 * aufdeckte. Der Leitfaden (§5, „Was gestrichen wird") hat ihn aus drei
 * Gründen verworfen, und alle drei haben sich in der Vorschau bestätigt:
 *
 * 1. Er bricht multiply. mask-image erzeugt einen Stacking Context, und das
 *    freigestellte Aquarell bekommt seinen weißen Kasten zurück — genau den
 *    Effekt, den das ganze Design vermeidet. Dagegen half nur ein
 *    Papierton-Hintergrund, also ein Pflaster auf einem Effekt, der weg soll.
 * 2. mask-size ist nicht compositor-beschleunigt. Auf dem größten Bild der
 *    Seite kostet das den ersten Eindruck auf Mobilfunk.
 * 3. Bei freigestellten Motiven ist er sinnlos: Ein Fleck, der einen Fleck
 *    aufdeckt, sieht aus wie ein Darstellungsfehler.
 *
 * Ersatz: opacity und 8 px von unten. Weniger clever — es zeigt das Bild
 * statt den Effekt. Beides ist compositor-beschleunigt.
 *
 * ACHTUNG, hier stand einmal die Behauptung, das erzeuge „keinen bleibenden
 * Stacking Context, weil opacity am Ende exakt 1 erreicht". Das ist zwar wahr
 * und trotzdem irrelevant: Während der 500 ms sind opacity < 1 UND transform
 * gesetzt, das Element ist also ein Stacking Context — und genau währenddessen
 * sieht der Besucher hin. Das freigestellte Aquarell mischte in dieser Zeit
 * gegen Transparenz statt gegen Papier und bekam den weißen Kasten zurück, der
 * am Ende schlagartig verschwand. „Vorübergehend" heißt nicht „unsichtbar",
 * sondern „eine halbe Sekunde lang sichtbar, und zwar bei jedem Bild".
 *
 * Deshalb auch hier der Papierton — dieselbe Regel wie bei .lj-stages__frame,
 * .lj-stages__media und .lj-band__item. In diesem Projekt gilt ausnahmslos:
 * Wer opacity, transform, filter, mask oder sticky auf einen Vorfahren eines
 * freigestellten Aquarells setzt, setzt background: var(--lj-paper) mit dazu.
 */
.lj-js [data-lj-bloom] {
	opacity: 0;
	transform: translateY(8px);
	background: var(--lj-paper);
}

.lj-js [data-lj-bloom].is-blooming {
	transition: opacity 500ms var(--lj-ease), transform 500ms var(--lj-ease);
	opacity: 1;
	transform: none;
}

.lj-js [data-lj-bloom].is-bloomed {
	opacity: 1;
	transform: none;
}

/* Sektionstrenner: Tuschelinie, zeichnet sich beim Erscheinen.
 *
 * Die Farbe folgt der Stufenfolge statt einer Nummerierung: Der Trenner nimmt
 * den Ton der Sektion an, auf die er zuläuft. Von oben nach unten wandert die
 * Linie damit von Graphit über verdünnte Tusche zu warmem Ocker — dieselbe
 * Bewegung, die auch die Kanten machen. Ein Trenner ohne Nachbarn (Fußzeile)
 * behält den neutralen Papierrand. */
.lj-rule {
	max-width: var(--lj-wrap);
	margin-inline: auto;
	padding-inline: var(--lj-gutter);
	color: var(--lj-paper-edge);
}

.lj-rule--a { color: var(--lj-line-bleistift); }
.lj-rule--b { color: var(--lj-line-tusche); }
.lj-rule--c { color: var(--lj-line-farbe); }

/* --- Das Blütenband (LEITFADEN §4, Leitmotiv 3) ------------------------ */

/*
 * Dieselbe Wiese, aber man kommt ihr nach unten näher. Drei Größen, drei
 * Abstände, drei Sättigungen — keine Animation, kein JavaScript.
 */
.lj-band {
	overflow: hidden;          /* Das Band läuft seitlich aus dem Papier. */
	margin-block: clamp(2rem, 6vw, 4rem);
}

.lj-band__spur {
	display: flex;
	align-items: flex-end;

	/*
	 * space-between statt center — das ist der Unterschied zwischen „Band" und
	 * „Häufchen".
	 *
	 * Die Blüten sind schmal (Format 0,58, bei 64 px Höhe also 37 px breit).
	 * Zentriert standen sieben davon als 500 px breite Gruppe mitten auf einem
	 * 1200-px-Papier, mit viel Leere links und rechts — also genau NICHT das,
	 * was der Leitfaden beschreibt („läuft seitlich aus dem Papier").
	 *
	 * Mit space-between verteilen sie sich über die volle Spurbreite, und weil
	 * die Spur 120 % misst, liegen die erste und die letzte Blüte je 10 %
	 * außerhalb des Sichtfelds und werden vom overflow beschnitten. Das Band
	 * hört damit nirgends sichtbar auf — es geht weiter, man sieht nur diesen
	 * Ausschnitt. Die Dichte entsteht jetzt aus der ANZAHL, nicht aus dem gap.
	 */
	justify-content: space-between;
	width: 120%;
	margin-left: -10%;
}

.lj-band__item {
	flex: none;

	/*
	 * Die Blässe entsteht über opacity — und opacity erzeugt einen Stacking
	 * Context, in dem mix-blend-mode: multiply gegen Weiß statt gegen Papier
	 * rechnet. Ohne den Papierton hier bekäme jede Blüte einen weißen Kasten.
	 * Derselbe Grund wie bei .lj-stages__frame, .lj-stages__media und
	 * [data-lj-bloom]. In diesem Projekt ist das die Regel und nicht die
	 * Ausnahme: Wer opacity, transform, filter, mask oder sticky auf einen
	 * Vorfahren eines freigestellten Aquarells setzt, setzt den Papierton
	 * mit dazu — auch dann, wenn der Kontext nur vorübergehend besteht.
	 */
	background: var(--lj-paper);
}

/* lj_get_artwork() liefert figure > picture > img. Die Höhe steuert der
   Eintrag, multiply kommt aus .lj-artwork--paper — das Band setzt es nicht
   mehr selbst, damit Fotos unter den Botanik-Werken ihre Weißtöne behalten. */
.lj-band__figur,
.lj-band__figur .lj-artwork__pic {
	display: block;
	height: 100%;
	margin: 0;
}

.lj-band__img {
	display: block;
	width: auto;
	height: 100%;
}

/* Oben: weit auseinander, klein, kaum vorhanden. */
.lj-band--bleistift .lj-band__spur { gap: 1rem; }
.lj-band--bleistift .lj-band__item { height: 48px; opacity: .3; }

/* Mitte: es nimmt Form an. */
.lj-band--tusche .lj-band__spur { gap: .75rem; }
.lj-band--tusche .lj-band__item { height: 64px; opacity: .55; }

/* Unten: dicht und kräftig — hier ist die Farbe angekommen. */
.lj-band--farbe .lj-band__spur { gap: .4rem; }
.lj-band--farbe .lj-band__item { height: 84px; opacity: .85; }

/*
 * Auf schmalen Schirmen weniger Blüten — und zwar wirklich weniger, nicht
 * bloß abgeschnittene.
 *
 * Die Spur verteilt mit space-between; passt der Inhalt nicht, laufen die
 * überzähligen Blüten rechts aus dem Bild. Auf einem 375-px-Schirm wären das
 * bei 21 Blüten 1892 px Inhalt in 450 px Spur: zwölf Bilder werden geladen
 * und nie gesehen. display: none nimmt sie aus dem Fluss, und weil sie
 * loading="lazy" tragen und nie in den Sichtbereich kommen, lädt der Browser
 * sie gar nicht erst.
 *
 * Die Abstufung bleibt auf jeder Breite erhalten: „farbe" ist immer dichter
 * als „tusche", nur die Zahlen schrumpfen mit.
 */
@media (max-width: 639px) {
	.lj-band--bleistift .lj-band__item:nth-child(n+5),
	.lj-band--tusche    .lj-band__item:nth-child(n+7),
	.lj-band--farbe     .lj-band__item:nth-child(n+10) { display: none; }
}

@media (min-width: 640px) and (max-width: 959px) {
	.lj-band--bleistift .lj-band__item:nth-child(n+7),
	.lj-band--tusche    .lj-band__item:nth-child(n+11),
	.lj-band--farbe     .lj-band__item:nth-child(n+16) { display: none; }
}

/*
 * Die Kanten-Grammatik gilt für Sektionen, nicht für das Band. Ohne diese
 * Rücknahme bekäme ein Band mit data-stufe="farbe" den 3-px-Ockerbalken an
 * die linke Seite — ein senkrechter Strich vor einer waagerechten Blütenreihe.
 */
.lj-band[data-stufe]::before {
	content: none;
}

.lj-rule__svg {
	display: block;
	width: 100%;
	height: 24px;
}

/* pathLength="100" im Markup macht dasarray unabhängig von der echten Länge. */
.lj-js [data-lj-drawon] {
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.lj-js [data-lj-drawon].is-drawn { animation: lj-draw 1200ms var(--lj-ease) forwards; }

@keyframes lj-draw {
	to { stroke-dashoffset: 0; }
}

/* Signatur: ohne JS und ab dem zweiten Seitenaufruf sofort vollständig da. */
.lj-signature {
	display: block;
	width: clamp(180px, 24vw, 280px);
	margin-bottom: 1.25rem;
	color: var(--lj-ink);
}

.lj-signature svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Der Pinselstrich in der Maske fährt einmal über den Schriftzug und deckt
   ihn auf (Logo-Entwurf aus Lovable). Grundzustand: schon durchgezogen —
   ohne Skript, bei reduzierter Bewegung und beim zweiten Besuch steht der
   Name sofort da. Läuft einmal, keine Schleife. */
.lj-signature .lj-sig-brush {
	stroke-dasharray: 260;   /* Pfadlänge 200 plus die runden Enden */
	stroke-dashoffset: 0;
}
.lj-signature.is-drawing .lj-sig-brush {
	animation: lj-draw-sig 2500ms ease-in-out both;
}

@keyframes lj-draw-sig {
	from { stroke-dashoffset: 260; }
	to { stroke-dashoffset: 0; }
}

/* === 07  SPRUNGMARKE, KOPF, NAVIGATION === */

.lj-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: .75rem 1.25rem;
	background: var(--lj-ink);
	color: var(--lj-white);
	text-decoration: none;
	border-radius: 0 0 var(--lj-radius) 0;
}

.lj-skip:focus { left: 0; color: var(--lj-white); }

/* Die Kante ist dauerhaft da und sehr leise: eine Linie, die beim Scrollen
   erscheint und wieder verschwindet, wäre Unruhe. */
/* --- Der Klebebandrand (LEITFADEN §3) --------------------------------- */

/*
 * Der abgeklebte Rand des Blattes. Echtes Weiß ist hier ausdrücklich richtig,
 * obwohl SPEC.md es sonst meidet: Der Streifen ist die Stelle, die beim Malen
 * NICHT bemalt wurde. Er hebt sich vom warmen Papier ab, weil er kein Papier
 * mehr ist, sondern der Rand.
 *
 * Keine transition, keine animation, kein transform — nirgends in diesem
 * Block. Der Streifen ist der einzige Teil der Seite, der sich nie bewegt,
 * und das ist seine Aufgabe.
 */
/* Der gemeinsame klebende Behälter: Streifen UND Kopf. Nur dieser eine
   Block klebt; die beiden darin sind normale Elemente im Fluss. Damit
   entfällt jede Rechnung über die Höhe des Streifens. */
.lj-sticky-top {
	position: sticky;
	top: 0;
	z-index: 110;
}

.lj-tape {
	background: var(--lj-white);
	/* Die scharfe Unterkante: die Linie, die das abgezogene Band hinterlässt. */
	border-bottom: 1px solid var(--lj-ink-faint);
	font-family: var(--lj-font-body);
	font-size: .8125rem;
	line-height: 1.2;
}

.lj-tape__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding-block: .5rem;
}

.lj-tape__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(.75rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lj-tape__link,
.lj-tape__termin-link {
	color: var(--lj-ink-faint);
	text-decoration: none;
}

.lj-tape__link:hover,
.lj-tape__link:focus-visible,
.lj-tape__termin-link:hover,
.lj-tape__termin-link:focus-visible {
	color: var(--lj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Das Kürzen sitzt am INNEREN Span, nicht am Absatz und nicht am Link.
 *
 * Vorher stand overflow: hidden auf dem Absatz — und ein overflow-Kasten
 * beschneidet auch die Outlines seiner Nachkommen. Der Fokusring des
 * Terminlinks liegt mit outline-offset 3px vollständig außerhalb des
 * 15,6 px hohen Clip-Kastens und war damit restlos unsichtbar; die
 * Unterstreichung mit text-underline-offset 3px übrigens auch. Unter 640 px
 * ist der Terminlink der einzige Link im Streifen und der erste Tabulator-
 * Halt nach der Sprungmarke — es gab dort also gar keine Fokusanzeige mehr.
 * Das ist WCAG 2.4.7 auf Stufe A und SPEC.md 1.5 („nicht verhandelbar").
 */
.lj-tape__termin {
	margin: 0;
	min-width: 0;   /* sonst schrumpft der Flex-Eintrag nicht und kürzt nie */
}

.lj-tape__termin-text {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 639px) {
	.lj-tape__termin-text { white-space: normal; overflow: visible; }
}

/* Steht ein Termin in weniger als vier Wochen an, bekommt der Streifen die
   kräftigere Kante der Stufe „Farbe" — dieselbe Grammatik wie die Sektionen
   weiter unten: Was entschieden werden will, ist eingefasst. */
.lj-tape--dringend {
	border-bottom-color: var(--lj-line-farbe);
	border-bottom-width: 2px;
}

/*
 * Die Dringend-Farbe darf Hover und Fokus NICHT schlagen.
 *
 * .lj-tape__termin-link:focus-visible und .lj-tape--dringend .lj-tape__termin-link
 * haben beide die Spezifität (0,2,0) — eine Pseudoklasse zählt wie eine Klasse.
 * Bei Gleichstand gewinnt die spätere Regel, und das war bis eben die
 * Dringend-Farbe: Genau wenn ein Termin ansteht, also wenn der Link am
 * wichtigsten ist, blieb der Farbwechsel beim Fokussieren aus.
 */
.lj-tape--dringend .lj-tape__termin-link:not(:hover):not(:focus-visible) {
	color: var(--lj-ocker-deep);
}

/*
 * Auf schmalen Schirmen verschwindet die Kategorienavigation, die Terminzeile
 * bleibt. Das ist die richtige Hälfte: Die Kategorien stehen zwei
 * Bildschirmhöhen weiter unten noch einmal, der nächste Termin nirgends.
 */
@media (max-width: 639px) {
	.lj-tape__nav { display: none; }
	.lj-tape__inner { justify-content: center; }
	.lj-tape__termin { white-space: normal; text-align: center; }
}

/* Nicht mehr selbst sticky — das erledigt .lj-sticky-top für beide. */
.lj-header {
	background: var(--lj-paper);
	border-bottom: 1px solid var(--lj-paper-edge);
}

/* Umbruchfähig nur wegen des Zustands ohne JavaScript: dort steht das
   Suchfeld offen im Kopf und braucht auf schmalen Schirmen eine zweite
   Zeile. Mit Skript stehen dort nur zwei Knöpfe, es bricht nichts um. */
.lj-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .9rem;
}

.lj-header__brand { min-width: 0; }

.lj-brand {
	display: block;
	font-family: var(--lj-font-display);
	font-weight: 300;
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	line-height: 1.1;
	letter-spacing: .01em;
}

.lj-brand__link { text-decoration: none; }

.lj-brand__tagline {
	display: none;
	margin-top: .15rem;
	color: var(--lj-ink-faint);
}

.custom-logo-link { display: inline-block; }

.custom-logo {
	display: block;
	height: auto;
	max-height: 56px;
	width: auto;
}

.lj-nav {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* Der Knopf ist ohne Skript nutzlos und wird deshalb nur mit .lj-js gezeigt. */
.lj-nav__toggle {
	display: none;
	align-items: center;
	gap: .55rem;
	min-height: 44px;
	padding: .35rem .5rem;
	color: var(--lj-ink);
}

.lj-js .lj-nav__toggle { display: inline-flex; }

.lj-nav__toggle-icon {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 22px;
	height: 16px;
}

.lj-nav__toggle-bar {
	display: block;
	height: 1.5px;
	width: 100%;
	background: currentColor;
	transition: transform var(--lj-dur-fast) var(--lj-ease), opacity var(--lj-dur-fast) var(--lj-ease);
}

/* Zum X ausschließlich über transform — nie über Layout-Eigenschaften. */
.lj-nav__toggle[aria-expanded="true"] .lj-nav__toggle-bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.lj-nav__toggle[aria-expanded="true"] .lj-nav__toggle-bar:nth-child(2) { opacity: 0; }
.lj-nav__toggle[aria-expanded="true"] .lj-nav__toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.lj-nav__toggle-label { font-size: .9375rem; letter-spacing: .04em; }

/* Grundzustand: Panel sichtbar. Eingeklappt wird nur mit Skript, und der
   offene Zustand hängt am aria-expanded des Knopfes — eine Wahrheit. */
.lj-js .lj-nav__panel {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: 1rem var(--lj-gutter) 1.5rem;
	background: var(--lj-paper);
	border-bottom: 1px solid var(--lj-paper-edge);
	box-shadow: var(--lj-shadow);
}

.lj-js .lj-nav__toggle[aria-expanded="true"] + .lj-nav__panel { display: block; }

.lj-nav__list {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lj-nav__item,
.lj-nav .menu-item {
	list-style: none;
}

.lj-nav__link,
.lj-nav .menu-item > a {
	display: block;
	padding: .55rem 0;
	text-decoration: none;
	letter-spacing: .01em;
}

.lj-nav__link:hover,
.lj-nav .menu-item > a:hover {
	color: var(--lj-ocker-deep);
}

/* Aktiver Eintrag: eigene Klasse, ARIA und die WP-Klassen gleichermaßen. */
.lj-nav__item.is-current > .lj-nav__link,
.lj-nav__link[aria-current="page"],
.lj-nav .current-menu-item > a,
.lj-nav .current_page_item > a,
.lj-nav .current-menu-ancestor > a {
	color: var(--lj-ocker-deep);
	box-shadow: inset 0 -1px 0 0 var(--lj-ocker);
}

.lj-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1rem;
}

.lj-nav .sub-menu a { font-size: .9375rem; color: var(--lj-ink-soft); }

/* Rechte Kopfgruppe: erst die Navigation, dann die Suche. */
.lj-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

/* Suche im Kopf: ein Schalter statt eines dauerhaft offenen Feldes. Auf einer
   Seite mit hundert Aquarellen war das gefüllte Formular das lauteste Element
   und zog den Blick vom Werk weg — gegen den Grundsatz aus Spec 1.4. Wie bei
   der Navigation steht der offene Zustand ausschließlich im aria-expanded des
   Knopfes; es gibt keine zweite Wahrheit, die abweichen könnte. */
.lj-header__search { min-width: 0; }

/* Der Schalter ist ohne Skript wirkungslos und wird deshalb nur mit .lj-js
   gezeigt. Dann bleibt das Feld sichtbar stehen — nie display:none im
   Grundzustand, sonst wäre die Suche ohne JavaScript verloren. */
.lj-header__search-toggle {
	display: none;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	padding: .35rem .5rem;
	color: var(--lj-ink);
}

.lj-js .lj-header__search-toggle { display: inline-flex; }

.lj-header__search-icon { display: block; }
.lj-header__search-label { font-size: .9375rem; letter-spacing: .04em; }

.lj-js .lj-header__search-panel {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	padding: 1rem var(--lj-gutter) 1.25rem;
	background: var(--lj-paper);
	border-bottom: 1px solid var(--lj-paper-edge);
	box-shadow: var(--lj-shadow);
}

.lj-js .lj-header__search-toggle[aria-expanded="true"] + .lj-header__search-panel { display: block; }

/* Im ausgeklappten Streifen sitzt das Formular unter seinem Schalter, nicht
   quer über die ganze Kopfbreite. */
.lj-js .lj-header__search-panel .lj-search {
	max-width: 32rem;
	margin-left: auto;
}

/* Der gefüllte Knopf ist im Kopf zu laut; hier trägt ihn der Rahmen. Auf der
   Such- und der 404-Seite bleibt er gefüllt — dort ist die Suche die
   Hauptsache und darf führen. */
.lj-header__search .lj-search__submit {
	background: transparent;
	color: var(--lj-ink);
	border-color: var(--lj-paper-edge);
}

.lj-header__search .lj-search__submit:hover {
	background: var(--lj-paper-deep);
	border-color: var(--lj-ink-faint);
	color: var(--lj-ink);
}

/* === 08  HERO === */

.lj-hero {
	padding-block: clamp(2.5rem, 7vw, 5.5rem);
}

.lj-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

.lj-hero__title { max-width: 16ch; }
.lj-hero__lead { margin-top: 1.25rem; max-width: var(--lj-measure); }

.lj-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

.lj-hero__caption { margin-top: .75rem; color: var(--lj-ink-faint); }

/* === 09  KNÖPFE UND LINKS === */

.lj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .6rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--lj-radius);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--lj-dur-fast) var(--lj-ease),
	            color var(--lj-dur-fast) var(--lj-ease),
	            transform var(--lj-dur-fast) var(--lj-ease);
}

.lj-btn:active { transform: translateY(1px); }

/* --lj-ocker trägt als Textfarbe nur 2.6:1 — gefüllt wird deshalb immer
   mit --lj-ocker-deep und weißer Schrift (Spec 1.5). */
.lj-btn--primary {
	background: var(--lj-ocker-deep);
	color: var(--lj-white);
	border-color: var(--lj-ocker-deep);
}

.lj-btn--primary:hover {
	background: var(--lj-ink);
	border-color: var(--lj-ink);
	color: var(--lj-white);
}

.lj-btn--ghost {
	background: transparent;
	color: var(--lj-ink);
	border-color: var(--lj-paper-edge);
}

.lj-btn--ghost:hover {
	background: var(--lj-paper-deep);
	border-color: var(--lj-ink-faint);
	color: var(--lj-ink);
}

.lj-btn--small {
	min-height: 44px;
	padding: .4rem 1rem;
	font-size: .9375rem;
}

.lj-link {
	color: var(--lj-ink);
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-color: var(--lj-paper-edge);
}

.lj-link:hover { color: var(--lj-ocker-deep); text-decoration-color: currentColor; }

.lj-link--arrow {
	display: inline-flex;
	align-items: baseline;
	gap: .45rem;
	font-weight: 500;
	text-decoration: none;
	box-shadow: inset 0 -1px 0 0 var(--lj-paper-edge);
}

.lj-link--arrow::after { content: "\2192"; transition: transform var(--lj-dur-fast) var(--lj-ease); }
.lj-link--arrow:hover { box-shadow: inset 0 -1px 0 0 var(--lj-ocker); }
.lj-link--arrow:hover::after { transform: translateX(.25rem); }

/* === 10  KARTEN UND KATEGORIE-KACHELN === */

.lj-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.lj-card__media { order: -1; }

/* Der einzige Abstand zwischen Bild und Text — bewusst genau einer. */
.lj-card__body {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex: 1 1 auto;
}

/* Der Titel steht IMMER sichtbar unter dem Bild. Nie opacity:0, nie Overlay. */
.lj-card__title {
	margin: 0;
}

.lj-card__link { text-decoration: none; }
.lj-card__link:hover { box-shadow: inset 0 -1px 0 0 var(--lj-ocker); }

.lj-card__meta,
.lj-card__genres {
	color: var(--lj-ink-faint);
}

.lj-card__excerpt { color: var(--lj-ink-soft); }

.lj-card__badge {
	order: -1;
	align-self: flex-start;
	margin-bottom: .1rem;
	color: var(--lj-ink-faint);
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lj-card__date { color: var(--lj-ink-soft); }

.lj-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: auto;
	padding-top: .9rem;
}

/* Kurskarten mit Status: schmale Akzentkante, sonst nichts. */
.lj-card--course {
	padding-left: 1rem;
	border-left: 2px solid var(--lj-paper-edge);
}

.lj-card--upcoming { border-left-color: var(--lj-ocker); }
.lj-card--ondemand { border-left-color: var(--lj-sage); }
.lj-card--request { border-left-color: var(--lj-ink-faint); }
.lj-card--past { border-left-color: var(--lj-paper-edge); color: var(--lj-ink-soft); }

.lj-card--featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lj-gutter);
	align-items: start;
	padding-left: 1.25rem;
	border-left-width: 3px;
}

.lj-card--featured .lj-card__body { margin-top: 0; gap: .55rem; }

.lj-card--compact {
	flex-direction: row;
	align-items: baseline;
	gap: .75rem;
	padding: .7rem 0 .7rem 1rem;
	border-left: 2px solid var(--lj-paper-edge);
	border-bottom: 1px solid var(--lj-paper-edge);
}

.lj-card--compact .lj-card__body {
	margin-top: 0;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .25rem .9rem;
}

.lj-card--compact .lj-card__title {
	font-size: 1.0625rem;
	font-family: var(--lj-font-body);
	font-weight: 500;
}

/* Kategorie-Kacheln */
.lj-cat {
	list-style: none;
}

.lj-cat__link { display: block; text-decoration: none; }
.lj-cat__media { display: block; margin-bottom: .85rem; }

/* Hält die Fläche frei, solange eine Kategorie kein Bild hat. Das Verhältnis
   gibt jetzt .lj-cat__media vor — ein eigenes würde in der quadratischen
   Fläche eine Lücke unter dem Platzhalter lassen. */
.lj-cat__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--lj-paper-deep);
	border-radius: var(--lj-radius);
}

.lj-cat__title {
	display: block;
	font-family: var(--lj-font-display);
	font-weight: 300;
}

.lj-cat__link:hover .lj-cat__title { color: var(--lj-ocker-deep); }

.lj-cat__count {
	display: block;
	margin-top: .15rem;
	color: var(--lj-ink-faint);
}

/* "Über mich" auf der Startseite */
.lj-about {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

.lj-about__title { margin-block: .35rem .75rem; }
.lj-about__text { color: var(--lj-ink-soft); max-width: var(--lj-measure); }
.lj-about__actions { margin-top: 1.1rem; }

/* === 11  MALSTUFEN (Spec 3.4) === */

.lj-stages-block__head {
	max-width: var(--lj-measure);
}

.lj-stages-block__title-link { text-decoration: none; }
.lj-stages-block__title-link:hover { box-shadow: inset 0 -1px 0 0 var(--lj-ocker); }
.lj-stages-block__intro { margin-top: .75rem; }

/* GRUNDFASSUNG (alle Breiten, ohne Skript, bei reduced motion): Bild und
   Text abwechselnd. Ohne Bild-Duplikat: media/stack/text werden mit
   display:contents aufgelöst, die Kinder per order verzahnt. */
.lj-stages {
	display: grid;
	grid-template-columns: 1fr;
}

.lj-stages__media,
.lj-stages__stack,
.lj-stages__text {
	display: contents;
}

.lj-stages__dots { display: none; }
.lj-stages__frame { margin-bottom: 1.25rem; }

/* Eine Stufe ohne Bild darf im Fluss keinen leeren Kasten hinterlassen. */
.lj-stages__frame--empty {
	display: none;
}

.lj-stages__step { margin-bottom: clamp(2.5rem, 7vw, 4rem); max-width: var(--lj-measure); }

/* Verzahnung Bild N -> Text N, für beliebig viele Stufen: jede Stufe bringt
   ihre Position selbst mit (--lj-stage-order, gesetzt in
   parts/section-stages.php). Die frühere Aufzählung nth-child(1..12) hat ab
   der 13. Stufe erst alle Bilder und dann alle Texte gezeigt.
   Im aufgewerteten Desktop-Zustand ist order wirkungslos — dort sind Rahmen
   und Texte keine Kinder des Grids mehr, sondern liegen in ihren eigenen
   Containern. */
.lj-stages__frame,
.lj-stages__step {
	order: var(--lj-stage-order, 0);
}

.lj-stages__label {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	color: var(--lj-ink-faint);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .8125rem;
	margin-bottom: .35rem;
}

.lj-stages__duration::before { content: "\00B7"; margin-right: .5rem; }
.lj-stages__title { margin-bottom: .6rem; }
.lj-stages__body > * + * { margin-top: .9em; }

/* Punkte: Anker, keine Knöpfe — sie funktionieren auch ohne Skript. */
.lj-stages__dots-item {
	list-style: none;
}

.lj-stages__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	text-decoration: none;
}

.lj-stages__dot::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1px solid var(--lj-ink-faint);
	background: transparent;
	transition: background-color var(--lj-dur) var(--lj-ease),
	            border-color var(--lj-dur) var(--lj-ease),
	            transform var(--lj-dur) var(--lj-ease);
}

.lj-stages__dot:hover::before { border-color: var(--lj-ocker-deep); }

.lj-stages__dot.is-active::before {
	background: var(--lj-ocker-deep);
	border-color: var(--lj-ocker-deep);
	transform: scale(1.35);
}

/* Ergebnisblock (nur Vollansicht) */
.lj-stages-result {
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.lj-stages-result__text { max-width: var(--lj-measure); margin-top: 1.5rem; }
.lj-stages-result__text > * + * { margin-top: .9em; }
.lj-story__intro { margin-top: .85rem; max-width: var(--lj-measure); }
.lj-story__content { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.lj-story__stages { padding-block: clamp(1rem, 3vw, 2rem); }

/* === 12  KURSE === */

.lj-courses__group {
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.lj-courses__group + .lj-courses__group { border-top: 1px solid var(--lj-paper-edge); }
.lj-courses__group-title { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.lj-courses__group--upcoming .lj-courses__list { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }

.lj-status {
	display: inline-block;
	padding: .2rem .6rem;
	border-radius: var(--lj-radius);
	font-family: var(--lj-font-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--lj-paper-deep);
	color: var(--lj-ink-soft);
}

.lj-status--upcoming { background: var(--lj-ocker-wash); color: var(--lj-ocker-deep); }
.lj-status--ondemand { background: var(--lj-sage-wash); color: var(--lj-ink); }
.lj-status--request { background: var(--lj-paper-deep); color: var(--lj-ink-soft); }

.lj-status--past {
	background: transparent;
	color: var(--lj-ink-faint);
	box-shadow: inset 0 0 0 1px var(--lj-paper-edge);
}

.lj-course__status { margin-bottom: .9rem; }
.lj-course__date { margin-top: .85rem; color: var(--lj-ink-soft); }
.lj-course__media { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.lj-course__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

.lj-course__material {
	margin-top: 2rem;
	padding: 1.25rem 1.4rem;
	background: var(--lj-paper-deep);
	border-radius: var(--lj-radius);
}

.lj-course__material-text > * + * { margin-top: .8em; }
.lj-course__material h2 { margin-bottom: .6rem; }

.lj-course__aside {
	padding: 1.35rem 1.5rem;
	background: var(--lj-paper-deep);
	border-radius: var(--lj-radius);
}

.lj-course__aside-title { margin-bottom: 1rem; }
.lj-course-facts { display: grid; gap: .5rem; }

.lj-course-facts__row,
.lj-work-meta__row {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: .5rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--lj-paper-edge);
}

.lj-course-facts__row:last-child,
.lj-work-meta__row:last-child { border-bottom: 0; padding-bottom: 0; }
.lj-course-facts__key,
.lj-work-meta__key { color: var(--lj-ink-faint); }
.lj-course-facts__val,
.lj-work-meta__val { margin: 0; color: var(--lj-ink); }

.lj-course__address {
	display: block;
	margin-top: 1rem;
	font-style: normal;
	color: var(--lj-ink-soft);
}

.lj-course__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.25rem;
}

.lj-course__note { margin-top: 1rem; color: var(--lj-ink-soft); }

/* Bisherige Kurse: <details>, funktioniert ohne Skript. */
.lj-past {
	margin-top: clamp(2rem, 5vw, 3rem);
	border-top: 1px solid var(--lj-paper-edge);
	padding-top: 1.25rem;
}

.lj-past__summary {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	color: var(--lj-ink-soft);
}

.lj-past__summary::-webkit-details-marker { display: none; }

.lj-past__summary::before {
	content: "\203A";
	display: inline-block;
	font-size: 1.4em;
	line-height: 1;
	color: var(--lj-ocker-deep);
	transition: transform var(--lj-dur) var(--lj-ease);
}

.lj-past[open] .lj-past__summary::before { transform: rotate(90deg); }
.lj-past__list { margin-top: 1rem; }

/* === 13  WERK-EINZELANSICHT, FILTER, GENRES === */

.lj-work__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 5vw, 3.5rem);
	align-items: start;
	padding-block: clamp(1rem, 3vw, 2rem);
}

.lj-work__title { margin-bottom: .6rem; }
.lj-work__genres { margin-bottom: 1.1rem; }
.lj-work__desc { margin-bottom: 1.5rem; }

.lj-work-meta {
	display: grid;
	gap: .5rem;
	margin-bottom: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--lj-paper-edge);
}

.lj-work__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1rem;
}

.lj-work__hint { color: var(--lj-ink-soft); }

.lj-work__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	padding-block: clamp(1.5rem, 4vw, 2.5rem);
	border-top: 1px solid var(--lj-paper-edge);
}

.lj-work__nav-link {
	display: block;
	max-width: 22ch;
	text-decoration: none;
}

.lj-work__nav-link--next { margin-left: auto; text-align: right; }
.lj-work__nav-label { display: block; color: var(--lj-ink-faint); }

.lj-work__nav-title {
	display: block;
	font-family: var(--lj-font-display);
	font-size: 1.25rem;
	line-height: 1.2;
}

.lj-work__nav-link:hover .lj-work__nav-title { color: var(--lj-ocker-deep); }
.lj-genre { color: var(--lj-ink-faint); }

.lj-genre__link {
	color: var(--lj-ink-soft);
	text-decoration: underline;
	text-decoration-color: var(--lj-paper-edge);
	text-underline-offset: .2em;
}

/* Filterleiste: umbruchfähig, kein versteckter Scroll-Container. */
.lj-filter {
	padding-block: .5rem 1.5rem;
}

.lj-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lj-filter__link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 44px;
	padding: .35rem .9rem;
	border: 1px solid var(--lj-paper-edge);
	border-radius: var(--lj-radius);
	text-decoration: none;
	font-size: .9375rem;
	transition: background-color var(--lj-dur-fast) var(--lj-ease),
	            border-color var(--lj-dur-fast) var(--lj-ease),
	            color var(--lj-dur-fast) var(--lj-ease);
}

.lj-filter__link:hover { border-color: var(--lj-ink-faint); background: var(--lj-paper-deep); }

.lj-filter__link.is-current,
.lj-filter__link[aria-current="page"] {
	background: var(--lj-ocker-wash);
	border-color: var(--lj-ocker);
	color: var(--lj-ocker-deep);
	font-weight: 500;
}

.lj-filter__count { color: var(--lj-ink-faint); }

.lj-filter__link.is-current .lj-filter__count,
.lj-filter__link[aria-current="page"] .lj-filter__count {
	color: var(--lj-ocker-deep);
}

/* === 14  FORMULAR, SUCHE, NEWSLETTER, KONTAKT === */

.lj-contact,
.lj-contact-block {
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.lj-contact__title { margin-bottom: 1.25rem; }

.lj-form {
	display: grid;
	gap: 1.15rem;
	max-width: 40rem;
}

.lj-form__row { display: grid; gap: .35rem; }
.lj-form__label { font-size: .9375rem; font-weight: 500; }

.lj-form__input,
.lj-form__select,
.lj-form__textarea {
	width: 100%;
	padding: .7rem .85rem;
	background: var(--lj-white);
	border: 1px solid var(--lj-paper-edge);
	border-radius: var(--lj-radius);
	color: var(--lj-ink);
	/* 1rem verhindert das automatische Hineinzoomen von iOS-Safari. */
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color var(--lj-dur-fast) var(--lj-ease);
}

.lj-form__textarea { min-height: 10rem; resize: vertical; }

.lj-form__input:hover,
.lj-form__select:hover,
.lj-form__textarea:hover {
	border-color: var(--lj-ink-faint);
}

.lj-form__input:focus,
.lj-form__select:focus,
.lj-form__textarea:focus {
	border-color: var(--lj-ocker-deep);
}

/* Honeypot: der Inline-Stil im Markup versteckt das Feld schon. Hier nur
   nachgezogen, nie gelockert — sonst wäre die Falle sichtbar. */
.lj-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.lj-form__privacy { color: var(--lj-ink-soft); max-width: var(--lj-measure); }
.lj-form__privacy-link { color: var(--lj-ink); }
.lj-form__actions { margin-top: .25rem; }

/* Meldung: Farbe ist nie der alleinige Bedeutungsträger, der Text steht dabei. */
.lj-notice {
	margin-bottom: 1.5rem;
	padding: .9rem 1.1rem;
	border-left: 3px solid var(--lj-ink-faint);
	background: var(--lj-paper-deep);
	border-radius: var(--lj-radius);
}

.lj-notice--success { border-left-color: var(--lj-success); color: var(--lj-ink); }
.lj-notice--error { border-left-color: var(--lj-error); color: var(--lj-error); }

.lj-contact-page {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
	padding-bottom: clamp(2rem, 5vw, 3.5rem);
	max-width: 44rem;
	margin-inline: auto;
}

.lj-search__field {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.lj-search__input {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .7rem .85rem;
	background: var(--lj-white);
	border: 1px solid var(--lj-paper-edge);
	border-radius: var(--lj-radius);
	font-size: 1rem;
}

.lj-search__input:focus { border-color: var(--lj-ocker-deep); }

.lj-search__submit {
	background: var(--lj-ink);
	color: var(--lj-white);
	border-color: var(--lj-ink);
	flex: 0 0 auto;
}

.lj-search__submit:hover {
	background: var(--lj-ocker-deep);
	border-color: var(--lj-ocker-deep);
	color: var(--lj-white);
}

.lj-search-page__form { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); max-width: 32rem; }

/* Newsletter als warme Abschlussfläche */
.lj-newsletter {
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
	padding: clamp(1.75rem, 5vw, 3rem);
	background: var(--lj-ocker-wash);
	border-radius: var(--lj-radius);
}

.lj-newsletter__inner { max-width: var(--lj-measure); }
.lj-newsletter__text { margin-top: .85rem; color: var(--lj-ink); }
.lj-newsletter__actions { margin-top: 1.5rem; }
.lj-newsletter__note { margin-top: 1rem; color: var(--lj-ink-soft); }

/* Anmeldeformular (nur bei aktiver Brücke zum Büro). Erbt .lj-form vom
   Kontaktformular, hier nur die Unterschiede auf der ockernen Fläche. */
.lj-newsletter__form { margin-top: 1.5rem; max-width: 34rem; gap: 1rem; }

/* Zwei Felder nebeneinander, sobald Platz ist. Unter 30rem bleibt gestapelt —
   ein 12 Zeichen breites E-Mail-Feld hilft niemandem. */
.lj-newsletter__fields {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

/* Die Felder stehen auf Ocker: der Papierrand verschwände darauf fast. */
.lj-newsletter__form .lj-form__input { border-color: var(--lj-ink-faint); }
.lj-newsletter__form .lj-form__input:focus { border-color: var(--lj-ocker-deep); }

/* Der Einwilligungstext ist Beweisstück, kein Kleingedrucktes: normale
   Textfarbe, volle Lesbarkeit, nur etwas kleiner als der Fließtext. */
.lj-newsletter__consent {
	margin-top: .25rem;
	color: var(--lj-ink);
	line-height: 1.55;
}

.lj-newsletter__privacy-link { color: var(--lj-ink); }

/* Die Meldung steht über dem Formular, nicht darin — heller Grund, damit sie
   sich von der ockernen Fläche abhebt. */
.lj-newsletter .lj-notice { margin-top: 1.5rem; margin-bottom: 0; background: var(--lj-white); }

/* === 15  BROTKRUMEN, BLÄTTERUNG, LEERZUSTÄNDE, 404, SUCHERGEBNISSE === */

.lj-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--lj-ink-faint);
}

.lj-breadcrumbs__item + .lj-breadcrumbs__item::before {
	content: "/";
	margin-right: .35rem;
	color: var(--lj-paper-edge);
}

.lj-breadcrumbs__link { color: var(--lj-ink-soft); text-decoration: none; }
.lj-breadcrumbs__link:hover { color: var(--lj-ocker-deep); text-decoration: underline; }
.lj-breadcrumbs__current { color: var(--lj-ink-faint); }

/* Blätterung — WordPress erzeugt .nav-links / .page-numbers selbst. */
.lj-pagination {
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.lj-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .4rem;
}

.lj-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: .25rem .7rem;
	border: 1px solid transparent;
	border-radius: var(--lj-radius);
	text-decoration: none;
	font-size: .9375rem;
}

.lj-pagination a.page-numbers:hover {
	background: var(--lj-paper-deep);
	border-color: var(--lj-paper-edge);
}

.lj-pagination .page-numbers.current {
	background: var(--lj-ocker-wash);
	border-color: var(--lj-ocker);
	color: var(--lj-ocker-deep);
	font-weight: 600;
}

.lj-pagination .page-numbers.dots { min-width: 0; color: var(--lj-ink-faint); }

.lj-pagelinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--lj-paper-edge);
}

.lj-pagelinks__label { color: var(--lj-ink-faint); }

.lj-pagelinks__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	border: 1px solid var(--lj-paper-edge);
	border-radius: var(--lj-radius);
}

.lj-empty {
	margin-block: clamp(2rem, 6vw, 4rem);
	text-align: center;
	color: var(--lj-ink-soft);
}

.lj-empty__actions { margin-bottom: clamp(2rem, 6vw, 4rem); text-align: center; }
.lj-404 { padding-bottom: clamp(2rem, 6vw, 4rem); }
.lj-404__search { margin-bottom: 1.5rem; max-width: 32rem; }

.lj-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.lj-404__suggestions > .lj-t-h3 { margin-bottom: 1.25rem; }

.lj-results {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lj-result { border-top: 1px solid var(--lj-paper-edge); }
.lj-result:last-child { border-bottom: 1px solid var(--lj-paper-edge); }
.lj-result__inner { padding-block: 1.35rem; }

.lj-result__type {
	color: var(--lj-ink-faint);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .8125rem;
	margin-bottom: .3rem;
}

.lj-result__title { margin-bottom: .35rem; }
.lj-result__link { text-decoration: none; }
.lj-result__link:hover { box-shadow: inset 0 -1px 0 0 var(--lj-ocker); }
.lj-result__excerpt { color: var(--lj-ink-soft); max-width: var(--lj-measure); }

/* === 16  LIGHTBOX — Markup erzeugt das Skript, deshalb steht sie hier komplett === */

/* Zoomknopf im figure; das Skript setzt is-zoomable. Klasse statt :has(),
   damit die Regel auch in älteren Browsern greift. */
.lj-artwork.is-zoomable {
	position: relative;
}

/* Symbol in Knöpfen (Lupe, Lightbox-Pfeile, Schließen). Die Größe steht am
   SVG selbst; flex: none verhindert nur, dass ein enger Knopf es staucht. */
.lj-symbol {
	flex: none;
	display: block;
}

.lj-zoom {
	position: absolute;
	right: .6rem;
	bottom: .6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .75rem;
	background: var(--lj-paper);
	border: 1px solid var(--lj-paper-edge);
	border-radius: var(--lj-radius);
	color: var(--lj-ink);
	font-size: .875rem;
	opacity: .85;
	transition: opacity var(--lj-dur-fast) var(--lj-ease),
	            background-color var(--lj-dur-fast) var(--lj-ease);
}

.lj-zoom:hover,
.lj-zoom:focus-visible {
	opacity: 1;
	background: var(--lj-white);
}

.lj-lightbox[hidden] { display: none; }

.lj-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(1, 43, 85, .92);
}

.lj-lightbox__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	max-width: 100%;
	max-height: 100%;
}

.lj-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	background: var(--lj-paper);
	border-radius: var(--lj-radius);
}

.lj-lightbox__caption {
	max-width: 60ch;
	color: var(--lj-paper);
	font-size: .9375rem;
	text-align: center;
}

.lj-lightbox__close,
.lj-lightbox__prev,
.lj-lightbox__next {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: .35rem .8rem;
	background: transparent;
	border: 1px solid rgba(250, 247, 241, .4);
	border-radius: var(--lj-radius);
	color: var(--lj-paper);
	font-size: 1.1rem;
	line-height: 1;
}

.lj-lightbox__close:hover,
.lj-lightbox__prev:hover,
.lj-lightbox__next:hover {
	background: rgba(250, 247, 241, .14);
	border-color: var(--lj-paper);
}

.lj-lightbox__close:focus-visible,
.lj-lightbox__prev:focus-visible,
.lj-lightbox__next:focus-visible {
	outline-color: var(--lj-ocker);
}

.lj-lightbox__close { top: 1rem; right: 1rem; }

.lj-lightbox__prev {
	left: .5rem;
	top: 50%;
	transform: translateY(-50%);
}

.lj-lightbox__next {
	right: .5rem;
	top: 50%;
	transform: translateY(-50%);
}

.lj-scroll-lock { overflow: hidden; }

/* === 17  Fußzeile === */

.lj-footer {
	background: var(--lj-paper-deep);
	padding-bottom: 1.5rem;
}

.lj-footer .lj-rule {
	color: var(--lj-paper-edge);
	padding-inline: 0;
	max-width: none;
}

.lj-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 4vw, 3rem);
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
}

.lj-footer__title {
	margin-bottom: .6rem;
	color: var(--lj-ink-faint);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .8125rem;
	font-family: var(--lj-font-body);
	font-weight: 600;
}

.lj-footer__col--about .lj-footer__title {
	font-family: var(--lj-font-display);
	font-weight: 300;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--lj-ink);
}

.lj-footer__about { color: var(--lj-ink-soft); max-width: 32ch; }

.lj-footer__legal-list,
.lj-footer__links,
.lj-footer__social-list {
	display: grid;
	gap: .1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.lj-footer__legal-item,
.lj-footer__links-item,
.lj-footer__social-item,
.lj-footer .menu-item {
	list-style: none;
}

/* --lj-ink-faint erreicht auf --lj-paper-deep keine 4.5:1 — Fußzeilen-
   links bekommen deshalb nie die blasse Farbe. */
.lj-footer__link,
.lj-footer__social-link,
.lj-footer .menu-item > a {
	display: inline-block;
	padding: .35rem 0;
	color: var(--lj-ink-soft);
	text-decoration: none;
	font-size: .9375rem;
}

.lj-footer__link:hover,
.lj-footer__social-link:hover,
.lj-footer .menu-item > a:hover {
	color: var(--lj-ocker-deep);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.lj-footer__bottom { padding-top: 1.25rem; border-top: 1px solid var(--lj-paper-edge); }
.lj-footer__copy { color: var(--lj-ink-faint); }

/* === 18  UTILITIES UND WORDPRESS-CORE-KLASSEN === */

/* Versteckt, aber fokussierbar — daher :not(:focus):not(:focus-within). */
.lj-visually-hidden:not(:focus):not(:focus-within),
.screen-reader-text:not(:focus):not(:focus-within) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.alignleft { float: left; margin: .35rem 1.25rem 1rem 0; }
.alignright { float: right; margin: .35rem 0 1rem 1.25rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }

.wp-caption img {
	display: block;
	height: auto;
	width: 100%;
}

.wp-caption-text {
	margin-top: .5rem;
	color: var(--lj-ink-faint);
	font-size: .9375rem;
}

/* === 19  BREAKPOINTS  640 / 960 / 1280 === */

@media (min-width: 640px) {

	.lj-grid--2,
	.lj-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lj-card--featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.lj-about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.lj-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lj-work__nav-link { max-width: 30ch; }
}

@media (min-width: 900px) {

	/* Ab hier steht die Navigation immer offen — der Knopf hat keine Aufgabe mehr. */
	.lj-nav__toggle,
	.lj-js .lj-nav__toggle {
		display: none;
	}

	.lj-nav__panel,
	.lj-js .lj-nav__panel,
	.lj-js .lj-nav__toggle[aria-expanded="true"] + .lj-nav__panel {
		display: flex;
		position: static;
		align-items: center;
		gap: 1.5rem;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.lj-nav__list {
		flex-direction: row;
		align-items: center;
		gap: 1.35rem;
	}

	.lj-nav__link,
	.lj-nav .menu-item > a {
		padding: .35rem 0;
		font-size: .9375rem;
		letter-spacing: .03em;
	}

	/* Ein Hover-Aufklapper ohne Tastaturpfad wäre eine Barriere — Verstecken
	   ohne Ersatzweg war aber die schlimmere Antwort darauf: die Einträge waren
	   ab hier weder sichtbar noch mit der Tastatur erreichbar. Die Navigation
	   gibt jetzt nur noch eine Ebene aus ('depth' => 1 in nav-primary.php).
	   Kommt über einen Filter doch eine zweite, steht sie als eingerückte Liste
	   unter ihrem Eintrag: unschön, aber bedienbar. */
	.lj-nav .sub-menu {
		display: block;
		padding-left: .9rem;
	}

	.lj-brand__tagline { display: block; }
}

@media (min-width: 960px) {

	.lj-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.lj-hero__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}

	.lj-work__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.lj-work__body { position: sticky; top: var(--lj-stapel); }
	.lj-course__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
	.lj-course__aside { position: sticky; top: var(--lj-stapel); }
	/* Kontakt bleibt einspaltig und mittig (Feedback 14.9.2026: „Das Formular
	   könnte etwas weiter in die Mitte rücken"). */

	/* Die Aufwertung greift NUR mit .is-enhanced — also nur, wenn das Skript
	   läuft und weder reduced motion noch ein schmaler Schirm dagegen
	   sprechen. Sonst bleibt die verzahnte Grundfassung stehen. */
	.lj-stages.is-enhanced {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		column-gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
	}

	.lj-stages.is-enhanced .lj-stages__media {
		display: flex;
		gap: clamp(.5rem, 1.5vw, 1rem);
		align-items: stretch;
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: var(--lj-stapel);

		/* Dieser Hintergrund sieht aus wie nichts und ist trotzdem nötig.
		   Grund: position: sticky erzeugt immer einen eigenen Stacking Context
		   — anders als opacity oder transform steht das nirgends auffällig,
		   weil man sticky für reines Layout hält. Die Stufenbilder darin
		   blenden mit mix-blend-mode: multiply. Ohne diese Zeile ist ihr
		   Hintergrund nicht das Papier der Seite, sondern das Weiß des
		   Kontextes: Die freigestellten Zeichnungen bekommen einen sichtbaren
		   weißen Kasten, und zwar nur hier und nur ab dieser Breite.
		   Der gestrichene Papierton innerhalb des Kontextes stellt die
		   Rechnung wieder her — multiply gegen #FAF7F1 statt gegen #FFFFFF. */
		background: var(--lj-paper);
	}

	.lj-stages.is-enhanced .lj-stages__text {
		display: block;
		grid-column: 2;
		grid-row: 1;
	}

	/* Fester Bildkasten: die Stufenfotos haben verschiedene Formate. Ohne
	   feste Fläche springt die Spalte beim Umschalten (Spec 7: kein CLS). */
	.lj-stages.is-enhanced .lj-stages__stack {
		display: block;
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
		aspect-ratio: 5 / 4;
		max-height: 74vh;
	}

	/* visibility zusätzlich zu opacity: ein nur durchsichtiger Rahmen bliebe
	   für Tastatur und Screenreader erreichbar. */
	.lj-stages.is-enhanced .lj-stages__frame {
		position: absolute;
		inset: 0;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--lj-dur) var(--lj-ease), visibility 0s linear var(--lj-dur);

		/* Zweiter Papierton, aus demselben Grund wie oben bei __media — hier
		   aber wegen der Überblendung selbst.

		   Während der 320 ms, in denen ein Rahmen von 0 auf 1 blendet, liegt
		   seine Opazität zwischen 0 und 1. Genau dann erzeugt er einen eigenen
		   Stacking Context, und das multiply des Bildes rechnet plötzlich gegen
		   Weiß statt gegen Papier: Bei JEDEM Stufenwechsel blitzt hinter der
		   Zeichnung ein weißer Kasten auf. Danach steht die Opazität wieder auf
		   exakt 1, der Kontext verschwindet, und alles sieht wieder richtig aus
		   — weshalb man es im Standbild nicht findet, sondern nur in Bewegung.

		   Der Papierton im Rahmen macht den Kontext unschädlich: Das Bild
		   blendet gegen dieselbe Farbe, die auch darunter liegt. */
		background: var(--lj-paper);
	}

	.lj-stages.is-enhanced .lj-stages__frame.is-active {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--lj-dur) var(--lj-ease), visibility 0s;
	}

	.lj-stages.is-enhanced .lj-stages__frame .lj-artwork,
	.lj-stages.is-enhanced .lj-stages__frame .lj-artwork__pic {
		height: 100%;
	}

	.lj-stages.is-enhanced .lj-stages__frame .lj-artwork__img {
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

	.lj-stages.is-enhanced .lj-stages__dots {
		display: flex;
		order: -1;
		flex: 0 0 auto;
		flex-direction: column;
		justify-content: center;
		gap: .1rem;
	}

	/* Fast eine Bildschirmhöhe je Schritt — sonst schaltet der Beobachter
	   mit rootMargin -45%/-45% nicht eindeutig. */
	.lj-stages.is-enhanced .lj-stages__step {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 88vh;
		margin-bottom: 0;
		padding-block: 2rem;
	}

	.lj-footer__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.lj-card--compact .lj-card__body {
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 100%;
	}
}

@media (min-width: 1280px) {

	.lj-hero { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
	/* Vierte Spalte: sonst werden die Werke unnötig groß. */
	.lj-gallery.lj-grid--3 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Kursangaben nebeneinander: ab dieser Breite ist Platz für zwei Spalten. */
	.lj-course-facts__row {
		display: grid;
		grid-template-columns: minmax(9rem, 14rem) 1fr;
		gap: .25rem 1.5rem;
	}
}

/* === 20  PREFERS-REDUCED-MOTION — Pflichtblock nach Spec 1.4, ganz am Ende === */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	[data-lj-bloom] {
		opacity: 1 !important;
		/* transform statt mask: der Bloom arbeitet nicht mehr mit einer Maske,
		   sondern mit 8 px von unten. Ohne diese Zeile stünde jedes Werk
		   dauerhaft acht Pixel zu tief. */
		transform: none !important;
	}

	[data-lj-drawon] { stroke-dashoffset: 0 !important; }

	/*
	 * Klebebandrand und Kanten-Grammatik brauchen hier nichts: Beide bewegen
	 * sich nie. Das Blütenband ebenso wenig — es ist ein Flex-Container ohne
	 * Animation. Sie stehen trotzdem in diesem Kommentar, damit der nächste
	 * Mensch nicht suchen muss, ob sie vergessen wurden.
	 *
	 * Regel 4 des Leitfadens ist damit erfüllt: Die Seite erzählt bei
	 * reduzierter Bewegung dasselbe. Die Kanten werden weiter nach unten
	 * härter, das Band wird weiter dichter, der Termin steht weiter oben.
	 * Verloren geht nur, dass die Linien sich zeichnen — und die Linie sagt
	 * fertig dasselbe wie beim Entstehen.
	 */
}


/* ==========================================================================
   Ergänzungen November 2026: Sprachweiche, Kursarten, Angebote, Stimmen
   ========================================================================== */

/* Sprachweiche „DE · EN" im Kopf. Klein und ruhig: Sie ist eine Einstellung,
   kein Ziel der Navigation. 44 px Trefferfläche wie alle Bedienelemente. */
.lj-lang__list {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lj-lang__item + .lj-lang__item::before {
	content: "·";
	color: var(--lj-ink-faint);
	margin-right: .25rem;
}
.lj-lang__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	font-size: .8125rem;
	letter-spacing: .06em;
	color: var(--lj-ink-soft);
	text-decoration: none;
}
.lj-lang__link:hover { color: var(--lj-ink); text-decoration: underline; }
.lj-lang__link.is-current { color: var(--lj-ink); font-weight: 600; }

/* Sprungmarken zu den Kursarten. Auf dem Handy waagerecht wischbar statt
   umbrechend — drei Knöpfe übereinander wären eine zweite Navigation. */
.lj-chips {
	display: flex;
	gap: .5rem;
	margin-top: 1.25rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.lj-chips::-webkit-scrollbar { display: none; }
.lj-chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--lj-ink);
	border-radius: 999px;
	color: var(--lj-ink);
	font-size: .9375rem;
	text-decoration: none;
	background: var(--lj-paper);
}
.lj-chip:hover { background: var(--lj-paper-deep); }

.lj-courses__group-lead {
	max-width: var(--lj-measure);
	margin: -.25rem 0 1.5rem;
	color: var(--lj-ink-soft);
}

/* Hinweis bei Kursen ohne Termin: Bleistiftkante, weil unverbindlich
   (Leitfaden, Regel 2: die Kante sagt, wie verbindlich etwas ist). */
.lj-card__note {
	margin-top: .75rem;
	padding-left: .75rem;
	border-left: 1px dashed var(--lj-line-bleistift);
	color: var(--lj-ink-soft);
}

/* Ablauf in drei Schritten (Weitere Angebote). */
.lj-steps {
	display: grid;
	gap: 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: lj-schritt;
}
.lj-steps__item {
	display: grid;
	gap: .25rem;
	padding-left: 3rem;
	position: relative;
	counter-increment: lj-schritt;
}
.lj-steps__item::before {
	content: counter(lj-schritt);
	position: absolute;
	left: 0;
	top: 0;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--lj-ink);
	border-radius: 50%;
	font-family: var(--lj-font-display);
	font-size: 1.125rem;
	color: var(--lj-ink);
}
@media (min-width: 900px) {
	.lj-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lj-offers h2 { margin-top: 2.5rem; }
.lj-offers h3 { margin-top: 1.75rem; }

/* Stimmen von Teilnehmenden. */
.lj-voices {
	margin-top: 2.5rem;
	display: grid;
	gap: 1.25rem;
}
.lj-voice {
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--lj-paper-deep);
	border-radius: var(--lj-radius);
}
.lj-voice__quote { margin: 0; }
.lj-voice__quote p {
	margin: 0;
	font-family: var(--lj-font-display);
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--lj-ink);
}
.lj-voice__name { margin-top: .5rem; color: var(--lj-ink-soft); }

/* Malstufen als Story (Handy) und Stop-Motion. Nur unter 960 px: darüber
   übernimmt die klebende Stufenansicht beim Scrollen dieselbe Aufgabe.
   Regel 3: kein Rahmen, kein Schatten um das Bild — die Bühne ist Papier.
   Regel 1: Text steht darunter auf unberührtem Papier, nie auf dem Bild. */
.lj-stopmotion { margin-bottom: 2rem; }
.lj-stopmotion[hidden] { display: none; }

.lj-stopmotion__bars {
	display: flex;
	gap: 4px;
	margin-bottom: .75rem;
}
.lj-stopmotion__seg {
	flex: 1;
	height: 2px;
	background: var(--lj-line-bleistift);
}
/* Kein Hochzählen, keine laufende Füllung: der Balken springt — Bewegung
   hat hier nur das Bild. */
.lj-stopmotion__seg.is-done { background: var(--lj-ink); }

.lj-stopmotion__stage {
	position: relative;
	/* Fast Vollbild: so hoch, dass Bild und eine Zeile Text zusammen auf den
	   Schirm passen. */
	height: min(68svh, 150vw);
	margin-inline: auto;
	/* Papierton als eigene Fläche: multiply braucht einen Grund (siehe
	   .lj-stages__media), sonst bekommen die Zeichnungen weiße Kästen. */
	background: var(--lj-paper);
	isolation: isolate;
	touch-action: pan-y;   /* senkrecht scrollt die Seite, waagerecht wischt die Story */
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
}
.lj-stopmotion__stage:focus-visible { outline: 2px solid var(--lj-ocker-deep); outline-offset: 4px; }
.lj-stopmotion__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 320ms ease-out;
	pointer-events: none;
	-webkit-user-drag: none;
}
.lj-stopmotion__img.is-on { opacity: 1; }

.lj-stopmotion__caption {
	min-height: 6.5rem;
	margin-top: 1rem;
	max-width: var(--lj-measure);
}
.lj-stopmotion__caption .lj-stages__duration {
	display: block;
	font-size: .8125rem;
	letter-spacing: .04em;
	color: var(--lj-ink-soft);
}
.lj-stopmotion__caption .lj-stages__duration::before { content: none; }
.lj-stopmotion__caption .lj-stages__title { margin: .2rem 0 .4rem; }

.lj-stopmotion__cta { margin: .5rem 0 1rem; }
.lj-stopmotion__cta[hidden] { display: none; }
.lj-stopmotion__cta .lj-btn { width: 100%; justify-content: center; text-align: center; }

.lj-stopmotion__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-top: .5rem;
}
.lj-stopmotion__nav {
	min-width: 44px;
	min-height: 44px;
	border: 1px solid var(--lj-ink);
	border-radius: 50%;
	background: transparent;
	color: var(--lj-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.lj-stopmotion__nav:disabled { opacity: .3; cursor: default; }

/* Läuft die Story, ersetzt sie auf dem Handy die lange Liste. Ohne Skript
   bekommt der Block die Klasse nie, und die Liste bleibt stehen. */
@media (max-width: 959px) {
	.lj-stages.has-story { display: none; }
}
@media (min-width: 960px) {
	.lj-stopmotion { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.lj-stopmotion { display: none; }
}

/* Newsletter: Feld und Knopf in einer Zeile. */
.lj-newsletter__row {
	display: flex;
	gap: .5rem;
	margin-top: .35rem;
}
.lj-newsletter__row .lj-form__input { flex: 1 1 auto; min-width: 0; }
.lj-newsletter__row .lj-btn { flex: none; padding-inline: 1.1rem; }

/* Vom Bild zum Kurs. Ohne Skript und unter 960 px: Bild, dann die Sätze
   untereinander. Text steht auf Papier, nie auf dem Bild (Regel 1); um das
   Bild kein Rahmen, kein Schatten (Regel 3). */
.lj-path__inner { display: grid; gap: 2rem; }
.lj-path__step { padding-block: 1.25rem; max-width: 34rem; }
.lj-path__text { margin: .25rem 0 0; }
.lj-path__cta { margin-top: 1.5rem; }

@media (min-width: 960px) {
	.lj-path__inner {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		column-gap: clamp(2rem, 5vw, 4rem);
		align-items: start;
	}
	/* Das Bild klebt, während die Sätze vorbeiziehen. Papierton als Grund aus
	   demselben Grund wie bei .lj-stages__media: sticky erzeugt einen eigenen
	   Stacking Context, multiply braucht darin einen Hintergrund. */
	.lj-path__media {
		position: sticky;
		top: var(--lj-stapel);
		background: var(--lj-paper);
	}
	.lj-path__step {
		min-height: 62vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	/* Nur mit Skript: Der Satz in der Mitte steht voll da, die anderen leise.
	   Die Blende gilt nur beim Ankommen — ein Satz bewegt sich, nicht zwei. */
	.lj-path.is-enhanced .lj-path__step { opacity: .28; }
	.lj-path.is-enhanced .lj-path__step.is-active { opacity: 1; transition: opacity 320ms ease-out; }
}

/* Reels: hochkant, randlos, nebeneinander; auf dem Handy wischbar. */
.lj-reels__list {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.lj-reels__list::-webkit-scrollbar { display: none; }
.lj-reel {
	flex: 0 0 min(78vw, 22rem);
	margin: 0;
	scroll-snap-align: center;
}
.lj-reel__video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	background: var(--lj-paper-deep);
	border: 0;
}
@media (min-width: 760px) {
	.lj-reels__list { justify-content: center; overflow: visible; }
}

/* Kanten-Grammatik (Leitfaden, Regel 2): Der Kursteil bekommt eine harte
   Tuschekante, weil hier Termin, Ort und Preis verbindlich werden. Mit
   Skript zieht sie sich beim Hereinscrollen einmal auf (400 ms), ohne Skript
   ist sie einfach da. Nur border-width bewegt sich — kein Schatten. */
.lj-edge {
	border: 1.5px solid var(--lj-ink);
	padding: clamp(1.25rem, 4vw, 2.5rem);
}
.lj-js .lj-edge:not(.is-sharp) { border-width: 0; padding: calc(clamp(1.25rem, 4vw, 2.5rem) + 1.5px); }
.lj-js .lj-edge.is-sharp { transition: border-width 400ms ease-out, padding 400ms ease-out; }
@media (prefers-reduced-motion: reduce) {
	.lj-js .lj-edge.is-sharp { transition: none; }
}

/* ==========================================================================
   Foto → Bild (parts/photo-compare.php, LJ.compare in main.js)
   Aus dem Lovable-Entwurf übersetzt. Farben über die --lj-Variablen oben in
   dieser Datei; keine eigenen Hex-Werte.
   ========================================================================== */

.lj-compare {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	padding-block: clamp(3rem, 8vw, 6rem);
	color: var(--lj-ink-soft);
}
.lj-compare__kicker {
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--lj-ocker-deep);
}
.lj-compare__title { margin-top: .5rem; color: var(--lj-ink); }
.lj-compare__intro { margin-top: 1rem; max-width: 60ch; }

/* Die Bühne: kein Rahmen, kein Radius, kein Schatten (Regel 3). */
.lj-compare__stage {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--lj-paper);
	touch-action: pan-y;   /* senkrecht scrollt die Seite, waagerecht der Regler */
}
.lj-compare__photo,
.lj-compare__painting img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Das Aquarell rechts vom Teiler. clip-path erzeugt einen eigenen Stacking
   Context; der Papiergrund darin ist das, wogegen multiply rechnet — ohne ihn
   würde sich das Aquarell mit dem Foto darunter mischen (Fehler im Entwurf). */
.lj-compare__painting {
	position: absolute;
	inset: 0;
	background: var(--lj-paper);
	isolation: isolate;
	clip-path: inset(0 0 0 var(--split));
}
.lj-compare__painting img { mix-blend-mode: multiply; }

.lj-compare__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--split);
	width: 1.5px;
	transform: translateX(-50%);
	background: var(--lj-ink);
	pointer-events: none;
}
.lj-compare__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border: 1.5px solid var(--lj-ink);
	border-radius: 50%;
	background: var(--lj-paper);
	color: var(--lj-ink);
}

/* Der eigentliche Regler: unsichtbar über der ganzen Bühne, damit man
   überall ziehen kann — Maus, Finger, Tastatur. */
.lj-compare__range {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}
.lj-compare__stage:has(.lj-compare__range:focus-visible) .lj-compare__knob {
	outline: 2px solid var(--lj-ocker-deep);
	outline-offset: 3px;
}

/* Markierungen: Ziffer auf eigener Papierscheibe (Regel 1), 32 px sichtbar,
   44 px Trefferfläche über einen unsichtbaren Rand. */
.lj-compare__marker {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	transform: translate(-50%, -50%);
	border: 1px solid var(--lj-ink);
	border-radius: 50%;
	background: var(--lj-paper);
	color: var(--lj-ink);
	font-family: var(--lj-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	font-variant-numeric: lining-nums;
	cursor: pointer;
}
.lj-compare__marker::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
}
.lj-compare__marker[aria-pressed="true"] {
	border: 2px solid var(--lj-ocker);
	background: var(--lj-ocker-wash);
	transition: border-color 320ms ease-out, background-color 320ms ease-out;
}
.lj-compare__marker:focus-visible,
.lj-compare__item:focus-visible,
.lj-compare__cta:focus-visible {
	outline: 2px solid var(--lj-ocker-deep);
	outline-offset: 3px;
}

.lj-compare__labels {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .6rem;
	color: var(--lj-ink-faint);
}
.lj-compare__hint { text-align: center; }

/* Liste: Legende und zweiter Weg zu den Erklärungen (Tastatur, Screenreader). */
.lj-compare__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--lj-paper-edge);
}
.lj-compare__list li { border-bottom: 1px solid var(--lj-paper-edge); }
.lj-compare__item {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	width: 100%;
	min-height: 44px;
	padding: .75rem 0;
	border: 0;
	background: none;
	color: var(--lj-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.lj-compare__num {
	color: var(--lj-ink-faint);
	font-family: var(--lj-font-display);
	font-weight: 600;
	font-variant-numeric: lining-nums;
}
.lj-compare__item[aria-pressed="true"] .lj-compare__num { color: var(--lj-ocker-deep); }
/* Ist eine Entscheidung gewählt, treten die anderen zurück — nur mit Skript. */
.lj-compare.has-active .lj-compare__item[aria-pressed="false"] { opacity: .6; }

/* Erklärung: auf Papier, nie auf dem Bild (Regel 1). */
.lj-compare__panel {
	min-height: 10rem;
	margin-top: 2rem;
	padding: 1.5rem;
	background: var(--lj-paper-deep);
}
.lj-compare__decision + .lj-compare__decision { margin-top: 1.25rem; }
.lj-js .lj-compare__decision + .lj-compare__decision { margin-top: 0; }
.lj-compare__decision-title { color: var(--lj-ink); }
.lj-compare__decision p { margin-top: .5rem; }
.lj-compare__decision:not([hidden]),
.lj-compare__default:not([hidden]) { animation: lj-compare-ein 320ms ease-out; }
@keyframes lj-compare-ein { from { opacity: 0; } to { opacity: 1; } }

/* Die einzige harte Kante des Abschnitts: der verbindliche Schritt (Regel 2). */
.lj-compare__cta {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	min-height: 44px;
	margin-top: 2.5rem;
	padding: .75rem 1.5rem;
	border: 1.5px solid var(--lj-ink);
	color: var(--lj-ink);
	text-decoration: none;
}
.lj-compare__cta:hover { color: var(--lj-ocker-deep); }

@media (min-width: 960px) {
	.lj-compare {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		column-gap: clamp(2.5rem, 5vw, 4rem);
		align-items: start;
	}
	.lj-compare__head { grid-column: 2; grid-row: 1; }
	.lj-compare__media { grid-column: 1; grid-row: 1 / span 2; }
	.lj-compare__body { grid-column: 2; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.lj-compare__marker[aria-pressed="true"] { transition: none; }
	.lj-compare__decision:not([hidden]),
	.lj-compare__default:not([hidden]) { animation: none; }
}

/* ==========================================================================
   Verkaufsseite Onlinekurs (parts/course-ondemand.php, LJ.course in main.js)
   Aus dem Lovable-Entwurf „OnDemandCoursePage". Harte Kante nur am
   Preisblock und am Kaufknopf; Bilder randlos mit multiply; Trenner als
   Bleistiftlinien.
   ========================================================================== */

.lj-cp { color: var(--lj-ink); }
.lj-cp__section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.lj-cp__kicker { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .18em; color: var(--lj-ocker-deep); }
.lj-cp__meta { margin: 0; font-size: 13px; color: var(--lj-ink-faint); }
.lj-cp__center { text-align: center; margin-top: 2.5rem; }
.lj-cp__soft {
	display: inline-flex; align-items: center; min-height: 44px;
	padding: 0; border: 0; background: none; font: inherit; cursor: pointer;
	color: var(--lj-ink);
	text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--lj-paper-edge);
}
.lj-cp__soft:hover { color: var(--lj-ocker-deep); }
.lj-cp__pill {
	display: inline-block; padding: .1rem .75rem; border-radius: 999px;
	background: var(--lj-ocker-wash); color: var(--lj-ocker-deep); font-size: 13px;
}
.lj-cp__art { display: block; width: 100%; height: auto; mix-blend-mode: multiply; border: 0; border-radius: 0; }
.lj-cp__h2 { font-family: var(--lj-font-display); font-weight: 500; line-height: 1.15; font-size: clamp(2.25rem, 5vw, 3rem); margin: 0; font-variant-numeric: lining-nums; }
.lj-cp__intro { margin-top: .75rem; max-width: 38rem; color: var(--lj-ink-soft); }

/* Kopf */
.lj-cp__head { display: grid; gap: 2.5rem; padding-top: clamp(3rem, 7vw, 5rem); }
.lj-cp__title { font-family: var(--lj-font-display); font-weight: 500; line-height: 1.1; font-size: clamp(2.75rem, 7vw, 4.5rem); margin: 1rem 0 0; }
.lj-cp__lead { margin-top: 1.25rem; max-width: 34rem; font-size: 1.125rem; color: var(--lj-ink-soft); }
.lj-cp__head .lj-cp__meta { margin-top: 1rem; }
.lj-cp__hero { margin: 0; background: var(--lj-paper); }
@media (min-width: 960px) {
	.lj-cp__head { grid-template-columns: 55fr 45fr; align-items: center; }
}

/* Probelektion: der Play-Knopf ist das Einzige auf dem Standbild (Regel 1). */
.lj-cp__poster, .lj-cp__player video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 1.25rem; background: var(--lj-paper-deep); }
.lj-cp__poster[hidden], .lj-cp__player[hidden] { display: none; }
.lj-cp__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lj-cp__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: grid; place-items: center; width: 64px; height: 64px; padding: 0 0 0 4px;
	border: 1.5px solid var(--lj-ocker); border-radius: 50%;
	background: var(--lj-paper); color: var(--lj-ink); cursor: pointer;
}
.lj-cp__player video { object-fit: cover; }
.lj-cp__preview-title { font-family: var(--lj-font-display); font-weight: 500; font-size: 1.5rem; margin: 1.25rem 0 0; }

/* Kapitel und Fragen: Bleistiftlinien statt Kästen. */
.lj-cp__list { margin-top: 2rem; border-bottom: 1px dashed var(--lj-line-bleistift); }
.lj-cp__item { border-top: 1px dashed var(--lj-line-bleistift); }
.lj-cp__toggle {
	display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 44px;
	padding: 1.25rem 0; border: 0; background: none; font: inherit; text-align: left;
	color: var(--lj-ink); cursor: pointer;
}
.lj-cp__num { display: flex; align-items: center; gap: .5rem; flex: none; width: 2.5rem; font-family: var(--lj-font-display); font-size: 1.75rem; font-variant-numeric: lining-nums; }
.lj-cp__dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.lj-cp__toggle[aria-expanded="true"] .lj-cp__dot { background: var(--lj-ocker); }
.lj-cp__toggle-text { flex: 1; }
.lj-cp__toggle-title { display: block; font-size: 17px; font-weight: 600; }
.lj-cp__question { font-size: 17px; font-weight: 600; }
/* Plus/Minus aus zwei Strichen — das Minus ist ein Plus ohne Senkrechte. */
.lj-cp__icon { position: relative; flex: none; width: 20px; height: 20px; }
.lj-cp__icon::before, .lj-cp__icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; background: var(--lj-ink); transform: translateY(-50%); }
.lj-cp__icon::after { transform: translateY(-50%) rotate(90deg); }
.lj-cp__toggle[aria-expanded="true"] .lj-cp__icon::after { display: none; }
.lj-cp__lessons { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.lj-cp__lesson { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .75rem; padding: .75rem 1rem; background: var(--lj-paper-deep); }
.lj-cp__lesson-title { flex: 1; }
.lj-cp__lesson .lj-cp__pill { margin-left: .5rem; }
.lj-cp__answer { margin-bottom: 1.25rem; padding: 1rem; background: var(--lj-paper-deep); color: var(--lj-ink-soft); }
.lj-cp__lessons[hidden], .lj-cp__answer[hidden] { display: none; }
.lj-cp__lessons:not([hidden]), .lj-cp__answer:not([hidden]), .lj-cp__player:not([hidden]) { animation: lj-cp-ein 320ms ease-out; }
@keyframes lj-cp-ein { from { opacity: 0; } to { opacity: 1; } }

/* Ergebnisse */
.lj-cp__outcomes { display: grid; gap: 3rem; margin-top: 2.5rem; }
.lj-cp__outcome { margin: 0; background: var(--lj-paper); }
.lj-cp__outcome figcaption { margin-top: 1rem; }
.lj-cp__outcome figcaption p { margin: 0; }
.lj-cp__who { font-size: 15px; font-weight: 600; }
.lj-cp__motif { font-family: var(--lj-font-display); font-style: italic; font-size: 1.15rem; }
.lj-cp__sage { color: var(--lj-sage); }
@media (min-width: 760px) { .lj-cp__outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }

/* Bedingungen statt Eigenschaften */
.lj-cp__conditions { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.lj-cp__condition { margin: .75rem 0 0; font-family: var(--lj-font-display); font-size: 1.75rem; line-height: 1.25; }
.lj-cp__material-label { margin-top: 3rem; }
.lj-cp__material { margin: .75rem 0 0; padding-left: 1.25rem; color: var(--lj-ink-soft); }
@media (min-width: 760px) { .lj-cp__conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Preis: die einzige harte Kante der Seite (Regel 2). */
.lj-cp__price {
	max-width: 32rem; margin-inline: auto; padding: 2rem;
	border: 1.5px solid var(--lj-ink); border-radius: 2px; background: var(--lj-paper);
	scroll-margin-top: var(--lj-stapel);
}
.lj-cp__amount { margin: 0; font-family: var(--lj-font-display); font-size: 3rem; line-height: 1.1; font-variant-numeric: lining-nums; }
.lj-cp__includes { margin: 1.5rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.lj-cp__includes li { display: flex; gap: .75rem; }
.lj-cp__includes svg { flex: none; margin-top: .2rem; color: var(--lj-sage); }
.lj-cp__buy {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 48px; margin-top: 2rem;
	border: 1.5px solid var(--lj-ink); border-radius: 2px;
	background: var(--lj-ink); color: var(--lj-paper); font-weight: 600; text-decoration: none;
}
.lj-cp__buy:hover { background: var(--lj-ink-soft); border-color: var(--lj-ink-soft); }
.lj-cp__legal { margin-top: 1rem; }
.lj-cp__legal a { color: var(--lj-ink-soft); }

.lj-cp__footer {
	max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 5rem;
	text-align: center; font-family: var(--lj-font-display); font-style: italic; font-size: 1.35rem;
}
.lj-cp__footer .lj-cp__soft { font-family: var(--lj-font-body); font-style: normal; font-size: 1rem; }

.lj-cp :focus-visible { outline: 2px solid var(--lj-ocker-deep); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.lj-cp__lessons:not([hidden]), .lj-cp__answer:not([hidden]), .lj-cp__player:not([hidden]) { animation: none; }
}