/**
 * Lagom Akademie — Startseite
 *
 * Design-Tokens und Sektions-Layouts der öffentlichen Startseite.
 * Quelle: Claude-Design-Projekt „Lagom Akademie Startseite" (Variante 2a).
 *
 * Drei Entscheidungen, die den Aufbau erklären:
 *
 * 1) NICHT im Customizer („Zusätzliches CSS"), sondern als Plugin-Asset.
 *    Im Customizer wäre es an das Theme gebunden und bei einem Theme-Wechsel
 *    verloren. Hier ist es versioniert und wandert mit jedem Release mit.
 *
 * 2) ALLE Regeln sind mit `.lagom-startseite` präfixiert (zwei Klassen =
 *    Spezifität 0,2,0). Blocksy formatiert Inhalte über Selektoren wie
 *    `.entry-content p` (0,1,1) — einfache Klassenregeln würden dagegen
 *    verlieren, und Farben/Schriften kämen vom Theme statt aus dem Design.
 *
 * 3) Icons stecken als data-URI in diesem Stylesheet, nicht als Inline-SVG im
 *    Seiteninhalt. WordPress' KSES-Filter entfernt `<svg>` beim Speichern für
 *    jeden Benutzer ohne `unfiltered_html` (z. B. Redakteure) — die Icons wären
 *    beim ersten Speichern still verschwunden.
 */

/* =============================================================
   Schriften (lokal, kein Google-CDN — DSGVO)
   Dateien liegen in assets/fonts/, siehe dortige README.md.
   Fehlen sie, greifen die Rückfallschriften aus dem Stack.
   ============================================================= */

@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* =============================================================
   Tokens
   ============================================================= */

:root {
	--sage-50:  #f4f7f7;
	--sage-100: #e3eced;
	--sage-200: #c7d8da;
	--sage-300: #abc4c7;
	--sage-400: #9bb6b9;
	--sage-500: #8baaad;
	--sage-600: #6f8e91;
	--sage-700: #556e72;
	--sage-800: #3d5154;
	--sage-900: #2a373a;

	--cream-50:  #fdfcfa;
	--cream-100: #f9f8f5;
	--cream-200: #f0ede5;
	--cream-300: #e5e0d3;
	--cream-400: #d4cdbb;

	--terra-100: #f7ebe1;
	--terra-300: #e3c4ad;
	--terra-500: #c89b7b;
	--terra-700: #95684a;

	--honey-300: #e8c889;
	--honey-500: #d49a4d;

	--ink-300: #b1b8b9;
	--ink-500: #6b7679;
	--ink-700: #3a4548;
	--ink-900: #1f2729;

	--font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
	--font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--fraunces-vs:  'opsz' 144, 'SOFT' 50;
}

/* =============================================================
   Seitenüberschrift ausblenden
   Die Seite bringt ihre eigene H1 im Hero mit; die Theme-Überschrift
   wäre eine doppelte und stünde über dem Design. Sauberer ist die
   Theme-Einstellung (Blocksy: Seitenoptionen → Seitentitel → aus) —
   diese Regel ist das Sicherheitsnetz, falls sie vergessen wird.
   Greift nur auf Seiten mit dem Startseiten-Wrapper (Body-Klasse).
   ============================================================= */

body.lagom-hat-startseite .hero-section,
body.lagom-hat-startseite .entry-header,
body.lagom-hat-startseite .page-title { display: none; }

/* Und den vertikalen Abstand des Inhaltsbereichs.
   Blocksy hängt ihn an ein Attribut am Container:
   `[data-vertical-spacing*=top] { padding-top: var(--theme-content-vertical-spacing) }`.
   Das ist der weiße Streifen über dem ersten Farbband — die Seite beginnt aber
   mit einem randlosen Band und braucht darüber nichts. Unten dasselbe.

   Sauberer wäre die Theme-Einstellung (Blocksy → Seitenoptionen → Inhaltsbereich
   → vertikaler Abstand: keiner); diese Regel ist das Sicherheitsnetz, falls sie
   vergessen wird oder beim Anlegen einer weiteren Seite untergeht. */
