/*
Theme Name: Hinschauen fürs Klima
Theme URI: https://hinschauen-fuers-klima.de/
Author: KLIMA° vor acht
Description: Schlanke Block-Theme für die Kampagnen-Landingpage „Wir schauen hin". Design-Tokens und Hero-Muster 1:1 aus dem Haupt-Theme klima-vor-acht übernommen; bewusst ohne dessen Site-Funktionalität (Presse, Buch, Testimonials, i18n, Carbon).
Requires at least: 6.7
Requires PHP: 8.1
Version: 0.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: full-site-editing, accessibility-ready, block-patterns
Text Domain: hinschauen-fuers-klima
*/

/*
 * Basis: ausgewählte Foundation-Regeln aus klima-vor-acht/style.css (Design-Parität).
 * Die vollständige Dokumentation der Regeln lebt im Haupt-Theme.
 */

:root {
	--kv-border: rgba(5, 43, 142, 0.16);
	--kv-root-gutter: clamp(1rem, 3vw, 3rem);
}

html,
body {
	overflow-x: clip;
	scroll-padding-top: 176px;
	scroll-behavior: smooth;
}

body {
	background: var(--wp--preset--color--paper);
}

/* Textlinks: permanente dünne Unterstreichung, Hover/Fokus verdickt (KERN-UX). */
a {
	text-decoration: underline;
	text-decoration-thickness: 0.0625rem;
	text-underline-offset: 0.1em;
}

a:hover,
a:focus-visible {
	text-decoration-thickness: 3px;
}

a:has(> img) {
	text-decoration: none;
}

/* Standard-Buttons (Ink-Flaeche): Hover/Fokus geht ins Petrol (CI,
 * klar abgesetzt, Kontrast paper/petrol 6.4:1). Die spezifischeren
 * Hover-Regeln (Header-Ghost, Panels-Sekundaer) behalten ihre Effekte. */
.wp-block-button__link {
	transition: background-color 160ms ease, color 160ms ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--petrol);
}

/* Sekundär-Button (Block-Stil „Sekundär“, registriert in functions.php):
 * Ghost in Dunkelgrau – kein Blau auf Mint/Farbflächen; Hover/Fokus
 * füllt dunkel mit hellem Text. */
.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--dunkelgrau);
	color: var(--wp--preset--color--dunkelgrau);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--dunkelgrau);
	color: var(--wp--preset--color--paper);
}

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

/* Fokusring-Kontrast (WCAG 2.4.11): Signal-Gelb liegt auf Paper/Mint
 * unter 3:1 – auf dunklen Flächen daher heller Ring. */
.kv-site-footer :focus-visible,
.kv-hero__overlay :focus-visible,
.kv-band.has-petrol-background-color :focus-visible,
.kv-band.has-koralle-background-color :focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

	.skip-link.screen-reader-text:focus-visible,
	.skip-link.screen-reader-text:focus {
		background: var(--wp--preset--color--ink);
		color: var(--wp--preset--color--paper-25);
		text-decoration: none;
		padding: 1.125rem 1.5rem 1.125rem 2rem;
		border-radius: 0 0 0.75rem 0.75rem;
		outline: 3px solid var(--wp--preset--color--paper);
		outline-offset: 3px;
	}

#wp--skip-link--target:focus,
#wp--skip-link--target:focus-visible {
	outline: none;
}

.wp-site-blocks {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	min-height: 100vh;
	width: 100%;
}

.wp-site-blocks > .alignfull,
.wp-site-blocks .alignfull {
	max-width: 100%;
}

/* Kein Abstand zwischen Inhaltsende und Footer: die letzte Sektion
 * (Petrol-Band) läuft bündig in die Footer-Kante. */
main.wp-block-group {
	padding-block-end: 0;
}

/* Keine vertikalen Ränder zwischen Top-Level-Sektionen (Core blockGap neutralisieren). */
.wp-site-blocks > * {
	margin-block-end: 0;
	margin-block-start: 0;
}

main > .kv-hero,
.wp-block-post-content > .kv-hero {
	margin-block-start: 0;
}

/* Full-bleed breakout für Header, Footer und Hero (identisch zum Haupt-Theme). */
.kv-site-footer {
	box-sizing: border-box;
	margin-inline: calc(50% - 50vw);
	max-width: none;
	width: 100vw;
}

/* ------------------------------------------------------------------ */
/* Hero — Bild + Petrol-Karte                                           */
/* ------------------------------------------------------------------ */

