/**
 * Grünes Design des Kreditportals „Finanzieren & Sparen“: Farben der alten sberbankdirect.de.
 *
 * Grün #3cc166 (Menüleiste, Knöpfe der alten Seite) als Flächenfarbe, Dunkelgrün #1e6133 (dasselbe Grün unter 50 %
 * Schwarz wie im alten Titelbalken) für Links, aktive Zustände und Text auf Weiß, Schwarz für den Knopf im Kopf,
 * Blaugrau #273647 im Footer. Knopftexte und Symbole auf Grün sind weiß wie auf der alten Seite (Wunsch des Kunden,
 * 24.10.2026).
 *
 * Die Variablen überschreiben die des Plugins (components.css). Die Klasse wp-theme-kreditportal setzt WordPress am
 * Body, solange dieses Theme aktiv ist. Aufbau und Abstände der Kreditblöcke stehen im Plugin (assets/css/kredit.css).
 */

/* Im Blockeditor gelten dieselben Farben für die Vorschau der Kreditblöcke. */
body.wp-theme-kreditportal,
.editor-styles-wrapper {
	--vp-primary: #1e6133;
	--vp-primary-hover: #154726;
	--vp-cta: #3cc166;
	--vp-cta-hover: #34b55d;
	--vp-positive: #1e6133;
	--vp-positive-dark: #154726;
	--vp-positive-darker: #154726;
	--vp-positive-50: #f1faf4;
	--vp-positive-100: #e2f5e8;
	--vp-blue-50: #f1faf4;
	--vp-blue-100: #e2f5e8;
	--vp-blue-200: #cbebd5;
	--vp-blue-300: #9fdcb3;
	--vp-blue-500: #1e6133;
	--vp-text: #0a0a0a;
	--vp-kredit-gruen: #3cc166;
	--vp-kredit-dunkel: #1e6133;
	--vp-kredit-schwarz: #0a0a0a;
	--vp-kredit-footer: #273647;
}

/* Kopf: weiß, Knopf schwarz wie „Kredit beantragen“ auf der alten Seite, aktiver Menüpunkt grün unterstrichen. */
.wp-theme-kreditportal .vp-header__notice,
.editor-styles-wrapper .vp-header__notice {
	background: var(--vp-blue-50);
}

.wp-theme-kreditportal .vp-brand__tile,
.editor-styles-wrapper .vp-brand__tile {
	background: var(--vp-kredit-gruen);
	color: #fff;
}

.wp-theme-kreditportal .vp-header__link.is-active,
.wp-theme-kreditportal .vp-header__link.is-active:hover,
.editor-styles-wrapper .vp-header__link.is-active,
.editor-styles-wrapper .vp-header__link.is-active:hover {
	color: var(--vp-kredit-dunkel);
	box-shadow: inset 0 -3px 0 var(--vp-kredit-gruen);
}

.wp-theme-kreditportal .vp-header__cta,
.wp-theme-kreditportal .vp-header__mcta,
.editor-styles-wrapper .vp-header__cta,
.editor-styles-wrapper .vp-header__mcta {
	border-radius: 999px;
	background: var(--vp-kredit-schwarz);
	color: #fff;
}

.wp-theme-kreditportal .vp-header__cta:hover,
.wp-theme-kreditportal .vp-header__mcta:hover,
.editor-styles-wrapper .vp-header__cta:hover,
.editor-styles-wrapper .vp-header__mcta:hover {
	background: var(--vp-kredit-dunkel);
	color: #fff;
}

.wp-theme-kreditportal .vp-crumbs__link:hover,
.editor-styles-wrapper .vp-crumbs__link:hover {
	color: var(--vp-kredit-dunkel);
}

.wp-theme-kreditportal .vp-header__burger,
.editor-styles-wrapper .vp-header__burger {
	background: var(--vp-blue-50);
	color: var(--vp-kredit-dunkel);
}

.wp-theme-kreditportal .vp-header__mlink.is-active,
.wp-theme-kreditportal .vp-header__mlink.is-active:hover,
.editor-styles-wrapper .vp-header__mlink.is-active,
.editor-styles-wrapper .vp-header__mlink.is-active:hover {
	background: var(--vp-blue-50);
	color: var(--vp-kredit-dunkel);
}

/* Einwilligungsbanner */
.wp-theme-kreditportal .vp-consent__text a,
.wp-theme-kreditportal .vp-consent__btn--ghost:hover,
.editor-styles-wrapper .vp-consent__text a,
.editor-styles-wrapper .vp-consent__btn--ghost:hover {
	border-color: var(--vp-kredit-dunkel);
	color: var(--vp-kredit-dunkel);
}

.wp-theme-kreditportal .vp-consent__check,
.editor-styles-wrapper .vp-consent__check {
	accent-color: var(--vp-kredit-dunkel);
}

.wp-theme-kreditportal .vp-consent__btn--primary,
.editor-styles-wrapper .vp-consent__btn--primary {
	background: var(--vp-kredit-gruen);
	color: #fff;
}

.wp-theme-kreditportal .vp-consent__btn--primary:hover,
.editor-styles-wrapper .vp-consent__btn--primary:hover {
	background: var(--vp-cta-hover);
}

