/* ==========================================================================
   Komm ins Bauchgefühl — basis.css
   Tokens als CSS-Variablen, Bereichsfarben, Typografie-Feinheiten, Seitenrand,
   Layout-Klassen (kib-*), Fokus, Bewegung. Gilt für Website und Editor.
   Bausteine (Block-Styles is-style-*) stehen in bausteine.css.
   Marke: keine Schatten, keine Verläufe, nur Fraunces + Karla.
   ========================================================================== */

/* 1 · Tokens ------------------------------------------------------------- */

:root {
	/* Markenfarben (gleich der theme.json-Palette) */
	--kib-kalkweiss: #F7F3EC;
	--kib-kalkweiss-hoch: #FCFAF6;
	--kib-sand: #E9DFCF;
	--kib-sand-tief: #DCD0BB;
	--kib-kleks: #842F45;
	--kib-kleks-tief: #6A2236;
	--kib-kleks-hell: #D6546C;
	--kib-kleks-schleier: #F3E4E7;
	--kib-salbei: #7E8C74;
	--kib-salbei-tief: #58634F;
	--kib-salbei-tief-hover: #454E3D;
	--kib-salbei-schleier: #E5E8E0;
	--kib-kellerbraun: #3B322C;
	--kib-kellerbraun-hell: #5A4E45;
	--kib-tinte: #2A2521;
	--kib-ocker: #C99A5B;
	--kib-ocker-schleier: #F3E6D2;
	--kib-kante: #DED2C1;
	/* Feldrand: Entwurf #C9BCA8 (nur 1,7:1). Seit 12.10.2026 (Freigabe Dario) #8A7C6E — 3,7:1 auf Kalkweiß,
	   3,9:1 auf der Feldfläche, 3,1:1 auf Sand (WCAG 1.4.11 verlangt 3:1). */
	--kib-kante-feld: #8A7C6E;
	--kib-weg-linie: #C0B4A2;
	--kib-invers-leise: #C9BFB2;
	--kib-invers-linie: rgba(247, 243, 236, 0.38);
	--kib-invers-kante: rgba(247, 243, 236, 0.16);
	--kib-invers-flaeche: rgba(247, 243, 236, 0.14);

	/* Bereichsfarben — Quelle für body-Klassen und Editor (inc/bereich.php) */
	--kib-autismus-akzent: #842F45;
	--kib-autismus-akzent-tief: #6A2236;
	--kib-autismus-akzent-text: #842F45;
	--kib-autismus-akzent-schleier: #F3E4E7;
	--kib-autismus-akzent-linie: #842F45;
	--kib-autismus-kleks-drehung: 0deg;

	--kib-koerper-akzent: #58634F;
	--kib-koerper-akzent-tief: #454E3D;
	--kib-koerper-akzent-text: #58634F;
	--kib-koerper-akzent-schleier: #E5E8E0;
	--kib-koerper-akzent-linie: #7E8C74;
	--kib-koerper-kleks-drehung: 140deg;

	/* Fraunces-Achsen */
	--kib-fraunces-display: "opsz" 96, "SOFT" 60;
	--kib-fraunces-heading: "opsz" 48, "SOFT" 48;
	--kib-fraunces-klein: "opsz" 18, "SOFT" 40;

	/* Maße */
	--kib-mass: 68ch;
	--kib-mass-eng: 60ch;
	--kib-radius: 16px;
	--kib-radius-klein: 10px;
	--kib-radius-gross: 24px;
	--kib-radius-button: 14px;
	--kib-radius-pill: 999px;
	--kib-spaltenabstand: 96px;

	/* Fokus */
	--kib-fokus-farbe: #3B322C;
	--kib-fokus-breite: 2px;
	--kib-fokus-abstand: 3px;

	/* Bewegung — nur Farbwechsel und Überblendungen */
	--kib-dauer-schnell: 140ms;
	--kib-dauer: 240ms;
	--kib-dauer-ruhig: 420ms;
	--kib-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
	--kib-druck: 0.995;
}

/* Bereich: ohne Bereich = Kleks-Werte. Die Klassen wirken auf body UND auf jedem Element
   (z. B. Gruppe mit Zusatzklasse „bereich-koerper“ färbt ihren Inhalt Salbei). */
body,
.bereich-neutral,
.bereich-autismus {
	--kib-akzent: var(--kib-autismus-akzent);
	--kib-akzent-tief: var(--kib-autismus-akzent-tief);
	--kib-akzent-text: var(--kib-autismus-akzent-text);
	--kib-akzent-schleier: var(--kib-autismus-akzent-schleier);
	--kib-akzent-linie: var(--kib-autismus-akzent-linie);
	--kib-kleks-drehung: var(--kib-autismus-kleks-drehung);
}

