/*
Theme Name: Lorenz Impact
Theme URI: https://lorenzimpact.de
Author: Lorenz Impact
Description: Schlankes Block-Theme für Lorenz Impact. Farben, Schrift und Abschnittsmuster sind fest hinterlegt – Poppins wird lokal vom eigenen Server geladen, es werden keine fremden Server angefragt. Alle Inhalte werden im Block-Editor bearbeitet.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lorenz-impact
Tags: block-theme, one-column, custom-colors, custom-menu, full-site-editing
*/

/* ------------------------------------------------------------------
   Lorenz Impact – Zusatzstile zu theme.json
   Farben, Schriften und Abstände stehen in theme.json und werden im
   Editor unter Design → Stile geändert. Hier stehen nur die Details,
   die sich mit Bordmitteln nicht abbilden lassen.
   ------------------------------------------------------------------ */

/* --- Abschnitte -------------------------------------------------- */

.li-abschnitt {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* Dunkler Abschnitt: Schrift muss mitziehen */
.li-dunkel,
.li-dunkel :where(h1, h2, h3, h4, p, li) {
	color: #ffffff;
}

.li-dunkel .li-eyebrow {
	color: var(--wp--preset--color--petrol);
}

.li-dunkel .li-lead,
.li-dunkel .li-karte p {
	color: #b4c6d6;
}

/* --- Übertitel und Vorspann -------------------------------------- */

.li-claim,
.li-eyebrow {
	font-size: 0.79rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol-tief);
	font-weight: 600;
	line-height: 1.4;
}

.li-lead {
	font-size: var(--wp--preset--font-size--gross);
	color: var(--wp--preset--color--blaugrau);
	max-width: 58ch;
}

.li-hinweis {
	font-size: 0.88rem;
	color: var(--wp--preset--color--blaugrau);
}

/* Fließtext bleibt lesbar schmal, Überschriften kompakt */
.wp-block-post-content p:not(.li-lead):not(.li-claim):not(.li-eyebrow),
.li-text p {
	max-width: 62ch;
}

h2.wp-block-heading {
	max-width: 24ch;
}

/* --- Aufzählung mit Trennlinien (Abschnitt „Das Muster") --------- */

.li-lines {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 72ch;
}

.li-lines li {
	padding: 16px 0 16px 30px;
	position: relative;
	border-bottom: 1px solid rgba(26, 58, 92, 0.13);
	font-size: 1.04rem;
}

.li-lines li:first-child {
	border-top: 1px solid rgba(26, 58, 92, 0.13);
}

.li-lines li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 28px;
	width: 16px;
	height: 2px;
	background: var(--wp--preset--color--petrol);
}

.li-dunkel .li-lines li,
.li-dunkel .li-lines li:first-child {
	border-color: rgba(255, 255, 255, 0.18);
}

/* --- Merkmalliste (Abschnitt „Wer dahintersteht") ---------------- */

.li-creds {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
	font-size: 0.98rem;
	color: var(--wp--preset--color--blaugrau);
}

.li-creds li {
	padding-left: 22px;
	position: relative;
}

.li-creds li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 12px;
	height: 2px;
	background: var(--wp--preset--color--petrol);
}

/* --- Herausgestellte Zahl ---------------------------------------- */

.li-zahl {
	font-size: clamp(3rem, 7vw, 4.4rem);
	line-height: 0.9;
	color: var(--wp--preset--color--petrol-tief);
	font-weight: 500;
	letter-spacing: -0.03em;
}

.li-dunkel .li-zahl {
	color: var(--wp--preset--color--petrol);
}

.li-quelle {
	font-size: 0.82rem;
	color: var(--wp--preset--color--blaugrau);
}

/* --- Hinweisfeld („Erst der Antrag, dann der Start") ------------- */

.li-urgent {
	padding: 16px 20px;
	border-left: 3px solid var(--wp--preset--color--petrol);
	background: var(--wp--preset--color--papier-warm);
	font-size: 1rem;
	max-width: 60ch;
}

/* --- Etikett ------------------------------------------------------ */

.li-badge {
	display: inline-block;
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--marine-tief);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 5px 11px;
	line-height: 1.4;
}

/* --- Preis in den Einstiegskarten -------------------------------- */

.li-preis {
	font-size: 1.45rem;
	color: var(--wp--preset--color--petrol);
	font-weight: 500;
	line-height: 1.2;
}

.li-karte {
	background: var(--wp--preset--color--marine);
	padding: 30px 28px 32px;
	outline: 1px solid rgba(255, 255, 255, 0.18);
	height: 100%;
}

/* --- Dezenter Textlink mit Pfeil --------------------------------- */

.li-quiet a,
a.li-quiet {
	color: var(--wp--preset--color--petrol-tief);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
}

.li-quiet a:hover,
a.li-quiet:hover {
	text-decoration: underline;
}

.li-dunkel .li-quiet a {
	color: var(--wp--preset--color--petrol);
}

/* --- Bild mit Petrol-Quadrat (Kopfbereich) ----------------------- */

.li-bild-akzent {
	position: relative;
	z-index: 0;
}

.li-bild-akzent::after {
	content: "";
	position: absolute;
	left: -14px;
	bottom: -14px;
	width: 78px;
	height: 78px;
	background: var(--wp--preset--color--petrol);
	z-index: -1;
}

.li-bild-akzent img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Bild, das eine ganze Spalte füllt */
.li-bild-voll img {
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
}

/* --- Kopf- und Fußzeile ------------------------------------------ */

.li-header {
	border-bottom: 1px solid rgba(26, 58, 92, 0.14);
}

.li-header .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--marine);
}

.li-header .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--marine);
}

.li-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--petrol-tief);
}

.li-footer {
	font-size: 0.9rem;
	color: #9fb4c6;
}

.li-footer a {
	color: #c9d6e2;
	text-decoration: none;
}

.li-footer a:hover {
	text-decoration: underline;
}

/* --- Tastaturbedienung sichtbar halten --------------------------- */

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--petrol-tief);
	outline-offset: 2px;
}

/* --- Kleine Bildschirme ------------------------------------------ */

@media (max-width: 781px) {
	.li-abschnitt {
		padding-top: var(--wp--preset--spacing--40);
		padding-bottom: var(--wp--preset--spacing--40);
	}

	.li-bild-akzent::after {
		width: 54px;
		height: 54px;
	}
}