/* ------------------------------------------------------------------
   Lorenz Impact Bausteine
   Wirkt nur innerhalb der eingesetzten Abschnitte (.li-abschnitt).
   Alles andere auf der Website bleibt unberührt.
   ------------------------------------------------------------------ */

/* --- Schrift, lokal aus dem Plugin-Ordner ------------------------ */

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("fonts/poppins-300.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/poppins-400.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/poppins-500.woff2") format("woff2");
}

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/poppins-600.woff2") format("woff2");
}

/* --- Farben ------------------------------------------------------
   Ist im Theme eine Palette mit diesen Namen angelegt, gilt sie.
   Sonst greifen die Werte dahinter. */

:root {
	--li-marine: var(--wp--preset--color--marine, #1a3a5c);
	--li-petrol: var(--wp--preset--color--petrol, #00a09d);
	--li-papier: var(--wp--preset--color--papier, #f6f4ef);
	--li-marine-tief: var(--wp--preset--color--marine-tief, #12283f);
	--li-petrol-tief: var(--wp--preset--color--petrol-tief, #007a78);
	--li-papier-warm: var(--wp--preset--color--papier-warm, #ebe7de);
	--li-blaugrau: var(--wp--preset--color--blaugrau, #5f7183);
}

/* Farbklassen für den Fall, dass die Palette im Theme fehlt.
   Ist sie vorhanden, gewinnen die Regeln von WordPress. */

.has-marine-background-color { background-color: #1a3a5c; }
.has-petrol-background-color { background-color: #00a09d; }
.has-papier-background-color { background-color: #f6f4ef; }
.has-marine-tief-background-color { background-color: #12283f; }
.has-petrol-tief-background-color { background-color: #007a78; }
.has-papier-warm-background-color { background-color: #ebe7de; }
.has-blaugrau-background-color { background-color: #5f7183; }
.has-weiss-background-color { background-color: #ffffff; }

.has-marine-color { color: #1a3a5c; }
.has-petrol-color { color: #00a09d; }
.has-marine-tief-color { color: #12283f; }
.has-petrol-tief-color { color: #007a78; }
.has-blaugrau-color { color: #5f7183; }
.has-weiss-color { color: #ffffff; }

/* --- Grundlage der Abschnitte ------------------------------------ */

.li-abschnitt {
	font-family: "Poppins", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 1.03rem;
	line-height: 1.75;
	color: var(--li-marine);
	padding-top: 4.875rem;
	padding-bottom: 4.875rem;
}

.li-abschnitt :where(h1, h2, h3, h4) {
	font-family: "Poppins", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.025em;
	text-wrap: balance;
	color: var(--li-marine);
}

.li-abschnitt h1 {
	font-size: clamp(2.05rem, 4.6vw, 3.15rem);
	line-height: 1.1;
}

.li-abschnitt h2 {
	font-size: clamp(1.55rem, 3vw, 2.05rem);
	line-height: 1.22;
	max-width: 24ch;
}

.li-abschnitt h3 {
	font-size: clamp(1.1rem, 2vw, 1.28rem);
	line-height: 1.3;
}

.li-abschnitt p {
	max-width: 62ch;
}

/* Buttons innerhalb der Bausteine: Petrol-Fläche trägt dunkelblaue
   Schrift – nie weiße. Das ist die Kontrastregel aus dem Gestaltungssystem. */

.li-abschnitt .wp-block-button__link {
	border-radius: 0;
	padding: 13px 24px;
	font-size: 0.93rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	display: inline-block;
}

.li-abschnitt .wp-block-button__link:not(.has-background) {
	background-color: var(--li-petrol);
	color: var(--li-marine-tief);
}

.li-abschnitt .wp-block-button__link:not(.has-background):hover {
	background-color: #00b4b0;
	color: var(--li-marine-tief);
}

.li-abschnitt a:not(.wp-block-button__link) {
	color: var(--li-petrol-tief);
}

/* --- Dunkler Abschnitt ------------------------------------------- */

.li-dunkel,
.li-dunkel :where(h1, h2, h3, h4, p, li) {
	color: #ffffff;
}

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

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

.li-dunkel a:not(.wp-block-button__link) {
	color: var(--li-petrol);
}

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

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

.li-lead {
	font-size: 1.1rem;
	color: var(--li-blaugrau);
	max-width: 58ch;
}

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

/* --- Aufzählung mit Trennlinien ---------------------------------- */

.li-lines {
	list-style: none;
	padding: 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(--li-petrol);
}

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

/* --- Merkmalliste ------------------------------------------------- */

.li-creds {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 8px;
	font-size: 0.98rem;
	color: var(--li-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(--li-petrol);
}

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

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

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

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

/* --- Hinweisfeld -------------------------------------------------- */

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

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

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

/* --- Karten ------------------------------------------------------- */

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

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

/* --- Dezenter Textlink -------------------------------------------- */

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

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

/* --- Bilder -------------------------------------------------------- */

.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(--li-petrol);
	z-index: -1;
}

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

.li-bild-voll,
.li-bild-voll img {
	height: 100%;
}

.li-bild-voll img {
	width: 100%;
	min-height: 280px;
	object-fit: cover;
}

/* Damit sich das Bild über die volle Spaltenhöhe zieht */
.wp-block-column > .li-bild-voll {
	display: block;
	height: 100%;
}

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

@media (max-width: 781px) {
	.li-abschnitt {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

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

/* --- Schriftgröße-Fallback, falls das Theme sie nicht kennt ------- */

.li-abschnitt .has-klein-font-size {
	font-size: 0.88rem;
}

.li-dunkel .li-quelle {
	color: #b4c6d6;
}

/* --- Kontaktformular ---------------------------------------------- */

.li-formular {
	max-width: 34rem;
}

.li-formular .li-feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 18px;
	max-width: none;
}

.li-formular label {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--li-marine);
}

.li-formular input[type="text"],
.li-formular input[type="email"],
.li-formular textarea {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 300;
	color: var(--li-marine);
	background: #ffffff;
	border: 1px solid rgba(26, 58, 92, 0.28);
	border-radius: 0;
	padding: 11px 13px;
	width: 100%;
	line-height: 1.5;
}

.li-formular input[type="text"]:focus,
.li-formular input[type="email"]:focus,
.li-formular textarea:focus {
	outline: 2px solid var(--li-petrol-tief);
	outline-offset: 1px;
	border-color: var(--li-petrol-tief);
}

.li-formular textarea {
	resize: vertical;
	min-height: 9rem;
}

/* Einwilligung */

.li-formular .li-feld-kasten label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: start;
	font-size: 0.88rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--li-blaugrau);
}

.li-formular .li-feld-kasten input[type="checkbox"] {
	margin-top: 4px;
	width: 1rem;
	height: 1rem;
	accent-color: var(--li-petrol-tief);
}

/* Unsichtbares Spamfeld */

.li-formular .li-feld-honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Knopf */

.li-formular-knopf {
	font-family: inherit;
	background: var(--li-petrol);
	color: var(--li-marine-tief);
	border: none;
	border-radius: 0;
	padding: 13px 24px;
	font-size: 0.93rem;
	font-weight: 600;
	cursor: pointer;
	align-self: flex-start;
}

.li-formular-knopf:hover {
	background: #00b4b0;
}

.li-formular-knopf:focus-visible {
	outline: 2px solid var(--li-marine);
	outline-offset: 2px;
}

/* Rückmeldung */

.li-formular-meldung {
	padding: 14px 18px;
	margin: 0 0 22px;
	font-size: 0.98rem;
	max-width: none;
}

.li-formular-ok {
	background: var(--li-papier-warm);
	border-left: 3px solid var(--li-petrol);
	color: var(--li-marine);
}

.li-formular-fehler {
	background: #f6e7e2;
	border-left: 3px solid #9c4221;
	color: #6b2d16;
}