body.lagom-hat-startseite [data-vertical-spacing] {
	padding-top: 0;
	padding-bottom: 0;
}

/* =============================================================
   Volle Breite
   Der Themen-Container beschränkt den Inhalt auf ~1200 px. Die
   Sektionsflächen sollen aber randlos laufen; zentriert wird erst
   `.la-inner`. Bricht aus jedem beliebigen Container aus, auch ohne
   Full-Width-Seitenvorlage im Theme.
   ============================================================= */

/* Der äußere Block trägt `alignfull` — damit übernimmt das Theme die volle
   Breite über seinen eigenen Mechanismus. Bei Blocksy ist `.entry-content`
   ein Grid-Container; dort verpufft der klassische 100vw-Ausbruch, weil das
   Element in der schmalen Spur platziert wird.
   Die Regel darunter ist nur das Sicherheitsnetz für den Fall, dass der Block
   ohne `alignfull` eingefügt wird (oder ein Theme es nicht unterstützt). */
/* `.la-hosted-wrap` ausgenommen: In der Getwid-Variante sorgt die Section
   schon für die volle Breite. Der Ausbruch würde dort ein zweites Mal greifen
   — mitten in einem bereits randlosen Band — und die Seite waagerecht
   überlaufen lassen. */
.lagom-startseite:not(.alignfull):not(.la-hosted-wrap) {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.lagom-startseite { overflow-x: clip; }
.lagom-startseite.la-hosted-wrap { background: none; }

/* Im Block-Editor ist die Leinwand ohnehin die volle Breite. Der Ausbruch
   würde dort über den Rand hinausschießen und die Vorschau verschieben. */
.editor-styles-wrapper .lagom-startseite,
.block-editor-writing-flow .lagom-startseite {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* =============================================================
   Grundlagen
   ============================================================= */

.lagom-startseite {
	font-family: var(--font-body);
	background: var(--cream-100);
	color: var(--ink-900);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.lagom-startseite :focus-visible {
	outline: 2px solid var(--sage-500);
	outline-offset: 2px;
}

.lagom-startseite p,
.lagom-startseite div,
.lagom-startseite ul,
.lagom-startseite li { max-width: none; }

.lagom-startseite p { margin: 0; color: var(--ink-700); }

.lagom-startseite h1,
.lagom-startseite h2,
.lagom-startseite h3 {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-vs);
	font-weight: 380;
	letter-spacing: -0.015em;
	line-height: 1.12;
	color: var(--sage-900);
	margin: 0 0 20px;
	text-wrap: balance;
}
.lagom-startseite h1 { font-weight: 350; font-size: 58px; line-height: 1.08; margin-bottom: 28px; }
.lagom-startseite h2 { font-size: 42px; }
.lagom-startseite h1 em,
.lagom-startseite h2 em { font-style: italic; font-weight: 300; color: var(--terra-500); }

.lagom-startseite a { color: var(--sage-800); text-underline-offset: 3px; }
.lagom-startseite a:hover { color: var(--terra-700); }

/* Sektionen ------------------------------------------------- */
.lagom-startseite .la-section { padding: 112px 32px; }
.lagom-startseite .la-section--tight { padding-top: 96px; padding-bottom: 96px; }
/* Eigene Höhen für Zahlenband, Teaser und Abschluss-CTA. Bewusst als Klassen
   statt als Inline-Padding im Block: Inline-Styles lassen sich in der
   Mobil-Ansicht nur noch mit !important übersteuern. */
.lagom-startseite .la-section--band   { padding-top: 64px;  padding-bottom: 64px; }
.lagom-startseite .la-section--teaser { padding-top: 88px;  padding-bottom: 88px; }
.lagom-startseite .la-section--cta    { padding-top: 104px; padding-bottom: 104px; }
.lagom-startseite .la-inner { max-width: 1152px; margin: 0 auto; }

.lagom-startseite .la-bg-cream   { background: var(--cream-100); }
.lagom-startseite .la-bg-section { background: var(--cream-200); }
.lagom-startseite .la-bg-terra   { background: var(--terra-100); }

/* Getwid-Variante (startseite-getwid.html) ------------------- */
/* Dort liefert die Getwid-Section das Farbband und das senkrechte Polster.
   Dieses Stylesheet muss beides zurücknehmen, sonst käme es doppelt: 112 px
   vom Block plus 112 px von hier. Der seitliche Abstand bleibt — den setzt
   Getwid nicht.

   Zwei Klassen am selben Element (0,3,0) statt einer: Die Mobil-Regeln weiter
   unten setzen `.la-section` erneut auf 64 px, und bei gleicher Spezifität
   hätten sie als spätere Regel gewonnen — zusammen mit Getwids
   `padding-top: 60px !important` waren das 124 px über dem Hero.
   `.la-dark` bleibt absichtlich unberührt — dort hängen Textfarben dran. */
.lagom-startseite .la-section--hosted.la-section {
	padding-top: 0;
	padding-bottom: 0;
	background: none;
}

/* Dunkle Sektion mit Honey-Schimmer -------------------------- */
.lagom-startseite .la-dark { background: var(--sage-900); position: relative; overflow: hidden; }
.lagom-startseite .la-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(55% 80% at 88% 12%, rgba(212, 154, 77, 0.16), transparent 70%);
}
.lagom-startseite .la-dark > * { position: relative; }

/* Getwid-Variante: Schimmer gehört auf das ganze Band -------- */
/* Dort ist `.la-dark` nur noch die Inhaltsbox ohne senkrechtes Polster — der
   Verlauf endete mitten im Band und zeichnete eine sichtbare Kante. Über
   `:has()` landet er auf der Hintergrundfläche der Section, und die IST das
   Band. Kennt der Browser `:has()` nicht, entfällt lediglich die Deko. */
.lagom-startseite .la-section--hosted.la-dark::before { content: none; }

/* KEIN `position` setzen: Getwid platziert diese Ebene absolut über das ganze
   Band (`position:absolute; top/right/bottom/left:0`). Ein `position:relative`
   nimmt sie da heraus — sie verliert ihre Größe, und das Farbband ist weg.
   Absolut positioniert ist sie ohnehin ein gültiger Bezugsrahmen für `::after`. */
.wp-block-getwid-section:has(.la-dark) .wp-block-getwid-section__background::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(55% 80% at 88% 12%, rgba(212, 154, 77, 0.16), transparent 70%);
}
.lagom-startseite .la-dark h2 { color: var(--cream-100); }
.lagom-startseite .la-dark p  { color: var(--sage-200); }