.kv-hero {
	box-sizing: border-box;
	margin-inline: calc(50% - 50vw);
	max-width: none;
	padding: 0;
	position: relative;
	width: 100vw;
}

.kv-hero .wp-block-image {
	margin: 0;
}

.kv-hero > * {
	margin-block-end: 0;
	margin-block-start: 0;
}

.kv-hero__image,
.kv-hero__image img {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.kv-hero__overlay {
	background-color: var(--wp--preset--color--petrol);
	border-radius: 24px;
	bottom: calc(-40px - 4rem);
	box-sizing: border-box;
	color: var(--wp--preset--color--white);
	left: 50%;
	max-width: calc(100vw - 2rem);
	padding: 40px;
	position: absolute;
	text-align: center;
	transform: translateX(-50%);
	width: 943px;
	z-index: 2;
}

.kv-hero__overlay .wp-block-buttons {
	justify-content: center;
}

.kv-hero__overlay .wp-block-button.is-style-hero-primary .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	padding: 0.75rem 1rem;
}

.kv-hero__overlay .wp-block-button.is-style-hero-primary .wp-block-button__link:hover,
.kv-hero__overlay .wp-block-button.is-style-hero-primary .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* Intro-Absätze (aus dem Haupt-Theme): fluid 18–24px bzw. 15–17px. */
p.has-large-font-size {
	font-size: clamp(1.125rem, 2.1vw, 1.5rem) !important;
	line-height: 1.417;
}

p.has-medium-font-size {
	font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
	line-height: 1.412;
}

/* Keep a paper-colored gap below the card, independent of section margins. */
.kv-hero {
	padding-block-end: clamp(2rem, 4vw, 4rem);
}

/* Nach der überlappenden Hero-Karte: Folge-Sektion rückt frei. */
@media (min-width: 783px) {
	.kv-hero__overlay {
		position: relative;
		bottom: auto;
		left: auto;
		transform: none;
		margin-inline: auto;
		margin-block-start: max(calc(6.5rem - 33.75vw), -16rem);
	}

	.kv-hero + .kv-section,
	.kv-hero + * {
		margin-block-start: 4rem;
	}
}

@media (max-width: 782px) {
	.kv-hero__overlay {
		bottom: auto;
		left: auto;
		margin-inline: auto;
		margin-top: calc(min(-2.5rem, calc(6.5rem - 33.75vw)) + 2rem);
		position: relative;
		top: auto;
		transform: none;
		width: calc(100vw - 2rem);
		max-width: 943px;
	}

	.kv-hero__overlay .wp-block-heading.has-huge-font-size {
		font-size: clamp(1.625rem, 7vw, 2.5rem) !important;
	}
}

/* ------------------------------------------------------------------ */
/* Spot-Einbettung: Zwei-Klick-YouTube (lokale Vorschau, iframe nach Klick) */
/* ------------------------------------------------------------------ */

.kv-spot-embed {
	margin: 0;
	padding: 0;
	position: relative;
}

.kv-hero__video:has(iframe) + .kv-hero__overlay {
	margin-block-start: 1.5rem;
}

.kv-spot-embed__play {
	border: 0;
	cursor: pointer;
	display: block;
	padding: 0;
	position: relative;
	width: 100%;
}

.kv-spot-embed__play:focus-visible {
	outline-offset: -4px;
}

.kv-spot-embed__controls {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: min(90%, 30rem);
}

.kv-spot-embed__preview {
	display: block;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.kv-spot-embed__icon {
	align-items: center;
	background: var(--wp--preset--color--petrol);
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	display: flex;
	font-size: 0;
	height: 4rem;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 160ms ease;
	line-height: 1;
	width: 4rem;
}

.kv-spot-embed__icon::before {
	content: '';
	width: 0;
	height: 0;
	border-block: 12px solid transparent;
	border-inline-start: 20px solid currentColor;
	/* Balance the triangle's visual weight around the circle's center. */
	transform: translateX(3px);
}

.kv-spot-embed__play:hover .kv-spot-embed__icon,
.kv-spot-embed__play:focus-visible .kv-spot-embed__icon {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--petrol);
}

.kv-spot-embed__iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	width: 100%;
}

.kv-spot-embed__consent {
	background: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--white);
	border-radius: 8px;
	font-size: clamp(0.75rem, 1.3vw, 0.875rem);
	line-height: 1.4;
	padding: 0.6rem 0.9rem;
	text-align: center;
}