.bereich-koerper {
	--kib-akzent: var(--kib-koerper-akzent);
	--kib-akzent-tief: var(--kib-koerper-akzent-tief);
	--kib-akzent-text: var(--kib-koerper-akzent-text);
	--kib-akzent-schleier: var(--kib-koerper-akzent-schleier);
	--kib-akzent-linie: var(--kib-koerper-akzent-linie);
	--kib-kleks-drehung: var(--kib-koerper-kleks-drehung);
}

/* Dunkle Flächen: Fokus in Ocker */
.kib-dunkel,
.has-kellerbraun-background-color,
.has-tinte-background-color,
.is-style-karte-dunkel {
	--kib-fokus-farbe: var(--kib-ocker);
}

/* 2 · Grundlagen --------------------------------------------------------- */

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

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-optical-sizing: auto;
	text-wrap: pretty;
}

strong,
b {
	font-weight: 600;
}

/* Überschriften: Fraunces-Achsen je Stufe, ausgeglichene Zeilen */
h1,
h2,
h3,
h4,
.wp-block-heading,
.wp-block-post-title,
.wp-block-query-title {
	font-variation-settings: var(--kib-fraunces-heading);
	text-wrap: balance;
}

h5,
h6 {
	font-variation-settings: normal;
	text-wrap: balance;
}

/* Schriftgrößen-Stufen bringen ihre Zeilenhöhe mit (Display 56/64 · H1 44/52 · H2 32/40 · H3 24/32 ·
   Lead 20/32 · Small 15/24 · Label 13/16). Eigene Zeilenhöhe im Editor (Inline-Stil) hat Vorrang.
   Hinweis: WordPress schreibt die Slugs h1/h2/h3 als „h-1“ usw. (has-h-1-font-size, --wp--preset--font-size--h-1). */
.has-display-font-size { line-height: 1.1429; }
.has-h-1-font-size { line-height: 1.1818; }
.has-h-2-font-size { line-height: 1.25; }
.has-h-3-font-size { line-height: 1.3333; }
.has-lead-font-size { line-height: 1.6; }
.has-small-font-size { line-height: 1.6; }
.has-label-font-size { line-height: 1.23; }

/* Jede Fraunces-Stelle (z. B. Absatz mit Schriftart Fraunces) bekommt die Überschriften-Achsen */
.has-serif-font-family {
	font-variation-settings: var(--kib-fraunces-heading);
}

.kib-fraunces-display {
	font-variation-settings: var(--kib-fraunces-display);
}

.kib-fraunces-klein {
	font-variation-settings: var(--kib-fraunces-klein);
}

/* Fließtext: Absatz-Maß 68 Zeichen (in Lesespalten 720 px gilt die Spaltenbreite) */
p {
	max-width: var(--kib-mass);
}

p.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}

.kib-eng,
p.kib-eng {
	max-width: var(--kib-mass-eng);
}

/* Links */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition:
		color var(--kib-dauer-schnell) var(--kib-easing),
		background-color var(--kib-dauer-schnell) var(--kib-easing),
		border-color var(--kib-dauer-schnell) var(--kib-easing),
		text-decoration-color var(--kib-dauer-schnell) var(--kib-easing);
}

a:hover {
	text-decoration-thickness: 1.5px;
}

/* Links auf Sand: Kleks tief (Kontrast) */
:is(.has-sand-background-color, .is-style-karte) a:where(:not(.wp-element-button)) {
	color: var(--kib-kleks-tief);
}

:is(.has-sand-background-color, .is-style-karte) a:where(:not(.wp-element-button)):hover {
	color: var(--kib-kellerbraun);
}

/* Listen ohne Block-Style: Marker in Bereichsfarbe */
li::marker {
	color: var(--kib-akzent);
}

/* Textauswahl: Ocker-Schleier */
::selection {
	background-color: var(--kib-ocker-schleier);
	color: var(--kib-tinte);
}

/* Fokus: 2 px Kellerbraun, 3 px Abstand (auf Dunkel Ocker).
   Nur auf der Website — im Editor (body = .editor-styles-wrapper) bleibt die Fokus-Anzeige von WordPress. */
body:not(.editor-styles-wrapper) :focus-visible {
	outline: var(--kib-fokus-breite) solid var(--kib-fokus-farbe);
	outline-offset: var(--kib-fokus-abstand);
	box-shadow: none;
}

