/*
Theme Name:   GeldRat
Theme URI:    https://www.geldrat.de/
Description:  Schlankes Block-Theme für GeldRat (Child von Twenty Twenty-Five). Markenfarben, Muster für Startseite, Vergleiche und Artikel, Newsletter-Anmeldung und datenschutzfreundliche YouTube-Videos (Zwei-Klick).
Author:       GeldRat
Template:     twentytwentyfive
Version:      1.0.42
Requires at least: 6.6
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  geldrat
*/

/* ==========================================================================
   Grundlagen
   ========================================================================== */
:root {
	--gr-radius: 16px;
	--gr-radius-klein: 12px;
	--gr-schatten: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(38, 50, 63, .07);
	--gr-linie: var(--wp--preset--color--accent-6);
	--gr-leise: var(--wp--preset--color--accent-4);
	--gr-orange: var(--wp--preset--color--accent-1);
	--gr-blau: var(--wp--preset--color--accent-2);
	--gr-dunkel: var(--wp--preset--color--accent-3);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { height: auto; }

.gr-eyebrow {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gr-blau);
	margin-bottom: .3em;
}

.gr-leise { color: var(--gr-leise); }
.gr-mehr a { font-weight: 600; text-decoration: none; }
.gr-mehr a:hover { text-decoration: underline; }

/* Ganze Karte klickbar: erster Link in der Karte spannt sich über die Karte */
.gr-klickbar { position: relative; }
.gr-klickbar :is(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gr-klickbar :is(h2, h3, h4) a { text-decoration: none; color: inherit; }

/* ==========================================================================
   Kopf (Header)
   ========================================================================== */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; }
}