/* Eyebrow ---------------------------------------------------- */
.lagom-startseite .la-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sage-700);
	margin-bottom: 20px;
}

/* Utility-Klassen statt Inline-Styles im Block-Markup. Inline-Styles an
   Kern-Blöcken sind Teil der Gutenberg-Blockvalidierung — jede Abweichung
   zwischen gespeichertem und neu erzeugtem Markup meldet „ungültiger Inhalt". */
.lagom-startseite .la-h2-40 { font-size: 40px; }
.lagom-startseite .la-h2-36 { font-size: 36px; line-height: 1.15; }
.lagom-startseite .la-mb-40 { margin-bottom: 40px; }
.lagom-startseite .la-mb-28 { margin-bottom: 28px; }

.lagom-startseite .la-lead { font-size: 18px; line-height: 1.65; color: var(--ink-700); }
.lagom-startseite .la-lead--sm { font-size: 17px; }
.lagom-startseite .la-measure { max-width: 60ch; }
.lagom-startseite .la-head { margin-bottom: 56px; }

/* =============================================================
   Raster
   ============================================================= */

.lagom-startseite .la-grid { display: grid; gap: 24px; }
.lagom-startseite .la-grid--2      { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: center; }
.lagom-startseite .la-grid--2-top  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px; align-items: start; }
.lagom-startseite .la-grid--hero   { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.lagom-startseite .la-grid--split  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
.lagom-startseite .la-grid--quote  { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.lagom-startseite .la-grid--3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lagom-startseite .la-grid--4      { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.lagom-startseite .la-grid--cards  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.lagom-startseite .la-stack        { display: flex; flex-direction: column; gap: 20px; }

/* =============================================================
   Karten
   ============================================================= */

.lagom-startseite .la-card {
	background: var(--cream-50);
	border: 1px solid var(--cream-200);
	border-radius: 16px;
	padding: 28px;
}
.lagom-startseite .la-card--lg    { padding: 36px; }
.lagom-startseite .la-card--info  { background: var(--sage-50); border-color: var(--sage-300); }
.lagom-startseite .la-card--plain { background: var(--cream-100); border-color: var(--cream-300); }

.lagom-startseite .la-card-title {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-vs);
	font-size: 20px;
	color: var(--sage-800);
	margin-bottom: 12px;
}
.lagom-startseite .la-card p { font-size: 15px; line-height: 1.65; color: var(--ink-700); }

/* =============================================================
   Buttons
   ============================================================= */

.lagom-startseite .la-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.lagom-startseite .la-buttons--center { justify-content: center; }

.lagom-startseite .la-btn {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: 8px;
	padding: 16px 30px;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.lagom-startseite .la-btn:hover { transform: translateY(-1px); }

.lagom-startseite .la-btn--primary {
	background: var(--sage-700);
	color: var(--cream-100);
	border: 1px solid var(--sage-700);
}
.lagom-startseite .la-btn--primary:hover { background: var(--sage-800); color: var(--cream-100); }

.lagom-startseite .la-btn--ghost {
	background: transparent;
	color: var(--sage-800);
	border: 1px solid var(--sage-500);
}
.lagom-startseite .la-btn--ghost:hover { background: var(--sage-100); color: var(--sage-800); }

.lagom-startseite .la-btn--light {
	background: var(--cream-100);
	color: var(--sage-900);
	border: 1px solid var(--cream-100);
	padding: 17px 32px;
}
.lagom-startseite .la-btn--light:hover { background: var(--cream-200); color: var(--sage-900); }

.lagom-startseite .la-btn--dark-ghost {
	background: transparent;
	color: var(--cream-100);
	border: 1px solid var(--sage-700);
	padding: 17px 32px;
}
.lagom-startseite .la-btn--dark-ghost:hover { background: var(--sage-800); color: var(--cream-100); }

/* =============================================================
   1 · Hero
   ============================================================= */

.lagom-startseite .la-hero { position: relative; overflow: hidden; }
.lagom-startseite .la-hero__art { display: flex; justify-content: center; }
.lagom-startseite .la-hero__art img {
	width: 100%;
	max-width: 400px;
	height: auto;
	display: block;
}

/* =============================================================
   2 · Zahlenband
   ============================================================= */

.lagom-startseite .la-stat__value {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-vs);
	font-size: 46px;
	line-height: 1;
	color: var(--cream-100);
	margin-bottom: 10px;
}
.lagom-startseite .la-stat__value--spot { color: var(--honey-300); }
.lagom-startseite .la-stat__label { font-size: 14px; line-height: 1.5; color: var(--sage-300); }

/* =============================================================
   5 · Ausbildungsweg
   ============================================================= */

.lagom-startseite .la-steps-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
	margin-bottom: 56px;
}
.lagom-startseite .la-steps-head__deko { width: 130px; height: auto; opacity: 0.8; flex-shrink: 0; }
.lagom-startseite .la-steps-head__text { max-width: 58ch; }

.lagom-startseite .la-rows {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--cream-300);
	border: 1px solid var(--cream-300);
	border-radius: 16px;
	overflow: hidden;
}
.lagom-startseite .la-row {
	background: var(--cream-50);
	padding: 26px 32px;
	display: grid;
	grid-template-columns: 40px minmax(0, 250px) minmax(0, 1fr) minmax(0, 110px);
	gap: 24px;
	align-items: baseline;
}
.lagom-startseite .la-row--final { background: var(--sage-50); }
.lagom-startseite .la-row__num {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-vs);
	font-size: 22px;
	color: var(--sage-300);
}
.lagom-startseite .la-row--final .la-row__num { color: var(--sage-500); }
.lagom-startseite .la-row__title { font-size: 16px; font-weight: 600; color: var(--ink-900); }
.lagom-startseite .la-row--final .la-row__title { color: var(--sage-800); }
.lagom-startseite .la-row p { font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.lagom-startseite .la-row__meta { font-size: 14px; color: var(--ink-500); text-align: right; }
.lagom-startseite .la-row--final .la-row__meta { font-weight: 600; color: var(--sage-800); }

/* =============================================================
   Icons (Lucide, Stroke 1.5, fill:none) als CSS-Grafik
   ============================================================= */

/* Zweispaltiges Grid: Icon links über alle Zeilen, Inhalt rechts. So braucht
   das Markup KEIN zusätzliches Wrapper-Element um Titel und Text — jeder
   Absatz ist ein eigener Block und im Editor direkt anklickbar. */
.lagom-startseite .la-iconrow,
.lagom-startseite .la-lecturer {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
}
.lagom-startseite .la-iconrow::before,
.lagom-startseite .la-lecturer::before,
.lagom-startseite .la-check::before {
	content: "";
	background-repeat: no-repeat;
	background-position: center;
	grid-column: 1;
	grid-row: 1 / -1;
	width: 24px;
	height: 24px;
	background-size: 24px;
	margin-top: 2px;
}
.lagom-startseite .la-iconrow > *,
.lagom-startseite .la-lecturer > * { grid-column: 2; }

.lagom-startseite .la-lecturer { column-gap: 20px; padding: 28px 32px; }

.lagom-startseite .la-check {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-700);
}
.lagom-startseite .la-check::before { width: 20px; height: 20px; background-size: 20px; margin-top: 3px; }