body:not(.editor-styles-wrapper) a:focus-visible {
	border-radius: 2px;
}

/* Sprunglink („Zum Inhalt springen“): ohne Schatten, in Markenfarben */
body .skip-link.screen-reader-text:focus {
	background-color: var(--kib-kalkweiss);
	color: var(--kib-kellerbraun);
	box-shadow: none;
	border-radius: var(--kib-radius-button);
	outline: var(--kib-fokus-breite) solid var(--kib-kellerbraun);
	outline-offset: var(--kib-fokus-abstand);
	font-family: var(--wp--preset--font-family--grotesk);
	font-weight: 600;
}

/* Keine Schatten — auch nicht aus Core-Voreinstellungen */
.wp-block-button__link,
.wp-element-button,
.wp-block-image img,
.wp-block-cover,
.wp-block-quote,
.wp-block-pullquote,
.wp-block-search__input,
.wp-block-search__inside-wrapper,
.wp-block-post-featured-image img,
input,
select,
textarea {
	box-shadow: none;
	text-shadow: none;
}

/* … und auch nicht aus „Design → Stile → Schatten“: dort angelegte eigene Schatten bietet der Editor
   an Buttons, Bildern, Gruppen und Spalten an (Inline-Stil bzw. globale Stile). Die Marke kennt keine
   Schatten, darum wirken sie auf der Website und im Editor nicht. */
.wp-block-button__link,
.wp-element-button,
.wp-block-image img,
.wp-block-post-featured-image img,
.wp-block-cover,
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-quote,
.wp-block-pullquote,
.wp-block-separator,
[class*="wp-block-"][style*="box-shadow"] {
	box-shadow: none !important;
}

/* Bilder */
.wp-block-image img {
	display: block;
}

.wp-block-image img[style*="aspect-ratio"] {
	width: 100%;
}

/* Tabellen (z. B. Impressum, Datenschutz) */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table :is(td, th) {
	border: 1px solid var(--kib-kante);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead {
	border-bottom: 1px solid var(--kib-weg-linie);
}

/* 3 · Seitenrand & Seitenrahmen ------------------------------------------ */

/* Root-Padding 48 px · ≤ 900 px 24 px · ≤ 560 px 18 px */
@media (max-width: 900px) {
	body {
		--wp--style--root--padding-left: var(--wp--custom--rand--mobil, 24px);
		--wp--style--root--padding-right: var(--wp--custom--rand--mobil, 24px);
	}
}

@media (max-width: 560px) {
	body {
		--wp--style--root--padding-left: var(--wp--custom--rand--schmal, 18px);
		--wp--style--root--padding-right: var(--wp--custom--rand--schmal, 18px);
	}
}

/* Kopf, Inhalt und Fuß ohne Lücke (Root-blockGap gilt nicht zwischen den Seitenteilen) */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Sektionen stoßen ohne Lücke aneinander */
.wp-block-group.kib-sektion,
.kib-sektionen > .alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Textseiten (Template „Seiten“, z. B. Impressum, Datenschutzerklärung): Überschriften binden an
   ihren Abschnitt — viel Luft davor, wenig danach (wie im Einzelbeitrag, blog.css). */
.kib-textinhalt > h2 {
	margin-block-start: 64px;
}

.kib-textinhalt > :is(h3, h4, h5, h6) {
	margin-block-start: 40px;
}

.kib-textinhalt > :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: 16px;
}

.kib-textinhalt > :is(h2, h3, h4, h5, h6):first-child {
	margin-block-start: 0;
}

/* Lange Adressen (URLs, E-Mail) in Textseiten und Beiträgen brechen um, statt die Seite seitlich
   scrollen zu lassen (schmale Handys, größere Browser-Schrift). */
:is(.kib-textinhalt, .kib-beitrag-inhalt) :is(p, li, figcaption) {
	overflow-wrap: break-word;
}

/* Überlange Wörter in Überschriften (z. B. „Verbraucherstreitbeilegung/Universalschlichtungsstelle“, oder bei
   größerer Browser-Schriftgröße) brechen um, statt die Seite seitlich scrollen zu lassen. Ändert nichts, solange
   jedes Wort in seine Zeile passt (keine Auswirkung auf Mindestbreiten von Spalten/Rastern). */
h1,
h2,
h3,
h4 {
	overflow-wrap: break-word;
}

/* Lange Wörter in Überschriften dürfen auf dem Handy trennen */
@media (max-width: 560px) {
	h1,
	h2,
	h3 {
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: break-word;
	}
}