.gr-kopf {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--gr-linie);
}
.gr-kopf__innen { min-height: 68px; gap: 24px; }
.gr-logo { gap: 10px; }
.gr-markenname { margin: 0; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; white-space: nowrap; }
.gr-markenname a { color: var(--gr-dunkel); text-decoration: none; }
.gr-fuss .gr-markenname a { color: #fff; }
.gr-menue { margin-left: auto; font-weight: 500; font-size: .95rem; }
.gr-menue a { text-decoration: none; }
.gr-menue a:hover { color: var(--gr-blau); }
.gr-kopf__aktion { gap: 14px; }

.gr-yt-link { margin: 0; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.gr-yt-link a { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 6px; }
.gr-yt-link a::before,
.gr-yt-icon::before {
	content: "";
	width: 26px;
	height: 18px;
	border-radius: 5px;
	background: var(--wp--preset--color--youtube) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M10.5 5v8l6.5-4z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
	flex: none;
}
.gr-yt-icon::before { display: inline-block; vertical-align: middle; }
@media (max-width: 960px) {
	.gr-kopf .gr-yt-link { display: none; }
	.gr-menue { margin-left: 0; order: 3; }
}

/* ==========================================================================
   Buttons (Stile im Block-Editor auswählbar)
   ========================================================================== */
.wp-element-button,
.wp-block-button__link { transition: background-color .15s, border-color .15s; white-space: nowrap; }
.wp-block-button.is-style-klein .wp-block-button__link { padding: 9px 16px; font-size: .92rem; }
.wp-block-button.is-style-dunkel .wp-block-button__link { background: var(--gr-dunkel); color: #fff; }
.wp-block-button.is-style-dunkel .wp-block-button__link:hover { background: var(--wp--preset--color--brand-700); }
.wp-block-button.is-style-youtube .wp-block-button__link { background: var(--wp--preset--color--youtube); color: #fff; }
.wp-block-button.is-style-youtube .wp-block-button__link:hover { background: #d6002b; }
.wp-block-button.is-style-rahmen .wp-block-button__link { background: transparent; color: inherit; border: 1.5px solid currentColor; }
.wp-block-button.is-style-rahmen .wp-block-button__link:hover { background: rgba(127, 127, 127, .1); }

/* ==========================================================================
   Blockstile: Gruppe, Liste
   ========================================================================== */
.wp-block-group.is-style-karte {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--gr-linie);
	border-radius: var(--gr-radius);
	box-shadow: var(--gr-schatten);
	padding: 22px;
}
.wp-block-group.is-style-hinweis {
	background: var(--wp--preset--color--accent-5);
	border-left: 4px solid var(--gr-orange);
	border-radius: 0 var(--gr-radius) var(--gr-radius) 0;
	padding: 18px 22px;
}
.wp-block-group.is-style-orange {
	background: var(--gr-orange);
	color: var(--gr-dunkel);
	border-radius: var(--gr-radius);
	padding: 24px;
}
.wp-block-group.is-style-dunkel {
	background: var(--gr-dunkel);
	color: #fff;
	border-radius: var(--gr-radius);
	padding: 24px;
}
.wp-block-group.is-style-dunkel :is(h2, h3, h4) { color: #fff; }
.wp-block-group.is-style-dunkel a:not(.wp-element-button) { color: var(--gr-orange); }

ul.is-style-haken,
ul.is-style-vorteile,
ul.is-style-nachteile { list-style: none; padding-left: 0; }
ul.is-style-haken li,
ul.is-style-vorteile li,
ul.is-style-nachteile li { position: relative; padding: 3px 0 3px 26px; }
ul.is-style-haken li::before,
ul.is-style-vorteile li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--wp--preset--color--gruen); }
ul.is-style-nachteile li::before { content: "✕"; position: absolute; left: 0; font-weight: 800; color: var(--wp--preset--color--rot); }

/* ==========================================================================
   Seitenkopf (Seiten + Vergleiche) und Artikelkopf
   ========================================================================== */
.gr-seitenkopf {
	background: linear-gradient(155deg, var(--gr-dunkel), var(--wp--preset--color--brand-800) 55%, var(--gr-blau));
	color: #fff;
	padding-top: 32px;
	padding-bottom: 40px;
	margin-bottom: 32px;
}
.gr-seitenkopf h1 { color: #fff; }
.gr-seitenkopf a { color: inherit; }

.gr-aktualisiert { font-size: .85rem; }
.gr-aktualisiert::before { content: "✓ Aktualisiert am "; }
.gr-seitenkopf .gr-aktualisiert {
	display: inline-block;
	background: rgba(255, 170, 0, .18);
	color: var(--gr-orange);
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
}

.gr-artikelkopf { padding-top: 32px; }
.gr-themen a {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-100);
	color: var(--wp--preset--color--brand-700);
	text-decoration: none;
}
.gr-themen .wp-block-post-terms__separator { display: none; }
.gr-meta {
	font-size: .88rem;
	color: var(--gr-leise);
	border-top: 1px solid var(--gr-linie);
	border-bottom: 1px solid var(--gr-linie);
	padding: 12px 0;
	gap: 8px 18px;
}
.gr-meta a { color: inherit; }
.gr-meta .wp-block-post-author-name::before { content: "von "; }
.gr-meta .wp-block-post-author-name { font-weight: 700; color: var(--wp--preset--color--contrast); }

/* ==========================================================================
   Startseite
   ========================================================================== */
.gr-abschnitt { padding-top: 56px; padding-bottom: 56px; }
.gr-abschnitt--grau { background: var(--wp--preset--color--hintergrund); }
.gr-abschnitt--weiss { background: var(--wp--preset--color--base); border-top: 1px solid var(--gr-linie); border-bottom: 1px solid var(--gr-linie); }
.gr-abschnitt-kopf { gap: 16px; margin-bottom: 24px; align-items: flex-end; }
.gr-abschnitt-kopf h2 { margin: 0; }
.gr-abschnitt-kopf p { margin: 0; }

/* Vollbreite Bereiche ohne weiße Lücken aneinander */
.gr-seite { margin-top: 0; }
.gr-seite .wp-block-post-content > .alignfull { margin-top: 0; margin-bottom: 0; }
.wp-block-group.gr-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 781px) { .wp-block-group.gr-raster-3 { grid-template-columns: 1fr; } }

/* Hero */
.gr-hero {
	background: linear-gradient(155deg, var(--gr-dunkel) 0%, var(--wp--preset--color--brand-800) 45%, var(--gr-blau) 100%);
	color: #fff;
	padding-top: 56px;
	padding-bottom: 64px;
	position: relative;
	overflow: hidden;
}
.gr-hero::after {
	content: "";
	position: absolute;
	right: -140px;
	top: -140px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 170, 0, .22), transparent 70%);
	pointer-events: none;
}
.gr-hero > * { position: relative; z-index: 1; }
.gr-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.1rem); }
.gr-hero h1 em { font-style: normal; color: var(--gr-orange); }
.gr-hero .gr-lead { font-size: 1.12rem; color: #d5dde6; max-width: 34em; }
.gr-beweis {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	padding: 6px 14px 6px 8px;
	font-size: .85rem;
}
.gr-beweis strong { color: var(--gr-orange); }
.gr-bonus { font-size: .92rem; color: #e8edf2; }
.gr-bonus strong { color: var(--gr-orange); }
.gr-bonus a { color: inherit; }
.gr-vertrauen { font-size: .85rem; color: #b3c0cd; gap: 6px 18px; }
.gr-vertrauen p { margin: 0; }
.gr-vertrauen p::before { content: "✓ "; color: var(--gr-orange); font-weight: 700; }

.gr-nl-karte {
	background: #fff;
	color: var(--wp--preset--color--contrast);
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
	padding: 22px;
	transform: rotate(1.2deg);
}
.gr-nl-karte__kopf { font-size: .8rem; color: var(--gr-leise); margin-bottom: 4px; }
.gr-nl-karte__kopf strong { color: var(--wp--preset--color--contrast); }
.gr-nl-punkt { border-top: 1px solid var(--gr-linie); padding: 11px 0; margin: 0 !important; font-weight: 600; font-size: .93rem; line-height: 1.35; }
.gr-nl-punkt small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gr-blau); }
@media (max-width: 781px) {
	.gr-nl-karte { transform: none; }
	.gr-hero { padding-top: 36px; padding-bottom: 44px; }
}

/* Leiste für YouTube-Zuschauer */
.gr-ytleiste { background: var(--gr-orange); color: var(--gr-dunkel); text-align: center; font-weight: 600; font-size: .95rem; padding-top: 12px; padding-bottom: 12px; }
.gr-ytleiste p { margin: 0; }
.gr-ytleiste a { color: inherit; font-weight: 800; }

/* Karten „Diese Woche“ */
.gr-woche { background: #fff; border: 1px solid var(--gr-linie); border-radius: var(--gr-radius); box-shadow: var(--gr-schatten); padding: 20px; transition: transform .15s; }
.gr-woche:hover { transform: translateY(-3px); }
.gr-woche h3 { font-size: 1.05rem; margin: 0 0 6px; }
.gr-woche p { margin: 0; color: var(--gr-leise); font-size: .9rem; }
.gr-woche .gr-weiter { margin-top: 12px; color: var(--wp--preset--color--brand-700); font-weight: 600; }

.gr-etikett {
	display: inline-block;
	font-size: .72rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 4px 10px;
	border-radius: 999px;
	margin: 0 0 12px !important;
}
.gr-etikett--deal { background: var(--wp--preset--color--amber-100); color: var(--wp--preset--color--amber-700); }
.gr-etikett--zins { background: var(--wp--preset--color--brand-100); color: var(--wp--preset--color--brand-700); }
.gr-etikett--video { background: var(--wp--preset--color--rot-hell); color: #c4002a; }
.gr-etikett--tipp { background: var(--wp--preset--color--gruen-hell); color: var(--wp--preset--color--gruen); }

/* Neueste Beiträge (Abfrage-Loop) */
.gr-beitrag { background: #fff; border: 1px solid var(--gr-linie); border-radius: var(--gr-radius); box-shadow: var(--gr-schatten); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .15s; }
.gr-beitrag:hover { transform: translateY(-3px); }
.gr-beitrag .wp-block-post-featured-image { margin: 0; }
.gr-beitrag .wp-block-post-featured-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.gr-beitrag__text { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.gr-beitrag__text > * { margin: 0 0 8px; }
.gr-beitrag .wp-block-post-title { font-size: 1.04rem; }
.gr-beitrag .wp-block-post-date { margin-top: auto; font-size: .82rem; color: var(--gr-leise); }
.gr-beitrag .wp-block-post-terms { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.gr-beitrag .wp-block-post-terms a { color: var(--gr-blau); text-decoration: none; position: relative; z-index: 1; }

/* Von Hand verkleinerte Bilder (feste Breite + Höhe im Editor) nicht verzerren */
.entry-content .wp-block-image.is-resized img { object-fit: contain; }

/* Listen: Suche, Kategorien/Archive, Beitragsübersicht (templates/search|archive|index.html) */
.gr-liste .wp-block-query { margin-block: 8px 56px; }
.gr-liste .wp-block-post-template.is-layout-grid { gap: 22px; }
.gr-liste .gr-beitrag .wp-block-post-title { font-size: 1.1rem; }
.gr-liste .wp-block-post-excerpt { font-size: .92rem; color: var(--gr-leise); }
.gr-liste .wp-block-post-excerpt__excerpt { margin: 0; }
.gr-liste .wp-block-post-excerpt__more-text { display: none; }
.gr-liste .wp-block-search.gr-suche { max-width: 560px; margin-top: 12px; }
.gr-liste .wp-block-search__input { border: 1px solid var(--gr-linie); border-radius: 10px; padding: 10px 14px; }
.gr-liste .wp-block-search__button { border-radius: 10px; margin-left: 8px; }
.gr-seitenzahlen { margin-top: 32px; gap: 8px; font-weight: 600; }
.gr-seitenzahlen .page-numbers { padding: 6px 10px; border-radius: 8px; text-decoration: none; }
.gr-seitenzahlen .page-numbers.current { background: var(--gr-blau); color: #fff; }
@media (max-width: 900px) { .gr-liste .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gr-liste .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr; } }

/* YouTube-Bereich */
.gr-yt-bereich { background: var(--gr-dunkel); color: #fff; }
.gr-yt-bereich h2, .gr-yt-bereich h3 { color: #fff; }
.gr-yt-bereich .gr-eyebrow { color: var(--gr-orange); }
.gr-yt-bereich .gr-leise { color: #b3c0cd; }
.gr-kanal { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--gr-radius); padding: 16px 20px; margin-top: 22px; gap: 16px; }
.gr-kanal p { margin: 0; }
.gr-kanal small { color: #9fb0c1; }

/* Vergleichs-Kacheln: 5 / 3 / 2 pro Zeile */
.wp-block-group.gr-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .wp-block-group.gr-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wp-block-group.gr-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gr-kachel { background: #fff; border: 1px solid var(--gr-linie); border-radius: 14px; padding: 18px 14px; text-align: center; transition: border-color .15s, transform .15s; }
.gr-kachel:hover { border-color: var(--gr-orange); transform: translateY(-2px); }
.gr-kachel p { margin: 0; }
.gr-kachel .gr-symbol { font-size: 1.8rem; line-height: 1.2; margin-bottom: 6px; }
.gr-kachel h3 { font-size: .95rem; margin: 0; }
.gr-kachel .gr-leise { font-size: .8rem; }

/* Start hier */
.gr-schritt .gr-nummer {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--gr-orange);
	color: var(--gr-dunkel);
	font-weight: 800;
	display: grid;
	place-items: center;
	margin-bottom: 12px;
}
.gr-schritt p { color: var(--gr-leise); font-size: .92rem; }

/* Über mich + Autorenbox */
.gr-avatar {
	flex: none;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--gr-orange), #ffcb5c);
	display: grid;
	place-items: center;
	font-size: 3.2rem;
	margin: 0;
	border: 6px solid #fff;
	box-shadow: var(--gr-schatten);
	overflow: hidden;
}
.gr-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Porträt (Bild-Block): ohne Verlauf dahinter, mit leichtem orangem Leuchten */
.gr-avatar.wp-block-image { background: none; box-shadow: 0 0 34px 8px rgba(255, 170, 0, .42), var(--gr-schatten); }
.gr-avatar.wp-block-image img { border-radius: 50%; display: block; }
.gr-fakten { gap: 28px; }

/* [geldrat_social] – runde Symbol-Links */
.gr-social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gr-social a {
	width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
	background: #eef1f5; color: var(--gr-blau, #566b82); transition: background .15s, color .15s;
}
.gr-social a:hover, .gr-social a:focus-visible { background: var(--gr-orange); color: #1f2933; }
.gr-fuss .gr-social a { background: rgba(255, 255, 255, .1); color: #fff; }
.gr-fuss .gr-social a:hover, .gr-fuss .gr-social a:focus-visible { background: var(--gr-orange); color: #1f2933; }
@media (max-width: 600px) { .gr-ueber .gr-social { justify-content: center; } }
.gr-fakten p { margin: 0; font-size: .85rem; color: var(--gr-leise); }
.gr-fakten strong { display: block; font-size: 1.4rem; color: var(--gr-dunkel); }

.gr-autor { background: var(--wp--preset--color--accent-5); border-radius: var(--gr-radius); padding: 22px; gap: 20px; }
.gr-autor .gr-avatar { width: 84px; height: 84px; font-size: 2rem; border-width: 0; box-shadow: none; }
.gr-autor .wp-block-post-author-name { font-weight: 800; font-size: 1.15rem; }
.gr-autor .wp-block-post-author-biography { color: #3e4a57; font-size: .94rem; }
@media (max-width: 600px) {
	.gr-autor, .gr-ueber { flex-direction: column; text-align: center; }
	.gr-fakten { justify-content: center; }
}

/* ==========================================================================
   Newsletter-Anmeldung [geldrat_anmeldung]
   ========================================================================== */
.gr-anmeldung {
	display: flex;
	gap: 8px;
	background: #fff;
	border-radius: 14px;
	padding: 6px;
	max-width: 500px;
	border: 1px solid var(--gr-linie);
}
.gr-anmeldung input[type="email"] {
	flex: 1;
	min-width: 0;
	border: 0;
	font: inherit;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--wp--preset--color--contrast);
	background: transparent;
}
.gr-anmeldung input[type="email"]:focus { outline: 2px solid var(--gr-orange); outline-offset: 0; }
.gr-anmeldung button { flex: none; }
.gr-anmeldung--dunkel button { background: var(--gr-dunkel); color: #fff; }
.gr-anmeldung--dunkel button:hover { background: var(--wp--preset--color--brand-700); }
.gr-anmeldung[hidden],
.gr-anmeldung__danke[hidden],
.gr-anmeldung__fehler[hidden] { display: none; }
.gr-anmeldung[aria-busy="true"] button { opacity: .6; pointer-events: none; }
.gr-anmeldung__danke {
	background: var(--wp--preset--color--amber-100);
	color: var(--gr-dunkel);
	border-radius: 12px;
	padding: 14px 16px;
	font-weight: 600;
	max-width: 500px;
}
.gr-anmeldung__fehler { color: var(--wp--preset--color--rot); font-weight: 600; font-size: .9rem; }
.gr-anmeldung__hinweis { font-size: .78rem; opacity: .8; margin-top: 8px; }
.gr-anmeldung__hinweis a { color: inherit; }
@media (max-width: 560px) {
	.gr-anmeldung { flex-direction: column; }
	.gr-anmeldung button { width: 100%; }
}
.gr-hero .gr-anmeldung,
.is-style-dunkel .gr-anmeldung { border-color: transparent; }

/* ==========================================================================
   YouTube-Video mit Zwei-Klick-Lösung [geldrat_video] / [geldrat_videos]
   ========================================================================== */
.gr-video { margin: 0; }
.gr-video__rahmen {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--gr-radius);
	overflow: hidden;
	cursor: pointer;
}
.gr-video__rahmen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s, opacity .2s; }
.gr-video__rahmen:hover img { transform: scale(1.03); opacity: .9; }
.gr-video__ersatz { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: #d5dde6; text-align: center; background: linear-gradient(135deg, var(--gr-dunkel), var(--gr-blau)); }
.gr-video__start {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 64px;
	height: 44px;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--youtube);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
	cursor: pointer;
}
.gr-video__start::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-35%, -50%);
	border-left: 16px solid #fff;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
.gr-video__hinweis {
	position: absolute;
	inset: 0;
	background: rgba(20, 27, 35, .94);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	text-align: center;
	font-size: .85rem;
	color: #d5dde6;
	cursor: default;
}
.gr-video__hinweis[hidden] { display: none; }
.gr-video__hinweis p { margin: 0; max-width: 30em; }
.gr-video__hinweis a { color: #fff; text-decoration: underline; }
.gr-video__hinweis .wp-element-button { background: var(--wp--preset--color--youtube); color: #fff; padding: 9px 16px; font-size: .92rem; }
.gr-video__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gr-video figcaption { font-size: .88rem; color: var(--gr-leise); margin-top: 10px; }

.gr-videos { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; }
.gr-videos__neben { display: grid; gap: 14px; align-content: start; }
.gr-vid { background: var(--wp--preset--color--brand-800); border-radius: var(--gr-radius); overflow: hidden; display: flex; flex-direction: column; color: #fff; }
.gr-vid .gr-video__rahmen { border-radius: 0; }
.gr-vid__text { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gr-vid__text h3 { font-size: 1.05rem; margin: 0; color: #fff; }
.gr-vid--gross .gr-vid__text h3 { font-size: 1.3rem; }
.gr-vid__datum { font-size: .8rem; color: #9fb0c1; }
.gr-vid__links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.gr-vid__links a { font-size: .85rem; font-weight: 600; padding: 8px 12px; border-radius: 10px; text-decoration: none; }
.gr-vid__links .gr-vid__artikel { background: var(--gr-orange); color: var(--gr-dunkel); }
.gr-vid__links .gr-vid__yt { background: rgba(255, 255, 255, .1); color: #fff; }
.gr-videos__neben .gr-vid { flex-direction: row; }
.gr-videos__neben .gr-video { flex: none; width: 44%; align-self: center; }
.gr-videos__neben .gr-video__rahmen { width: 100%; }
.gr-videos__neben .gr-video__start { width: 40px; height: 28px; border-radius: 8px; }
.gr-videos__neben .gr-video__start::after { border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
.gr-videos__neben .gr-vid__text { padding: 12px 14px; gap: 8px; }
.gr-videos__neben h3 { font-size: .92rem; }
@media (max-width: 1000px) { .gr-videos { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
	.gr-videos__neben .gr-vid { flex-direction: column; }
	.gr-videos__neben .gr-video { width: 100%; }
}

/* ==========================================================================
   Inhalts-Bausteine (Vergleiche + Artikel)
   ========================================================================== */
.gr-angebot { border: 2px solid var(--gr-orange); border-radius: var(--gr-radius); padding: 20px; gap: 16px; }
.gr-angebot p { margin: 0; }
.gr-angebot .gr-eyebrow { color: var(--wp--preset--color--amber-700); }

.gr-empfehlung { height: 100%; }
.gr-empfehlung .gr-eyebrow { color: var(--wp--preset--color--amber-700); }
.gr-empfehlung--top { border: 2px solid var(--gr-orange) !important; }
.gr-empfehlung h3 { margin: 0 0 4px; }
.gr-empfehlung p { font-size: .92rem; color: var(--gr-leise); }

.gr-anbieter { padding: 0 !important; overflow: hidden; }
.gr-anbieter__haupt { padding: 20px; gap: 20px; }
.gr-anbieter__logo { text-align: center; }
.gr-anbieter__logo p { margin: 0; }
.gr-anbieter__platz { font-size: .75rem; font-weight: 700; color: var(--gr-leise); }
.gr-anbieter__name {
	min-width: 110px;
	padding: 14px 10px;
	border-radius: 10px;
	background: var(--wp--preset--color--accent-5);
	border: 1px solid var(--gr-linie);
	font-weight: 800;
	color: var(--gr-dunkel);
}
.gr-fakt { background: var(--wp--preset--color--accent-5); border-radius: 10px; padding: 10px; }
.gr-fakt p { margin: 0; }
.gr-fakt p:first-child { font-size: .72rem; color: var(--gr-leise); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.gr-fakt p:last-child { font-weight: 700; }
.gr-anbieter__klein { font-size: .72rem; color: var(--gr-leise); text-align: center; margin: 6px 0 0; }
.gr-anbieter .wp-block-details { border-top: 1px solid var(--gr-linie); padding: 0 20px; }
.gr-anbieter .wp-block-details summary { padding: 10px 0; font-weight: 600; font-size: .88rem; color: var(--wp--preset--color--brand-700); text-align: center; }
.gr-anbieter .wp-block-details[open] { padding-bottom: 16px; }
.gr-anbieter__logo img { max-width: 120px; max-height: 110px; width: auto; height: auto; object-fit: contain; margin: 6px auto; }
.gr-anbieter__titel { font-size: .85rem; font-weight: 700; color: var(--gr-dunkel); line-height: 1.3; }
.gr-anbieter__hinweis { font-size: .78rem; color: var(--gr-leise); }
.gr-anbieter__eyebrow { margin: 0 !important; padding: 14px 20px 0; }
.gr-anbieter__aktion {
	margin: 0 0 8px;
	padding: 6px 10px;
	border-radius: 8px;
	background: #fff4dc;
	color: var(--wp--preset--color--amber-700);
	font-size: .8rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.35;
}
.gr-anbieter__aktion:empty { display: none; } /* [geldrat_bonus] liefert nichts bei 0 € */
.gr-anbieter__klein a { color: var(--wp--preset--color--brand-700); font-weight: 600; }
.gr-anbieter .is-style-haken { margin: 0; font-size: .92rem; }
.gr-anbieter .is-style-haken li { padding-block: 2px; }
.gr-platz { margin-bottom: 4px !important; }

/* Karten-Logos im Text: <img class="gr-kartenlogo" src="…/assets/img/karten/visa.svg" alt="Visa"> */
img.gr-kartenlogo {
	display: inline-block;
	width: 2.2em;
	height: 1.35em;
	object-fit: contain;
	object-position: left center;
	vertical-align: -0.3em;
	margin-right: .35em;
}
/* Girocard-Logo ist quadratisch mit kleiner Schrift → größer, damit „girocard“ lesbar bleibt */
img.gr-kartenlogo[src*="girocard"] { height: 2em; width: 2.2em; vertical-align: -0.6em; }
/* In Listen/Absätzen die Zeilenhöhe nicht aufblähen */
:is(li, p) > img.gr-kartenlogo { margin-block: -.35em; }

.gr-faq .wp-block-details { border-top: 1px solid var(--gr-linie); padding: 14px 0; margin: 0; }
.gr-faq .wp-block-details:last-child { border-bottom: 1px solid var(--gr-linie); }
.gr-faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.gr-faq summary::-webkit-details-marker { display: none; }
.gr-faq summary::after { content: "+"; color: var(--gr-blau); font-size: 1.3rem; line-height: 1; }
.gr-faq details[open] summary::after { content: "–"; }

/* Alte (klassische) Inhalte: Bilder mit alignleft/alignright stehen oft in <p> → im Block-Theme kein Umfluss */
.entry-content :is(p, div) > img.alignleft,
.entry-content :is(p, div) > a > img.alignleft { float: left; margin: .3em 1.2em .8em 0; }
.entry-content :is(p, div) > img.alignright,
.entry-content :is(p, div) > a > img.alignright { float: right; margin: .3em 0 .8em 1.2em; }
.entry-content :is(p, div) > img.aligncenter { display: block; margin-inline: auto; }
.entry-content :is(h2, h3, h4, table, figure, .tablepress) { clear: both; }
/* lange Wörter/Adressen als Linktext (alte Texte) umbrechen statt die Seite auf dem Handy zu verbreitern */
.entry-content :is(p, li, dd) { overflow-wrap: break-word; }
/* lange Wörter in Überschriften (z. B. „Nichtveranlagungsbescheinigung“) und lange Button-Texte auf dem Handy umbrechen */
.entry-content :is(h1, h2, h3, h4) { overflow-wrap: break-word; hyphens: auto; }
.wp-block-button { max-width: 100%; }
.wp-block-button__link { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
/* fremde Rechner (financeads, Check24 …) mit fester Breite nicht breiter als den Bildschirm */
.entry-content iframe { max-width: 100%; }
@media (max-width: 480px) {
	.entry-content :is(p, div) img:is(.alignleft, .alignright) { max-width: 40%; height: auto; }
}

/* Tabellen (Block-Tabelle + TablePress) einheitlich */
.wp-block-table table,
.entry-content table.tablepress { border-collapse: collapse; width: 100%; font-size: .95rem; }
.wp-block-table th,
.tablepress thead th { background: var(--wp--preset--color--accent-5); text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gr-leise); }
.wp-block-table :is(th, td),
.tablepress :is(th, td) { padding: 10px; border: 0; border-top: 1px solid var(--gr-linie); }
.wp-block-table { overflow-x: auto; }

/* TablePress auf dem Handy (data-label/Klassen kommen aus functions.php, ersetzt Magic Liquidizer) */
@media (max-width: 700px) {
	/* ohne Kopfzeile: seitlich wischen statt Seite verbreitern */
	.entry-content table.gr-tabelle-wisch { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* mit Kopfzeile: jede Zeile eine Karte */
	.entry-content table.gr-tabelle-karten,
	.entry-content table.gr-tabelle-karten > tbody,
	.entry-content table.gr-tabelle-karten > tbody > tr,
	.entry-content table.gr-tabelle-karten > tbody > tr > td { display: block; width: 100%; box-sizing: border-box; }
	/* Kopf ausblenden: die Spaltennamen stehen per data-label in jeder Zelle */
	.entry-content table.gr-tabelle-karten > thead { display: none; }
	.entry-content table.gr-tabelle-karten > tbody > tr {
		background: #fff; border: 1px solid var(--gr-linie); border-radius: var(--gr-radius-klein);
		box-shadow: var(--gr-schatten); padding: 6px 16px 14px; margin: 0 0 14px;
	}
	.entry-content table.gr-tabelle-karten > tbody > tr > td {
		position: relative; background: transparent; border: 0; border-top: 1px solid var(--gr-linie);
		padding: 9px 0 9px 44%; min-height: 2.4em; text-align: left;
	}
	.entry-content table.gr-tabelle-karten > tbody > tr > td::before {
		content: attr(data-label); position: absolute; left: 0; top: 9px; width: 40%;
		font-size: .8rem; font-weight: 700; color: var(--gr-leise); line-height: 1.35;
	}
	/* erste Spalte (Bank/Karte) als Kartenkopf, ohne Beschriftung */
	.entry-content table.gr-tabelle-karten > tbody > tr > td:first-child { border-top: 0; padding: 10px 0; font-weight: 700; }
	.entry-content table.gr-tabelle-karten > tbody > tr > td:first-child img { display: inline-block; vertical-align: middle; margin: 0 10px 4px 0; max-height: 48px; width: auto; }
	/* ohne Spaltennamen oder leer: keine Beschriftung bzw. ganz weg */
	.entry-content table.gr-tabelle-karten > tbody > tr > td:is(:first-child, [data-label=""])::before { content: none; }
	.entry-content table.gr-tabelle-karten > tbody > tr > td[data-label=""] { padding-left: 0; }
	.entry-content table.gr-tabelle-karten > tbody > tr > td:empty { display: none; }
	/* Button-Zelle: Button in voller Breite, ohne Beschriftung */
	.entry-content table.gr-tabelle-karten > tbody > tr > td:has(> .wp-element-button) { padding: 12px 0 0; border-top: 0; min-height: 0; }
	.entry-content table.gr-tabelle-karten > tbody > tr > td:has(> .wp-element-button)::before { content: none; }
	.entry-content table.gr-tabelle-karten > tbody > tr > td > .wp-element-button { display: block; text-align: center; }
}

/* ==========================================================================
   Fuß (Footer)
   ========================================================================== */
.gr-fuss { background: var(--gr-dunkel); color: #b3c0cd; font-size: .9rem; padding-top: 40px; padding-bottom: 28px; margin-top: 56px; }
.gr-fuss h2, .gr-fuss h3 { color: #fff; font-size: .95rem; margin: 0 0 10px; }
.gr-fuss a { color: inherit; text-decoration: none; }
.gr-fuss a:hover { color: var(--gr-orange); }
.gr-fuss ul { list-style: none; padding: 0; margin: 0; }
.gr-fuss li { padding: 3px 0; }
.gr-fuss .gr-yt-link a { color: #fff; }
.gr-offenlegung-fuss { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 28px; padding-top: 18px; font-size: .8rem; color: #8d9cab; }

/* ==========================================================================
   Inhaltsverzeichnis [geldrat_inhalt]
   ========================================================================== */
.gr-inhalt {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--gr-linie);
	border-radius: var(--gr-radius);
	box-shadow: var(--gr-schatten);
	padding: 16px 22px;
	margin-block: 1.5em;
}
.gr-inhalt summary {
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.gr-inhalt summary::-webkit-details-marker { display: none; }
.gr-inhalt summary::after { content: "+"; color: var(--gr-blau); font-size: 1.3rem; line-height: 1; }
.gr-inhalt details[open] summary::after { content: "–"; }
.gr-inhalt ol { margin: 10px 0 0; padding-left: 1.4em; font-size: .95rem; }
.gr-inhalt ol ol { margin-top: 2px; list-style: lower-alpha; }
.gr-inhalt li { padding-block: 3px; break-inside: avoid; }
.gr-inhalt li::marker { color: var(--gr-leise); font-weight: 600; }
.gr-inhalt a { color: var(--gr-dunkel); text-decoration: none; }
.gr-inhalt a:hover { color: var(--gr-blau); text-decoration: underline; }
@media (min-width: 782px) {
	.gr-inhalt--lang details > ol { columns: 2; column-gap: 36px; }
}
/* Sprungziele nicht unter dem festen Kopf verstecken */
.wp-block-post-content :is(h2, h3, h4)[id] { scroll-margin-top: 90px; }

/* ==========================================================================
   Geld-Kalender (/geldkalender, Download-Box auf /newsletter-bestaetigung/)
   ========================================================================== */
.gr-kalender-punkte { margin: 18px 0 22px; color: #e8edf2; }
.gr-kalender-punkte li { padding-top: 5px; padding-bottom: 5px; }
.gr-kalender-punkte li::before { color: var(--gr-orange) !important; }
.gr-kalender-punkte strong { color: #fff; }
.gr-kalender-kopf .gr-bonus { max-width: 34em; margin-top: 14px; }
.gr-kalender-cover { margin: 0; }
.gr-kalender-cover img {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	transform: rotate(2deg);
}
.gr-kalender-cover--klein img { max-width: 150px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.gr-kalender-download h2 { margin-top: 0; font-size: 1.5rem; hyphens: manual; }
@media (max-width: 781px) {
	.gr-kalender-cover img { max-width: 200px; transform: none; }
	.gr-kalender-cover--klein img { max-width: 110px; }
	.gr-kalender-download .wp-block-column:first-child { flex-basis: auto !important; }
}