/* Footer in Blaugrau. */
.wp-theme-kreditportal .vp-footer,
.editor-styles-wrapper .vp-footer {
	background: var(--vp-kredit-footer);
}

/* Titelbalken in Dunkelgrün wie über den Beiträgen der alten Seite. */
.wp-theme-kreditportal .vp-kartikel .vp-article__head,
.wp-theme-kreditportal .vp-karchiv .vp-article__head,
.editor-styles-wrapper .vp-kartikel .vp-article__head,
.editor-styles-wrapper .vp-karchiv .vp-article__head {
	background: var(--vp-kredit-dunkel);
	color: #fff;
}

.wp-theme-kreditportal .vp-kartikel .vp-article__title,
.wp-theme-kreditportal .vp-karchiv .vp-article__title,
.wp-theme-kreditportal .vp-article__head .vp-crumbs__current,
.editor-styles-wrapper .vp-kartikel .vp-article__title,
.editor-styles-wrapper .vp-karchiv .vp-article__title,
.editor-styles-wrapper .vp-article__head .vp-crumbs__current {
	color: #fff;
}

.wp-theme-kreditportal .vp-article__head .vp-crumbs,
.wp-theme-kreditportal .vp-article__head .vp-crumbs__link,
.wp-theme-kreditportal .vp-article__head .vp-article__info,
.editor-styles-wrapper .vp-article__head .vp-crumbs,
.editor-styles-wrapper .vp-article__head .vp-crumbs__link,
.editor-styles-wrapper .vp-article__head .vp-article__info {
	color: rgba(255, 255, 255, 0.82);
}

.wp-theme-kreditportal .vp-article__head .vp-crumbs__link:hover,
.editor-styles-wrapper .vp-article__head .vp-crumbs__link:hover {
	color: #fff;
}

.wp-theme-kreditportal .vp-article__head .vp-article__cat,
.editor-styles-wrapper .vp-article__head .vp-article__cat {
	background: var(--vp-kredit-gruen);
	color: #fff;
	text-decoration: none;
}

.wp-theme-kreditportal .vp-karchiv__intro p,
.editor-styles-wrapper .vp-karchiv__intro p {
	color: rgba(255, 255, 255, 0.9);
}

.wp-theme-kreditportal .vp-karchiv__intro a,
.editor-styles-wrapper .vp-karchiv__intro a {
	color: #fff;
}

/* Links und Inhaltsverzeichnis in Dunkelgrün. */
.wp-theme-kreditportal .vp-article__content > p a,
.wp-theme-kreditportal .vp-article__content > .wp-block-list a,
.wp-theme-kreditportal .vp-article__content h2 a,
.wp-theme-kreditportal .vp-article__content h3 a,
.wp-theme-kreditportal .vp-karchiv__text a,
.editor-styles-wrapper .vp-article__content > p a,
.editor-styles-wrapper .vp-article__content > .wp-block-list a,
.editor-styles-wrapper .vp-article__content h2 a,
.editor-styles-wrapper .vp-article__content h3 a,
.editor-styles-wrapper .vp-karchiv__text a {
	color: var(--vp-kredit-dunkel);
}

.wp-theme-kreditportal .vp-article__content > p a:hover,
.wp-theme-kreditportal .vp-article__content > .wp-block-list a:hover,
.wp-theme-kreditportal .vp-karchiv__text a:hover,
.editor-styles-wrapper .vp-article__content > p a:hover,
.editor-styles-wrapper .vp-article__content > .wp-block-list a:hover,
.editor-styles-wrapper .vp-karchiv__text a:hover {
	color: var(--vp-primary-hover);
}

.wp-theme-kreditportal .vp-article__toc-title,
.wp-theme-kreditportal .vp-sechead__more,
.editor-styles-wrapper .vp-sechead__more,
.editor-styles-wrapper .vp-article__toc-title {
	color: var(--vp-kredit-dunkel);
}

.wp-theme-kreditportal .vp-article__toc-link:hover,
.editor-styles-wrapper .vp-article__toc-link:hover {
	color: var(--vp-kredit-dunkel);
}

/* Abschnittsköpfe ohne schwarze Linie der Zeitungsportale (auch in der Vorschau des Blockeditors). */
.wp-theme-kreditportal .vp-sechead,
.editor-styles-wrapper .vp-sechead {
	margin: 0 0 24px;
	padding-top: 0;
	border-top: 0;
}

.wp-theme-kreditportal .vp-sechead__title,
.editor-styles-wrapper .vp-sechead__title {
	font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}


/* Trennlinie über der Copyright-Zeile weiß statt blau (Wunsch 25.10.2026). */
.wp-theme-kreditportal .vp-footer__bottom,
.editor-styles-wrapper .vp-footer__bottom {
	border-top-color: #fff;
}

/* Ohne klebenden Kopf (siehe base.css) brauchen Sprungziele und die klebende Seitenleiste keinen Platz für ihn. */
.wp-theme-kreditportal :where([id]),
.wp-theme-kreditportal .vp-article__content h2[id] {
	scroll-margin-top: 24px;
}

.wp-theme-kreditportal .vp-article__aside {
	top: 24px;
}