/* 4 · Dunkle Flächen (Kellerbraun) --------------------------------------- */

.kib-dunkel,
.is-style-karte-dunkel {
	color: var(--kib-kalkweiss);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--kib-kalkweiss);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) a:where(:not(.wp-element-button)) {
	color: var(--kib-ocker);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) a:where(:not(.wp-element-button)):hover {
	color: var(--kib-kalkweiss);
}

:is(.kib-dunkel, .has-kellerbraun-background-color, .is-style-karte-dunkel) ::selection {
	background-color: var(--kib-ocker);
	color: var(--kib-kellerbraun);
}

/* 5 · Layout-Klassen (Bauplan §5) ---------------------------------------- */

/* Zweispaltig: core/columns + kib-zweispaltig. Spaltenabstand 96 px, einspaltig ≤ 980 px (Zeilenabstand 64 px). */
.wp-block-columns.kib-zweispaltig {
	column-gap: var(--kib-spaltenabstand);
}

@media (max-width: 980px) {
	.wp-block-columns.kib-zweispaltig:not(.kib-umbruch-900) {
		flex-wrap: wrap !important;
		row-gap: 64px;
	}

	.wp-block-columns.kib-zweispaltig:not(.kib-umbruch-900) > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}
}

/* Umbruch erst bei 900 px (Zweiteilung, Vergleich) */
@media (max-width: 900px) {
	.wp-block-columns.kib-umbruch-900 {
		flex-wrap: wrap !important;
		row-gap: 64px;
	}

	.wp-block-columns.kib-umbruch-900 > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 1;
	}
}

