/*
 * Bausteine für die Startseite von kpz.info
 *
 * Die Klassen werden im Blockeditor unter "Erweitert → Zusätzliche
 * CSS-Klasse" an die jeweiligen Blöcke vergeben. Dadurch bleibt der
 * Inhalt im Editor bearbeitbar, während das Aussehen hier versioniert
 * liegt.
 *
 * Farben kommen aus den Theme-Einstellungen (Neve), nicht aus festen
 * Werten — eine Änderung im Customizer wirkt also auch hier.
 */

:root {
	--kpz-blau: var(--nv-primary-accent, #26668B);
	--kpz-gruen: var(--nv-secondary-accent, #00A859);
	--kpz-anthrazit: var(--nv-text-color, #373435);
	--kpz-signal: #f2b01e;
	--kpz-signal-schrift: #1a1205;
	--kpz-linie: #d7dcdf;
	--kpz-flaeche: #f4f5f7;
}

/* --------------------------------------------------------------------------
   Schrift
   -------------------------------------------------------------------------- */

body {
	font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

h1, h2, h3, h4,
.wp-block-heading {
	font-family: 'Archivo', 'Segoe UI', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Gruppenblöcke

   Neve ist ein klassisches Theme ohne theme.json. WordPress legt deshalb um
   den Inhalt jedes Gruppenblocks einen zusätzlichen Kasten
   (.wp-block-group__inner-container). Für ein Raster ist das fatal: Die
   Gruppe hätte dann nur ein einziges Kindelement, nämlich diesen Kasten.

   display:contents nimmt ihn aus dem Layout heraus — die Absätze liegen
   dadurch unmittelbar im Raster der Gruppe. Im Quelltext bleibt der Kasten
   bestehen, deshalb nennen die folgenden Regeln beide Ebenen: mit Kasten
   (heute) und ohne (falls WordPress ihn eines Tages weglässt).
   -------------------------------------------------------------------------- */

.kpz-hero > .wp-block-group__inner-container,
.kpz-hotline > .wp-block-group__inner-container,
.kpz-voraussetzungen > .wp-block-group__inner-container,
.kpz-themen > .wp-block-group__inner-container,
.kpz-vertrauen > .wp-block-group__inner-container {
	display: contents;
}

/* --------------------------------------------------------------------------
   Startseitenkopf

   Neve setzt über dem Inhalt einen eigenen Titelbereich. Auf der Startseite
   stünde dort ein zweites Mal eine Überschrift, deshalb wird er dort
   ausgeblendet — die eigentliche H1 steht im Inhalt und kann im Blockeditor
   bearbeitet werden. Auf allen anderen Seiten bleibt der Titelbereich.
   -------------------------------------------------------------------------- */

.home .nv-page-title-wrap {
	display: none;
}

/*
 * Abstand zwischen den Abschnitten. Die Kernblöcke von WordPress geben
 * Blöcken auf oberster Ebene 24 px mit; hier etwas mehr, damit die
 * Abschnitte als Einheiten erkennbar bleiben. Zwei Klassen im Selektor,
 * sonst gewinnt die Regel von WordPress.
 */
.home .nv-content-wrap > * {
	margin-block: 0 38px;
}

.home .nv-content-wrap > *:last-child {
	margin-block-end: 0;
}

/* Überschriften gehören zum folgenden Abschnitt, nicht zum vorangehenden. */
.home .nv-content-wrap > h2 {
	font-size: clamp(22px, 3vw, 28px);
	margin-block: 8px 18px;
}

/* Innerhalb des Kopfbereichs die Abstände selbst bestimmen. */
.kpz-hero > *,
.kpz-hero > .wp-block-group__inner-container > * {
	margin-block: 0;
}

.kpz-hero > .kpz-eyebrow,
.kpz-hero > .wp-block-group__inner-container > .kpz-eyebrow {
	margin-block-end: 10px;
}

.kpz-hero > h1,
.kpz-hero > .wp-block-group__inner-container > h1 {
	margin-block-end: 16px;
}

.kpz-eyebrow {
	font-family: 'Archivo', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kpz-blau);
}

.kpz-hero h1 {
	font-size: clamp(29px, 4.6vw, 44px);
	line-height: 1.12;
}

.kpz-lead {
	font-size: 19px;
	line-height: 1.55;
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Hotline-Block
   -------------------------------------------------------------------------- */

.kpz-hotline {
	background: var(--kpz-blau);
	color: #fff;
	border-radius: 12px;
	padding: 28px;
}

.kpz-hotline a:not(.kpz-knopf) {
	color: #fff;
}

/* Abstände der Zeilen im Hotline-Block selbst bestimmen. */
.kpz-hotline > *,
.kpz-hotline > .wp-block-group__inner-container > * {
	margin-block: 0 14px;
}

.kpz-hotline > .kpz-label,
.kpz-hotline > .wp-block-group__inner-container > .kpz-label {
	margin-block-end: 4px;
}

.kpz-hotline > *:last-child,
.kpz-hotline > .wp-block-group__inner-container > *:last-child {
	margin-block-end: 0;
}

.kpz-hotline .kpz-label {
	font-family: 'Archivo', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	opacity: 0.8;
}

.kpz-nummer {
	display: inline-block;
	font-size: clamp(30px, 5.5vw, 44px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	margin-block: 0;
}

.kpz-hotline .kpz-zeiten {
	font-size: 15px;
	opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Erreichbarkeitsanzeige
   -------------------------------------------------------------------------- */

.kpz-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 8px 14px;
	min-height: 33px;
}

.kpz-status .kpz-punkt {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #c9d4da;
	flex: none;
}

.kpz-status[data-kpz-status='offen'] .kpz-punkt {
	background: #4fd993;
	box-shadow: 0 0 0 4px rgba(79, 217, 147, 0.22);
}

.kpz-status[data-kpz-status='zu'] .kpz-punkt {
	background: #e0a86a;
}

/* --------------------------------------------------------------------------
   Hinweis auf die Unternehmensnummer
   -------------------------------------------------------------------------- */

.kpz-unr {
	background: var(--kpz-signal);
	color: var(--kpz-signal-schrift);
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 15px;
	line-height: 1.45;
}

.kpz-unr strong {
	font-family: 'Archivo', sans-serif;
}

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */

.kpz-knopf {
	display: inline-block;
	background: var(--kpz-gruen);
	color: #07231a;
	font-weight: 600;
	font-size: 16px;
	padding: 13px 20px;
	border-radius: 8px;
	text-decoration: none;
}

.kpz-knopf:hover,
.kpz-knopf:focus {
	filter: brightness(1.08);
	color: #07231a;
}

/* --------------------------------------------------------------------------
   Voraussetzungen
   -------------------------------------------------------------------------- */

.kpz-voraussetzungen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 1px;
	background: var(--kpz-linie);
	border: 1px solid var(--kpz-linie);
	border-radius: 10px;
	overflow: hidden;
}

.kpz-voraussetzungen > *,
.kpz-voraussetzungen > .wp-block-group__inner-container > * {
	background: #fff;
	padding: 20px;
	margin: 0;
}

.kpz-voraussetzungen strong {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-size: 16px;
	margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   Themenliste
   -------------------------------------------------------------------------- */

.kpz-themen > *,
.kpz-themen > .wp-block-group__inner-container > * {
	margin-block: 0;
}

.kpz-themen ul {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kpz-themen li {
	background: #fff;
	border: 1px solid var(--kpz-linie);
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 15px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Vertrauenssignale
   -------------------------------------------------------------------------- */

.kpz-vertrauen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 22px;
}

.kpz-vertrauen > *,
.kpz-vertrauen > .wp-block-group__inner-container > * {
	margin-block: 0;
}

.kpz-vertrauen p {
	font-size: 16px;
	line-height: 1.5;
}

.kpz-vertrauen strong {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-size: clamp(24px, 4vw, 32px);
	line-height: 1;
	color: var(--kpz-blau);
	font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   Schmale Bildschirme
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.kpz-hotline {
		padding: 20px;
	}

	.kpz-voraussetzungen > *,
	.kpz-voraussetzungen > .wp-block-group__inner-container > * {
		padding: 16px;
	}
}