/* award */
.lagom-startseite .la-icon-award::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556e72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/%3E%3C/svg%3E");
}
/* trending-up */
.lagom-startseite .la-icon-trend::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556e72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='m19 9-5 5-4-4-3 3'/%3E%3C/svg%3E");
}
/* shield-plus */
.lagom-startseite .la-icon-shield::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556e72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M9.5 12h5'/%3E%3Cpath d='M12 9.5v5'/%3E%3C/svg%3E");
}
/* file-check */
.lagom-startseite .la-icon-file::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556e72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='m9 15 2 2 4-4'/%3E%3C/svg%3E");
}
/* users */
.lagom-startseite .la-icon-users::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556e72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
/* check */
.lagom-startseite .la-check::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f8e91' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.lagom-startseite .la-iconrow__title { font-size: 15px; font-weight: 600; color: var(--sage-800); margin-bottom: 4px; }
.lagom-startseite .la-iconrow p { font-size: 14px; line-height: 1.6; color: var(--ink-700); }

.lagom-startseite .la-source {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-500);
	border-top: 1px solid var(--sage-300);
	padding-top: 20px;
}

/* Haltungssatz unter den Rechtsgrundlagen-Karten: etwas kräftiger als die
   Quellenzeile, damit er als Aussage gelesen wird und nicht als Fußnote. */
