/* 0.47.0 · Anzeigen (GNM → Anzeigen). Eigenständig; im Artikel, auf Seiten und im Block „GNM Anzeige“. Immer mit Kennzeichnung „Anzeige“. */
.gnm-ad {
	--ad-sans: var(--wp--preset--font-family--geist), system-ui, -apple-system, "Segoe UI", sans-serif;
	--ad-serif: var(--wp--preset--font-family--newsreader), Georgia, "Times New Roman", serif;
	--ad-flaeche: #fff; --ad-text: #242424; --ad-leise: #5b5b60; --ad-rand: #242424; --ad-label: #5b5b60;
	--ad-knopf: var(--gnm-orange, #F4A261); --ad-knopf-text: #1A1A1F;
	clear: both; margin: clamp(26px, 3.4vw, 44px) 0; font-family: var(--ad-sans);
}
.gnm-ad--lila { --ad-flaeche: #F1E9FF; }
.gnm-ad--pfirsich { --ad-flaeche: #FDF1E7; }
.gnm-ad--dunkel { --ad-flaeche: #242424; --ad-text: #fff; --ad-leise: #d6d3cc; --ad-rand: #242424; }
.gnm-ad--block { max-width: 1100px; margin-inline: auto; }

.gnm-ad .gnm-ad__label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 600 12px/1 var(--ad-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ad-label); }
.gnm-ad .gnm-ad__label::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.gnm-ad .gnm-ad__label b { font-weight: 700; color: inherit; }
.gnm-ad .gnm-ad__label span { font-weight: 500; letter-spacing: .08em; }

.gnm-ad a.gnm-ad__karte {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; overflow: hidden;
	border: 1.5px solid var(--ad-rand); border-radius: clamp(18px, 2.2vw, 26px); background: var(--ad-flaeche);
	color: var(--ad-text); text-decoration: none; transition: transform .18s, box-shadow .18s;
}
/* Im Artikeltext darf die Link-Gestaltung des Textes die Karte nicht verändern. */
.gnm-text .gnm-ad a.gnm-ad__karte, .gnm-text .gnm-ad a.gnm-ad__karte:hover { color: var(--ad-text); text-decoration: none; }
.gnm-ad--ohne-bild a.gnm-ad__karte { grid-template-columns: 1fr; }
.gnm-ad a.gnm-ad__karte:hover { transform: translateY(-2px); box-shadow: 0 10px 0 rgba(36, 36, 36, .12); }
.gnm-ad a.gnm-ad__karte:focus-visible { outline: 3px solid var(--gnm-lila, #A875FF); outline-offset: 3px; }
.gnm-ad__bild { display: block; min-height: 180px; background: #e9e6df; }
.gnm-ad__bild .gnm-ad__img, .gnm-ad__bild img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.gnm-ad__inhalt { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(18px, 2.6vw, 30px); }
.gnm-ad .gnm-ad__titel { display: block; font-family: var(--ad-serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.08; letter-spacing: -.02em; color: var(--ad-text); text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
.gnm-ad .gnm-ad__text { display: block; font-size: 16px; line-height: 1.45; color: var(--ad-leise); }
.gnm-ad--dunkel .gnm-ad__text { color: #e9e7e2; }
.gnm-ad .gnm-ad__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gnm-ad .gnm-ad__knopf { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; min-height: 44px; margin-top: 4px; padding: 6px 20px; border-radius: 999px; background: var(--ad-knopf); color: var(--ad-knopf-text); font: 600 15px/1.1 var(--ad-sans); }
.gnm-ad .gnm-ad__knopf i { font-style: normal; transition: transform .18s; }
.gnm-ad a.gnm-ad__karte:hover .gnm-ad__knopf i { transform: translateX(3px); }

/* Im Artikeltext (schmale Spalte): Bild oben, Text darunter. */
.gnm-ad--mitte a.gnm-ad__karte, .gnm-ad--ende a.gnm-ad__karte { grid-template-columns: 1fr; }
.gnm-ad--mitte .gnm-ad__bild, .gnm-ad--ende .gnm-ad__bild { min-height: 0; aspect-ratio: 2 / 1; }

@media (max-width: 720px) {
	.gnm-ad a.gnm-ad__karte { grid-template-columns: 1fr; }
	.gnm-ad__bild { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) { .gnm-ad a.gnm-ad__karte, .gnm-ad .gnm-ad__knopf i { transition: none; } .gnm-ad a.gnm-ad__karte:hover { transform: none; } }

/* Dunkelmodus (nur dort, wo der Schalter erscheint): helle Karten werden dunkle Flächen. */
html[data-gnm-theme="dark"] .gnm-ad { --ad-flaeche: #1B1C21; --ad-text: #ECE9E2; --ad-leise: #b9b6ae; --ad-rand: rgba(236, 233, 226, .45); }
html[data-gnm-theme="dark"] .gnm-ad--dunkel { --ad-flaeche: #26232F; }
html[data-gnm-theme="dark"] .gnm-ad { --ad-label: #b9b6ae; }
html[data-gnm-theme="dark"] .gnm-ad .gnm-ad__text { color: #b9b6ae; }
html[data-gnm-theme="dark"] .gnm-ad a.gnm-ad__karte:hover { box-shadow: 0 10px 0 rgba(0, 0, 0, .35); }