@media (max-width: 782px) {
	/* Kontrollelemente tiefer: Button sonst auf den Gesichtern.
	 * Muss NACH den Basisregeln stehen (gleiche Spezifität). */
	.kv-spot-embed__controls {
		top: 55%;
	}
}

@media (max-width: 767px) {
	/* Kleinerer Play-Button nur auf schmalen Screens: 4rem wirkt auf
	 * dem 16:9-Thumb wie eine Maske über den Gesichtern. */
	.kv-spot-embed__icon {
		height: 3rem;
		width: 3rem;
	}

	.kv-spot-embed__icon::before {
		border-block-width: 9px;
		border-inline-start-width: 15px;
		transform: translateX(2px);
	}
}

/* ------------------------------------------------------------------ */
/* Sponsoren: drei Hauptkacheln untereinander + Logoreihe              */
/* ------------------------------------------------------------------ */

.kv-sponsor-tile {
	align-items: center;
	background: var(--wp--preset--color--mist);
	border: 0;
	border-radius: 16px;
	box-sizing: border-box;
	display: flex;
	/* Kachel ist jetzt ein echter Link: Unterstreichung aus, Cursor pointer. */
	text-decoration: none;
	color: inherit;
	justify-content: center;
	margin-inline: auto;
	max-width: 100%;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	transition: transform 0.2s ease, opacity 0.2s ease;
	width: 100%;
}

.kv-sponsor-tile:hover,
.kv-sponsor-tile:focus-within {
	transform: translateY(-2px);
}

.kv-sponsor-tile img {
	height: auto;
	max-height: 120px;
	max-width: min(100%, 420px);
	width: auto;
}

.kv-sponsor-tile--ews img {
	max-height: 160px;
}

.kv-sponsor-row {
	display: grid;
	gap: clamp(1rem, 2.5vw, 2rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block: 2rem;
}

.kv-sponsor-row a {
	align-items: center;
	background: var(--wp--preset--color--mist);
	border: 0;
	border-radius: 16px;
	box-sizing: border-box;
	color: inherit;
	display: flex;
	justify-content: center;
	min-height: 120px;
	padding: 1rem;
	text-decoration: none;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.kv-sponsor-row a:hover,
.kv-sponsor-row a:focus-visible {
	transform: translateY(-2px);
}

.kv-sponsor-row img {
	height: auto;
	max-height: 90px;
	max-width: 100%;
	width: auto;
}

@media (max-width: 782px) {
	.kv-sponsor-row {
		grid-template-columns: 1fr;
	}
}

/* Frontpage: Live-Seiten-Embed vollflächig über die gesamte Höhe. */
.kv-live-embed {
	border: 0;
	display: block;
	height: 100vh;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
}

/* ------------------------------------------------------------------ */
/* Farbige Sektionsbänder (Kampagnenfarben, WCAG-geprüfte Paare)       */
/* Vollbreite wie Header/Footer; Inhalte bleiben constrained.          */
/* ------------------------------------------------------------------ */

.kv-band {
	box-sizing: border-box;
	margin-inline: calc(50% - 50vw);
	max-width: none;
	padding-inline: var(--kv-root-gutter);
	width: 100vw;
}

/* Im Editor kappt das WP-Layout-System Top-Level-Blöcke auf Content-Size
 * (752px). Zusammen mit width:100vw bleibt nur der Cap wirksam — und die
 * fixe 943px-Hero-Karte überragt die eigene Sektion. Editor-seitig den Cap
 * aufheben; im Frontend greift max-width:none ohnehin. */
.editor-styles-wrapper .wp-block.kv-hero,
.editor-styles-wrapper .wp-block.kv-band {
	max-width: none;
}

/* Inhalt der Bänder bündig zur übrigen Seitenspalte (Content-Size,
 * zzentriert); das Inline-Padding des Bandes übernimmt den Gutter. */
.kv-band > * {
	max-width: var(--wp--style--global--content-size, 752px);
	margin-inline: auto;
}

/* Links auf Petrol: paper statt theme-ink (Ink auf Petel wäre kontrastarm);
 * Buttons behalten ihre eigenen Farben. */
.kv-band.has-petrol-background-color a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--paper);
}

/* Keine vertikalen Abstände zwischen den Sektionen: Core-Layout-Gap
 * nur an den Bändern neutralisieren (Abstände innerhalb der Paper-
 * Zone bleiben unberührt). */
