/* WhatsApp-Kanal. Passt sich ans Theme an: Schrift, Textfarbe und Linkfarbe kommen vom Theme,
   Flächen und Linien leiten sich aus der Textfarbe ab (funktioniert auch auf dunklen Themes).
   Nur die Buttonfarbe ist fix und unter Einstellungen → WhatsApp-Kanal einstellbar.
   Feinabstimmung im Theme möglich: .wak { --wak-flaeche: #f4f7f9; --wak-gedimmt: #6b6b6b; } */

.wak {
	--wak-flaeche-wert: var(--wak-flaeche, color-mix(in srgb, currentColor 6%, transparent));
	--wak-linie-wert: var(--wak-linie, color-mix(in srgb, currentColor 18%, transparent));
	--wak-gedimmt-wert: var(--wak-gedimmt, color-mix(in srgb, currentColor 65%, transparent));
}

.wak,
.wak *,
.wak *::before,
.wak *::after { box-sizing: border-box; }

/* Abstände per gap statt margin, damit Theme- und Plugin-Regeln für p und Buttons sie nicht aufheben */
body .wak p { margin: 0; }
body .wak .wak-knoepfe { margin: 0; }
.wak-kompakt,
.wak-flaeche-text,
.wak-beitrag-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.wak.wak-seite > * + * { margin-top: 16px; }
/* Meta-Zeile direkt unter dem Button gehört zu ihm: nur 8 px Abstand */
body .wak .wak-knoepfe + .wak-meta { margin-top: -8px; }
body .wak .wak-meta + .wak-meta { margin-top: -14px; }

/* Button: Markup des Block-Editors, Aussehen kommt vom Theme */
.wak .wak-knoepfe { display: flex; }
.wak .wak-knoepfe .wp-block-button { margin: 0; }
/* Symbol und Text stehen in einer Textzeile: funktioniert auch, wenn das Theme den Button
   als block, inline-block oder flex darstellt */
body .wak .wak-button {
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: anywhere;
}
body .wak .wak-button .wak-icon {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin: 0 0.45em 0 0;
	vertical-align: -0.2em;
}
body .wak .wak-button .wak-button-inhalt { display: inline; white-space: normal; }
body .wak .wak-button .wak-button-inhalt > span:not([class]) { display: inline; vertical-align: baseline; }
.wak .wak-button[style]:hover,
.wak .wak-button[style]:focus-visible { filter: brightness(1.1); }

/* Kleine graue Zeilen wie .geo-meta */
.wak .wak-meta {
	font-size: 13px;
	line-height: 1.5;
	color: var(--wak-gedimmt-wert);
}

/* „… →“-Link: Linkfarbe des Themes, fett */
body .wak .wak-more a,
body .wak .wak-more a:visited {
	font-weight: 700;
	text-decoration: none;
}
body .wak .wak-more a:hover,
body .wak .wak-more a:focus-visible { text-decoration: underline; }

/* Liste „Was du bekommst“ */
body .wak .wak-punkte {
	list-style: none;
	margin: 0;
	padding: 0;
}
body .wak .wak-punkte li {
	position: relative;
	margin: 0;
	padding: 3px 0 3px 22px;
	border-bottom: 1px dotted var(--wak-linie-wert);
	list-style: none;
}
body .wak .wak-punkte li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 0.62em;
	width: 9px;
	height: 5px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

/* QR-Code: überall sichtbar, nur am Handy ausgeblendet (dort lässt er sich nicht scannen) */
.wak .wak-qr {
	display: block;
	margin: 0;
	line-height: 0;
}
.wak .wak-qr svg {
	display: block;
	width: 100%;
	height: auto;
}
.wak .wak-qr figcaption {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--wak-gedimmt-wert);
}
@media (max-width: 782px) and (pointer: coarse) {
	body .wak .wak-qr { display: none; }
}

/* Widget ---------------------------------------------------------------- */

/* Button über die volle Breite, egal ob das Theme ihn inline, inline-block oder block darstellt */
.wak-kompakt .wak-knoepfe,
.wak-kompakt .wak-knoepfe .wp-block-button { display: block; width: 100%; }
body .wak-kompakt .wak-button { display: block; width: 100%; max-width: 100%; }

/* Button als Karte mit QR-Code (Widget), auf allen Geräten gleich ------- */

.wak-kompakt { container-type: inline-size; }

body .wak .wak-qr-button {
	padding: 8px 14px 8px 8px;
	border-radius: 6px; /* starke Rundungen des Themes würden den Code anschneiden */
	text-align: left;
}
body .wak .wak-qr-button .wak-button-inhalt {
	display: flex;
	align-items: center;
	gap: 14px;
	white-space: normal;
}
.wak .wak-qr-feld {
	flex: none;
	display: block;
	width: 84px; /* rund 2 × 2 cm am Bildschirm, Mindestgröße für die Handykamera */
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}
.wak .wak-qr-feld svg {
	display: block;
	width: 100%;
	height: auto;
}
.wak .wak-qr-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
	line-height: 1.35;
}
.wak .wak-qr-titel {
	display: block;
	font-weight: 400;
}
.wak .wak-qr-aktion {
	display: block;
	font-weight: 700;
}
/* Schmale Sidebar (unter 300 px): Code über dem Text, damit der Text nicht in Einzelwörter zerfällt */
@container (max-width: 299.98px) {
	body .wak .wak-qr-button { padding: 10px; }
	body .wak .wak-qr-button .wak-button-inhalt { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Infoseite ------------------------------------------------------------- */

.wak-seite .wak-flaeche {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	padding: 18px 20px;
	border-radius: 4px;
	background: var(--wak-flaeche-wert);
}
.wak-seite .wak-flaeche-text { flex: 1 1 260px; }
.wak-seite .wak-lead { font-size: 1.15em; font-weight: 700; }
.wak-seite .wak-qr { flex: 0 0 160px; text-align: center; }
.wak-seite .wak-h { margin: 30px 0 12px !important; }
.wak-seite .wak-schritte li,
.wak-seite .wak-info li { margin-bottom: 6px; }

/* Hinweis am Beitragsende: Fläche wie „Aktuell“ bei GeoSphere Wetter ---- */

.wak-beitrag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 30px 0 0;
	padding: 14px 16px;
	border-radius: 4px;
	background: var(--wak-flaeche-wert);
}
.wak-beitrag .wak-beitrag-text { flex: 1 1 260px; }
.wak-beitrag .wak-beitrag-text { gap: 6px; }
.wak-beitrag .wak-zeile {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 13px;
}
.wak-beitrag .wak-knoepfe { flex: none; margin: 0; }

/* Leiste am Handy ------------------------------------------------------- */

.wak-leiste {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 4px calc(8px + env(safe-area-inset-bottom)) 16px;
	background: #fff;
	color: #333;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.12);
	font-size: 14px;
}
.wak-leiste[hidden] { display: none; }

.wak-leiste .wak-leiste-text { flex: 1; line-height: 1.35; }
.wak-leiste .wak-knoepfe { flex: none; }
.wak-leiste .wak-button { padding: 0.5em 0.9em; font-size: 14px; line-height: 1.2; }
body .wak-leiste .wak-leiste-zu {
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wak-gedimmt-wert);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}

body.wak-leiste-offen { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

@media (min-width: 783px) {
	.wak-leiste { display: none !important; }
	body.wak-leiste-offen { padding-bottom: 0; }
}