.lagom-startseite .la-note {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-700);
	font-style: italic;
	margin-top: 4px;
}

.lagom-startseite .la-lecturer__title { font-size: 16px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.lagom-startseite .la-lecturer p { font-size: 15px; line-height: 1.6; color: var(--ink-700); }

.lagom-startseite .la-checks { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.lagom-startseite .la-textlink-wrap { margin-top: 12px; }
.lagom-startseite .la-textlink {
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	color: var(--sage-800);
	text-decoration: none;
	border-bottom: 1px solid var(--sage-500);
	padding-bottom: 3px;
}
.lagom-startseite .la-textlink:hover { color: var(--terra-700); border-color: var(--terra-500); }

/* =============================================================
   7 · Bereiche A–H
   ============================================================= */

.lagom-startseite .la-area__letter {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-vs);
	font-size: 24px;
	color: var(--sage-300);
	line-height: 1;
	margin-bottom: 14px;
}
.lagom-startseite .la-area__title { font-size: 15px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.lagom-startseite .la-area__desc  { font-size: 14px; line-height: 1.55; color: var(--ink-500); margin-bottom: 16px; }
.lagom-startseite .la-area__meta  { font-size: 13px; color: var(--sage-700); }

.lagom-startseite .la-callout {
	margin-top: 24px;
	display: flex;
	gap: 40px;
	align-items: center;
	flex-wrap: wrap;
	padding: 28px 32px;
}
.lagom-startseite .la-callout p { font-size: 15px; line-height: 1.6; color: var(--ink-700); flex: 1; min-width: 320px; }
.lagom-startseite .la-callout__meta { font-size: 14px; font-weight: 600; color: var(--sage-800); }

/* =============================================================
   8 · Stimmen
   ============================================================= */

.lagom-startseite .la-quote {
	font-family: var(--font-display);
	font-variation-settings: var(--fraunces-vs);
	font-weight: 350;
	font-size: 34px;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--sage-900);
	max-width: 26ch;
	margin-bottom: 24px;
}
.lagom-startseite .la-source-line { font-size: 14px; color: var(--ink-500); }
.lagom-startseite .la-testimonial p { font-size: 15px; line-height: 1.65; color: var(--ink-700); margin-bottom: 12px; }
.lagom-startseite .la-testimonial__who { font-size: 13px; color: var(--ink-500); }

/* =============================================================
   10 · Angehörigen-Teaser
   ============================================================= */

.lagom-startseite .la-pill {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--terra-700);
	border: 1px solid var(--terra-300);
	padding: 6px 14px;
	border-radius: 9999px;
	margin-bottom: 20px;
}
.lagom-startseite .la-topics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Als Kern-Listenblock umgesetzt (im Editor bearbeitbar). Der Mitteldot kommt
   aus dem CSS statt aus dem Text — sonst müsste er beim Tippen mitgeschrieben
   werden und ginge beim Bearbeiten verloren. */