.wp-block-post-content > .wp-block-group.kv-band {
	margin-block: 0;
}

/* Heading-Skalierung wie auf klimavoracht.de: h2=x-large, h3=large,
 * h4=dazwischen (medium-large). has-huge-font-size (Hero) bleibt
 * spezifischer und gewinnt. */
.wp-block-post-content h2.wp-block-heading { font-size: var(--wp--preset--font-size--x-large); }
.wp-block-post-content h3.wp-block-heading { font-size: var(--wp--preset--font-size--large); }
.wp-block-post-content h4.wp-block-heading { font-size: var(--wp--preset--font-size--medium-large); }

/* Paper-Abschnitt „Warum wir hinschauen“ in derselben Textspalte wie
 * die Farbband-Inhalte (Content-Size, zentriert) – keine Kante zwischen
 * den Sektionen. Direct children: nur die Überschrift und zwei Absätze;
 * Hero und Spot bringen eigene Breiten mit. */
.wp-block-post-content > .wp-block-heading,
.wp-block-post-content > p {
	max-width: var(--wp--style--global--content-size, 752px);
	margin-inline: auto;
}

/* Share-Bar auf Koralle: helle Pills, damit die Ink-Icons lesbar
 * bleiben (Ink auf Koralle wäre unlesbar). */
.has-koralle-background-color .kv-share-bar__btn {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
}

/* Share-Pills auf Rosé: helle Flaeche + Ink-Rand (Paper alone waere
 * formlos auf Rosé, 1.1:1). Hover bleibt Petrol. */
.has-rose-background-color .kv-share-bar__btn {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--ink);
}

/* Mehr Luft zwischen Sponsoren-Buttons und der nächsten Sponsoren-
 * Überschrift (Abstand zur Folgen-Sektion kommt aus dem Mint-Band). */
.kv-band.has-creme-background-color .wp-block-buttons {
	margin-block-end: clamp(2.5rem, 6vw, 4.5rem);
}

/* ------------------------------------------------------------------ */
/* Initiatoren: Wortmarke links, Text + Sekundär-Button rechts         */
/* ------------------------------------------------------------------ */

.kv-initiator__brand .wp-block-image {
	margin: 0;
}

/* Wortmarke auf weißem Chip (hinterlegt die blau Logo-Variante auf dem
 * Mint-Band; Petrol auf Weiß = 6.8:1, Mint allein gäbe nur 3.2:1).
 * Mobil volle Breite; auf Desktop füllt der Chip die Spaltenhöhe. */
.kv-initiator__logo {
	background: #fff;
	border-radius: 20px;
	box-sizing: border-box;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	width: 100%;
}

/* Wortmarke (768×98) füllt die schmalere Spalte, damit sie neben dem
 * Text nicht zu klein wird; unterhalb der Stack-Grenze bündig oben. */
.kv-initiator__brand img {
	display: block;
	height: auto;
	width: 100%;
	max-width: 300px;
}

/* Mobil: Chip volle Breite, Wortmarke horizontal zentriert darin. */
@media (max-width: 781.98px) {
	.kv-initiator__logo {
		display: flex;
		justify-content: center;
	}
}

/* Desktop (Spalten nebeneinander): nur der weiße Chip des Marken-
 * Blocks stretched auf die Höhe der Textspalte; Wortmarke selbst
 * bleibt ungestreckt und vertikal zentriert im Chip. */