/* Kartenraster: core/group mit Raster-Layout + kib-karten-2|3|4 */
@media (max-width: 980px) {
	.is-layout-grid.kib-karten-3,
	.is-layout-grid.kib-karten-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 680px) {
	.is-layout-grid.kib-karten-2,
	.is-layout-grid.kib-karten-3,
	.is-layout-grid.kib-karten-4 {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Hochformat-Bild in einer Spalte: ≤ 980 px Querformat 3:2 */
@media (max-width: 980px) {
	.wp-block-image.kib-bild-hoch img {
		aspect-ratio: 3 / 2 !important;
	}
}

/* Bündige Spalten (Umbau 18.10.2026): Spalten gleich hoch; endet eine Spalte mit einem Bild, wächst das
   Bild bis zur Unterkante der Nachbarspalte (z. B. Unterkante der letzten Qualifikations-Karte).
   Nur zweispaltig (> 980 px); darunter gilt wieder das feste Seitenverhältnis. */
@media (min-width: 981px) {
	.wp-block-columns.kib-spalten-buendig {
		align-items: stretch !important;
	}

	.wp-block-columns.kib-spalten-buendig > .wp-block-column {
		align-self: stretch !important;
	}

	.wp-block-columns.kib-spalten-buendig > .wp-block-column:has(> .wp-block-image.kib-bild-hoch) {
		display: flex;
		flex-direction: column;
	}

	/* Das Hochformat-Bild der Spalte wächst, bis die Spalte so hoch ist wie die Nachbarspalte —
	   egal ob danach noch eine Karte („Kurz gesagt“, „Fragen“) folgt oder nicht. */
	.wp-block-columns.kib-spalten-buendig > .wp-block-column > .wp-block-image.kib-bild-hoch {
		position: relative;
		flex: 1 1 0;
		min-height: 320px;
		margin-bottom: 0;
		overflow: hidden;
	}

	/* Das Bild füllt die Restfläche, bestimmt die Spaltenhöhe aber nicht mit. */
	.wp-block-columns.kib-spalten-buendig > .wp-block-column > .wp-block-image.kib-bild-hoch img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto !important;
		object-fit: cover;
	}
}

/* Bild-Fokuspunkt */
.wp-block-image.kib-fokus-oben img {
	object-position: center 30%;
}

.wp-block-image.kib-fokus-rechts img {
	object-position: 100% 50%;
}

.wp-block-image.kib-fokus-links img {
	object-position: 30% 50%;
}

/* Breiten in Zeichen (für Überschriften/Absätze, wie im Entwurf) */
.kib-max-17ch { max-width: 17ch; }
.kib-max-18ch { max-width: 18ch; }
.kib-max-22ch { max-width: 22ch; }
.kib-max-24ch { max-width: 24ch; }
.kib-max-26ch { max-width: 26ch; }
.kib-max-32ch { max-width: 32ch; }
.kib-max-34ch { max-width: 34ch; }
.kib-max-42ch { max-width: 42ch; }
.kib-max-46ch { max-width: 46ch; }
.kib-max-52ch { max-width: 52ch; }
.kib-max-60ch { max-width: 60ch; }
.kib-max-64ch { max-width: 64ch; }

/* Textfarben, die dem Bereich folgen */
.kib-text-akzent {
	color: var(--kib-akzent-text);
}

.kib-text-leise {
	color: var(--kib-kellerbraun-hell);
}

/* Kleks-Drehung einzeln setzen (z. B. „Schritt 2“ mit 40°) */
.kib-dreh-0 { --kib-kleks-drehung: 0deg; }
.kib-dreh-15 { --kib-kleks-drehung: 15deg; }
.kib-dreh-20 { --kib-kleks-drehung: 20deg; }
.kib-dreh-40 { --kib-kleks-drehung: 40deg; }
.kib-dreh-70 { --kib-kleks-drehung: 70deg; }
.kib-dreh-140 { --kib-kleks-drehung: 140deg; }
.kib-dreh-minus-25 { --kib-kleks-drehung: -25deg; }
.kib-dreh-minus-50 { --kib-kleks-drehung: -50deg; }

/* 6 · Tippflächen auf dem Handy: mindestens 44 px ------------------------- */

@media (max-width: 560px) {
	main button,
	header button,
	footer button,
	main a[href],
	footer a[href],
	.wp-block-button__link,
	.wp-element-button {
		min-height: 44px;
	}
}

/* 7 · Bewegung ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	:root {
		--kib-dauer-schnell: 0ms;
		--kib-dauer: 0ms;
		--kib-dauer-ruhig: 0ms;
		--kib-druck: 1;
	}

	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
	}
}

/* ───────────────────── Sperre gegen Verstellen unter Design → Stile ─────────────────────
   Inhaltsbreiten, Seitenränder und Palette sind Markenkonstanten. WordPress 7.1 kann diese Regler nicht
   per theme.json sperren; ändert jemand sie unter Design → Stile, würde sich die ganze Website verschieben.
   Ohne Benutzer-Stile ändert dieser Block nichts (gleiche Werte wie theme.json). Mit geänderten Benutzer-
   Stilen zeigt der Editor die geänderten Werte zwar an, die Website bleibt aber beim Markenstand.
   Freigabe: Dario, 12.10.2026 (Phase-3-Frage Q074/C13, Variante c). */
:root {
	--wp--style--global--content-size: 720px !important;
	--wp--style--global--wide-size: 1064px !important;
	--wp--preset--color--kalkweiss: #F7F3EC !important;
	--wp--preset--color--kalkweiss-hoch: #FCFAF6 !important;
	--wp--preset--color--sand: #E9DFCF !important;
	--wp--preset--color--sand-tief: #DCD0BB !important;
	--wp--preset--color--kleks: #842F45 !important;
	--wp--preset--color--kleks-tief: #6A2236 !important;
	--wp--preset--color--kleks-hell: #D6546C !important;
	--wp--preset--color--kleks-schleier: #F3E4E7 !important;
	--wp--preset--color--salbei: #7E8C74 !important;
	--wp--preset--color--salbei-tief: #58634F !important;
	--wp--preset--color--salbei-schleier: #E5E8E0 !important;
	--wp--preset--color--kellerbraun: #3B322C !important;
	--wp--preset--color--kellerbraun-hell: #5A4E45 !important;
	--wp--preset--color--tinte: #2A2521 !important;
	--wp--preset--color--ocker: #C99A5B !important;
	--wp--preset--color--ocker-schleier: #F3E6D2 !important;
	--wp--preset--color--kante: #DED2C1 !important;
	--wp--preset--color--weg-linie: #C0B4A2 !important;
}
@media (min-width: 901px) {
	body {
		--wp--style--root--padding-left: var(--wp--custom--rand--gross, 48px) !important;
		--wp--style--root--padding-right: var(--wp--custom--rand--gross, 48px) !important;
	}
}
@media (max-width: 900px) {
	body {
		--wp--style--root--padding-left: var(--wp--custom--rand--mobil, 24px) !important;
		--wp--style--root--padding-right: var(--wp--custom--rand--mobil, 24px) !important;
	}
}
@media (max-width: 560px) {
	body {
		--wp--style--root--padding-left: var(--wp--custom--rand--schmal, 18px) !important;
		--wp--style--root--padding-right: var(--wp--custom--rand--schmal, 18px) !important;
	}
}