.lagom-startseite .la-topics li { font-size: 15px; color: var(--ink-700); }
.lagom-startseite .la-topics li::before { content: "· "; color: var(--sage-500); }

/* =============================================================
   11 · Abschluss-CTA
   ============================================================= */

.lagom-startseite .la-cta { text-align: center; }
.lagom-startseite .la-cta h2 { font-weight: 350; font-size: 44px; line-height: 1.1; margin-bottom: 18px; }
.lagom-startseite .la-cta p { max-width: 58ch; margin: 0 auto 40px; font-size: 17px; line-height: 1.65; }
.lagom-startseite .la-cta__bird {
	position: absolute;
	left: -40px;
	bottom: -70px;
	width: 320px;
	height: auto;
	opacity: 0.06;
	pointer-events: none;
}

/* =============================================================
   Responsiv
   ============================================================= */

@media (max-width: 1024px) {
	.lagom-startseite .la-grid--hero,
	.lagom-startseite .la-grid--split,
	.lagom-startseite .la-grid--quote { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.lagom-startseite .la-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	.lagom-startseite .la-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	/* Seitenabstand bewusst 28px: 20px wirkten gedrängt, sobald die
	   Karten ihren eigenen Innenabstand dazustellen. */
	.lagom-startseite .la-section { padding: 64px 28px; }
	.lagom-startseite .la-section--tight { padding-top: 56px; padding-bottom: 56px; }
	.lagom-startseite .la-section--band { padding-top: 48px; padding-bottom: 48px; }
	.lagom-startseite .la-section--cta { padding-top: 72px; padding-bottom: 72px; }

	/* Hero: Illustration wandert hinter den Text, statt als großes Bild
	   darunter zu stehen. Verkürzt den Weg zu den Buttons deutlich. */
	.lagom-startseite .la-grid--hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.lagom-startseite .la-grid--hero > .wp-block-group { position: relative; z-index: 1; }
	.lagom-startseite .la-hero__art {
		position: absolute;
		right: -70px;
		bottom: -30px;
		width: 290px;
		z-index: 0;
		opacity: 0.13;
		pointer-events: none;
		display: block;
	}
	.lagom-startseite .la-hero__art img { max-width: none; width: 100%; }

	.lagom-startseite h1 { font-size: 38px; }
	.lagom-startseite h2 { font-size: 30px; }
	.lagom-startseite .la-cta h2 { font-size: 32px; }
	.lagom-startseite .la-quote { font-size: 26px; max-width: none; }
	.lagom-startseite .la-stat__value { font-size: 36px; }

	.lagom-startseite .la-grid--2,
	.lagom-startseite .la-grid--2-top,
	.lagom-startseite .la-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 24px; }

	/* Zahlenband bleibt zweispaltig: einspaltig gestapelt entstehen vier
	   fast leere Bildschirmhöhen, und die kurzen Zahlen wirken verloren. */
	.lagom-startseite .la-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
	.lagom-startseite .la-stat__value { font-size: 32px; margin-bottom: 6px; }
	.lagom-startseite .la-stat__label { font-size: 13px; line-height: 1.45; }

	/* Präsenz-Kasten: Text und Rhythmus-Angabe untereinander. Nebeneinander
	   wurde der Text auf wenige Wörter je Zeile zusammengequetscht. */
	.lagom-startseite .la-callout {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	/* Schrittliste: Nummer links, Rest gestapelt. */
	.lagom-startseite .la-row {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 8px 16px;
		padding: 22px 20px;
	}
	.lagom-startseite .la-row__title,
	.lagom-startseite .la-row p,
	.lagom-startseite .la-row__meta { grid-column: 2; }
	.lagom-startseite .la-row__meta { text-align: left; }

	.lagom-startseite .la-steps-head { flex-direction: column; align-items: flex-start; gap: 24px; }
	.lagom-startseite .la-steps-head img { width: 100px; }

	.lagom-startseite .la-lecturer { padding: 22px 20px; }
	.lagom-startseite .la-callout { padding: 24px; }
	.lagom-startseite .la-callout p { min-width: 0; }
	.lagom-startseite .la-topics { grid-template-columns: minmax(0, 1fr); }
	.lagom-startseite .la-card { padding: 24px; }
	.lagom-startseite .la-card--lg { padding: 26px; }
	.lagom-startseite .la-cta__bird { width: 200px; left: -30px; bottom: -40px; }

	/* Kachelabstaende enger. 24 px wirken auf dem Smartphone weit, weil jede
	   Karte ihren eigenen Innenabstand von 24 px dazustellt — zwischen zwei
	   Textbloecken lagen so ueber 70 px Luft. */
	.lagom-startseite .la-grid--3,
	.lagom-startseite .la-grid--2,
	.lagom-startseite .la-grid--2-top { gap: 14px; }
	.lagom-startseite .la-stack { gap: 14px; }
	.lagom-startseite .la-grid--cards { gap: 12px; }

	/* Die acht Themenbereiche zum Durchwischen. Untereinander waren es acht
	   fast gleich aussehende Kaesten — eine Strecke, die man scrollend
	   durchhaelt statt sie zu lesen. Quer nebeneinander ist auf einen Blick
	   erkennbar, dass es eine ueberschaubare Reihe ist.
	   Reines CSS, kein Skript: ueberlaufende Flexzeile mit Scroll-Snap.
	   Die Karten sind 78 % breit, damit die naechste angeschnitten stehen
	   bleibt — das ist der Hinweis, dass es weitergeht. */
	.lagom-startseite .la-grid--cards {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Aus dem Seitenabstand des Abschnitts ausbrechen, damit die Reihe am
		   Bildschirmrand anschneidet statt vorher aufzuhoeren. */
		margin-inline: -28px;
		padding-inline: 28px;
		scroll-padding-inline: 28px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.lagom-startseite .la-grid--cards::-webkit-scrollbar { display: none; }
	.lagom-startseite .la-grid--cards > .wp-block-group {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lagom-startseite .la-btn { transition: none; }
	.lagom-startseite .la-btn:hover { transform: none; }
}