@media (min-width: 782px) {
	.wp-block-column.kv-initiator__brand {
		align-self: stretch;
		display: flex;
		flex-direction: column;
	}
	.kv-initiator__brand .wp-block-image {
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ */
/* Share-Bar: sechs gleich breite, zusammenhängende Ghost-Buttons      */
/* (Icon-Leiste gem. Redaktions-Mockup; ein Rahmen, geteilte Kanten)   */
/* ------------------------------------------------------------------ */

.kv-share-bar {
	display: flex;
	margin-inline: auto;
	max-width: 100%;
	width: min(100%, 860px);
}

.kv-share-bar__btn {
	align-items: center;
	border: 1px solid var(--wp--preset--color--ink);
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	display: flex;
	flex: 1 1 0;
	justify-content: center;
	padding: 1.15rem 0.5rem;
	text-decoration: none;
	transition: background-color 160ms ease;
}

/* Hover/Fokus: Petrol-Fläche, Icons reinweiß (Kontrast 6,4:1). */
.kv-share-bar__btn:hover,
.kv-share-bar__btn:focus-visible {
	background-color: var(--wp--preset--color--petrol);
	border-color: var(--wp--preset--color--petrol);
}

.kv-share-bar__btn:hover + .kv-share-bar__btn,
.kv-share-bar__btn:focus-visible + .kv-share-bar__btn {
	border-inline-start-color: var(--wp--preset--color--petrol);
}

.kv-share-bar__btn:hover img,
.kv-share-bar__btn:focus-visible img {
	filter: brightness(0) invert(1);
}

/* Zusammenhängend: nur die äußere Umrandung hat runde Ecken,
 * Innenkanten werden als gemeinsame Trennlinie gezeichnet. */
.kv-share-bar__btn + .kv-share-bar__btn {
	border-inline-start: none;
}

.kv-share-bar__btn:first-child {
	border-radius: 10px 0 0 10px;
}

.kv-share-bar__btn:last-child {
	border-radius: 0 10px 10px 0;
}

.kv-share-bar__btn img {
	height: 26px;
	width: 26px;
}

/* Normalzustand: Icons schwarz (auf hellen Pills überall lesbar);
 * der Hover invertiert weiter zu Weiß. */
.kv-share-bar__btn > img {
	filter: brightness(0);
}

@media (max-width: 480px) {
	.kv-share-bar__btn {
		padding: 1rem 0.25rem;
	}

	.kv-share-bar__btn img {
		height: 22px;
		width: 22px;
	}
}

/* ------------------------------------------------------------------ */
/* Footer — bewusst einfach                                            */
/* ------------------------------------------------------------------ */

.kv-site-footer {
	background: var(--wp--preset--color--petrol);
	border-top: 0;
	color: var(--wp--preset--color--paper);
}

.kv-footer-inner {
	align-items: flex-end;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-inline: auto;
	max-width: 1136px;
	/* wie Header: Gutter gegen Abschneiden am Vollbleed-Rand */
	padding: 2rem var(--kv-root-gutter);
}

.kv-footer-inner p {
	color: var(--wp--preset--color--paper-25);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.kv-footer-inner a {
	color: var(--wp--preset--color--paper);
}

.kv-footer-inner a:hover,
.kv-footer-inner a:focus-visible {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.kv-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

@media (max-width: 782px) {
	.kv-footer-inner {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* Visuell versteckter Text (wie im Haupt-Theme). */
.kv-screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ------------------------------------------------------------------ */
/* Sponsoren-Panels: Kachel pro Hauptsponsor (wie Kooperationen auf    */
/* der Hauptseite) – Logo, Name, Warum/Was, Sekundär-Button.           */
/* ------------------------------------------------------------------ */

.kv-sponsor-panels {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
	margin-block: 2rem 0;
}

.kv-sponsor-panel {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--dunkelgrau);
	border-radius: 16px;
	box-sizing: border-box;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.kv-sponsor-panel__head {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	text-align: left;
}

.kv-sponsor-panel .kv-sponsor-tile {
	margin-inline: auto;
	max-width: 320px;
	padding: 0.75rem 1.5rem;
}

.kv-sponsor-panel .kv-sponsor-tile img {
	max-height: 90px;
}

.kv-sponsor-panel .kv-sponsor-tile--ews img {
	max-height: 120px;
}

.kv-sponsor-panel__name {
	color: var(--wp--preset--color--dunkelgrau);
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	margin: 0;
}

.kv-sponsor-panel__label {
	color: var(--wp--preset--color--dunkelgrau);
	font-size: 1rem;
	margin-bottom: 0.5rem;
}

.kv-sponsor-panel .wp-block-buttons {
	margin-bottom: 0 !important;
	margin-top: 1.25rem;
}

/* Sekundaer-Button in den Panels: Ink statt Dunkelgrau (Theme-CI). */
.kv-sponsor-panel .is-style-secondary .wp-block-button__link {
	border-color: var(--wp--preset--color--dunkelgrau);
	color: var(--wp--preset--color--dunkelgrau);
}

.kv-sponsor-panel .is-style-secondary .wp-block-button__link:hover,
.kv-sponsor-panel .is-style-secondary .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--dunkelgrau);
	border-color: var(--wp--preset--color--dunkelgrau);
	color: var(--wp--preset--color--paper);
}