/*
Theme Name: vfg2020
Theme URI: https://vfg2020.de
Author: Verein für Finanzbildung und Geldanlage 2020 e.V.
Description: Schlankes Block-Theme im Corporate Design des vfg2020 (Dunkelblau, Altgold, Creme; Source Serif 4 und Source Sans 3, lokal eingebunden).
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vfg2020
*/

/* ---------- Grundlagen ---------- */
body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }
:focus-visible { outline: 3px solid var(--wp--preset--color--gold-light); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* Überzeile */
.vfg-over {
	font-size: 0.9375rem !important;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
}
.has-navy-background-color .vfg-over,
.has-navy-deep-background-color .vfg-over { color: var(--wp--preset--color--gold-light); }

/* ---------- Kopfbereich ---------- */
.vfg-header { position: relative; z-index: 20; }
.vfg-header .vfg-logo img { height: 52px; width: auto; display: block; }
.vfg-header .wp-block-navigation a:hover,
.vfg-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--gold-light) !important; }
.vfg-header .wp-block-navigation__responsive-container.is-menu-open { padding: 2rem 1.5rem; }
.vfg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.25rem; }
@media (max-width: 600px) {
	.vfg-header .vfg-logo img { height: 42px; }
	.vfg-header .vfg-header-cta { display: none; }
}

/* ---------- Buttons ---------- */
.wp-block-button.is-style-gold .wp-block-button__link {
	background: var(--wp--preset--color--gold-light);
	color: var(--wp--preset--color--navy);
}
.wp-block-button.is-style-gold .wp-block-button__link:hover { background: #D8BC85; color: var(--wp--preset--color--navy); }
.wp-block-button.is-style-line-gold .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--cream);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--gold-light);
}
.wp-block-button.is-style-line-gold .wp-block-button__link:hover { background: rgba(201,168,106,.15); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
	padding: calc(0.85rem - 2px) calc(1.6rem - 2px);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--cream); }
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }

/* ---------- Karten, Icons, Platzhalter ---------- */
.vfg-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px;
	padding: 1.75rem;
}
.vfg-card.has-cream-background-color { background: var(--wp--preset--color--cream); }
.vfg-card--gold { border: 2px solid var(--wp--preset--color--gold); }
.vfg-card--topline { border-top: 4px solid var(--wp--preset--color--gold); }
.vfg-card > * { margin-block: 0; }
.vfg-card > * + * { margin-block-start: 0.85rem; }

.vfg-icon {
	width: 52px; height: 52px; border-radius: 50%;
	background-color: var(--wp--preset--color--navy);
	background-repeat: no-repeat; background-position: center; background-size: 26px 26px;
	flex: none;
}
.vfg-i-vortrag   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A86A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.vfg-i-seminar   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A86A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10L12 5 2 10l10 5 10-5z'/%3E%3Cpath d='M6 12v5c3 2 9 2 12 0v-5'/%3E%3C/svg%3E"); }
.vfg-i-chat      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A86A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.vfg-i-netzwerk  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A86A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6M15 14.5c3 0 6 2 6 5'/%3E%3C/svg%3E"); }
.vfg-i-kompass   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A86A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5 5-2z'/%3E%3C/svg%3E"); }
.vfg-i-depot     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A86A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M6 15l4-4 3 3 5-6'/%3E%3C/svg%3E"); }
.vfg-i-kalender  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A86A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.vfg-i-buch      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A86A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5a2 2 0 0 1 2-2h5v18H6a2 2 0 0 1-2-2zM11 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7'/%3E%3C/svg%3E"); }

.vfg-ph {
	border: 2px dashed #C9B48A; border-radius: 20px;
	background: repeating-linear-gradient(135deg, #EFE8D9 0 14px, #F4EEE2 14px 28px);
	display: flex; align-items: center; justify-content: center; text-align: center;
	color: #6B5A3A; font-weight: 600; padding: 1rem; box-sizing: border-box; min-height: 360px;
}
.has-navy-background-color .vfg-ph {
	border-color: var(--wp--preset--color--gold);
	background: repeating-linear-gradient(135deg, #1E3654 0 14px, #203A5A 14px 28px);
	color: var(--wp--preset--color--gold-light);
}
.vfg-photo img { border-radius: 20px; width: 100%; object-fit: cover; }

/* Kennzahlen unter dem Kopfbereich */
.vfg-facts {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 20px;
	padding: 2rem !important;
	box-shadow: 0 12px 32px rgba(23,44,70,.10);
	margin-top: -3rem !important;
	position: relative;
}
.vfg-facts .vfg-num { font-family: var(--wp--preset--font-family--serif); font-size: 2.5rem; font-weight: 700; line-height: 1.1; color: var(--wp--preset--color--navy); margin: 0; }
.vfg-facts p { text-align: center; color: var(--wp--preset--color--slate); }

/* Häkchen-Liste */
.vfg-checks { list-style: none; padding-left: 0; }
.vfg-checks li { position: relative; padding-left: 2.2rem; margin-bottom: 0.75rem; }
.vfg-checks li::before {
	content: ""; position: absolute; left: 0; top: 0.2em; width: 24px; height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A48143' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Nummerierte Schritte */
.vfg-steps { list-style: none; padding-left: 0; counter-reset: vfgstep; }
.vfg-steps li { counter-increment: vfgstep; position: relative; padding-left: 4rem; min-height: 44px; margin-bottom: 1.5rem; }
.vfg-steps li::before {
	content: counter(vfgstep); position: absolute; left: 0; top: 0;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--wp--preset--color--gold); color: var(--wp--preset--color--navy);
	font-weight: 700; font-size: 1.25rem; display: flex; align-items: center; justify-content: center;
}

/* Preis-Karten */
.vfg-price { font-family: var(--wp--preset--font-family--serif); font-size: 2.75rem; font-weight: 700; line-height: 1.1; color: var(--wp--preset--color--navy); }
.vfg-price small { font-family: var(--wp--preset--font-family--sans); font-size: 1.125rem; font-weight: 600; color: var(--wp--preset--color--slate); }

/* Team-Liste */
.vfg-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; }
.vfg-team > * { border-bottom: 1px solid var(--wp--preset--color--sand); padding: 1.25rem 0; margin: 0 !important; }
.vfg-team .vfg-name { font-family: var(--wp--preset--font-family--serif); font-size: 1.375rem; font-weight: 700; color: var(--wp--preset--color--navy); margin: 0; }
.vfg-team p { margin: 0; }
@media (max-width: 900px) { .vfg-team { grid-template-columns: minmax(0, 1fr); } }

/* Häufige Fragen */
.wp-block-details summary { font-weight: 700; color: var(--wp--preset--color--navy); cursor: pointer; }
.wp-block-details > :not(summary) { color: var(--wp--preset--color--slate); margin-block-start: 0.75rem; }
.wp-block-details + .wp-block-details { margin-block-start: 0.75rem; }

/* ---------- Termine (Shortcode [vfg_termine]) ---------- */
.vfg-termine { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.vfg-termin {
	display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 16px; padding: 1.1rem 1.25rem;
}
.vfg-termin--offen { border: 2px solid var(--wp--preset--color--gold); }
.vfg-date {
	width: 84px; flex: none; text-align: center; border-radius: 12px;
	background: var(--wp--preset--color--navy); color: var(--wp--preset--color--cream); padding: 0.6rem 0;
}
.vfg-termin--offen .vfg-date { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--navy); }
.vfg-date .vfg-wd { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: .08em; }
.vfg-date .vfg-dm { display: block; font-family: var(--wp--preset--font-family--serif); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.vfg-termin-text { flex: 1 1 260px; min-width: 0; }
.vfg-termin-title { font-weight: 700; color: var(--wp--preset--color--navy); margin: 0; }
.vfg-termin-meta { color: var(--wp--preset--color--slate); font-size: 1.0625rem; margin: 0.15rem 0 0; }
.vfg-termin-ics {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px;
	border: 2px solid var(--wp--preset--color--navy); color: var(--wp--preset--color--navy);
	font-weight: 700; font-size: 1rem; text-decoration: none;
}
.vfg-termin-ics:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--cream); }
.vfg-termine-hinweis { color: var(--wp--preset--color--slate); font-size: 1.0625rem; }
.vfg-termine--kompakt .vfg-termin-ics { display: none; }

/* ---------- Kontaktformular (Contact Form 7) ---------- */
.wpcf7 form { display: flex; flex-direction: column; gap: 1.1rem; }
.wpcf7 form p { margin: 0; }
.wpcf7 label { font-weight: 700; color: var(--wp--preset--color--navy); font-size: 1.0625rem; display: block; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%; box-sizing: border-box; font: inherit; font-size: 1.125rem;
	padding: 0.75rem 0.9rem; min-height: 48px; margin-top: 0.35rem;
	border: 1.5px solid #B9AE98; border-radius: 10px; background: #fff; color: var(--wp--preset--color--ink);
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: 3px solid var(--wp--preset--color--gold-light); border-color: var(--wp--preset--color--navy); }
.wpcf7 .wpcf7-acceptance label { font-weight: 400; color: var(--wp--preset--color--slate); }
.wpcf7 input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--wp--preset--color--navy); vertical-align: -3px; margin-right: 0.5rem; }
.wpcf7 input[type="submit"] {
	align-self: flex-start; min-height: 48px; padding: 0 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--navy); color: var(--wp--preset--color--cream); font: inherit; font-weight: 700;
}
.wpcf7 input[type="submit"]:hover { background: #22406A; }

/* ---------- Fußbereich ---------- */
.vfg-footer a { color: var(--wp--preset--color--cream); text-decoration: none; }
.vfg-footer a:hover { color: var(--wp--preset--color--gold-light); }
.vfg-footer .vfg-logo img { height: 46px; width: auto; }
.vfg-footer-bottom { border-top: 1px solid rgba(201,168,106,.35); }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 781px) {
	.vfg-facts { margin-top: -2rem !important; padding: 1.5rem !important; }
	.vfg-facts.wp-block-columns { flex-wrap: wrap !important; }
	.vfg-facts.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 45% !important; flex-grow: 1; }
	.vfg-cta { padding: 2rem !important; }
}

/* Nur für Screenreader */
.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 !important;
	width: 1px; word-wrap: normal !important;
}

/* Karte auf dunkelblauem Grund */
.vfg-card.vfg-card--onnavy { background: rgba(246,243,236,.06); border-color: var(--wp--preset--color--gold); }
.has-navy-background-color.vfg-card { border-color: var(--wp--preset--color--navy); }


/* ---------- Trustpilot ([vfg_trustpilot]) ---------- */
.vfg-tp { display: flex; flex-direction: column; gap: 1rem; }
.vfg-tp-badge { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vfg-tp-badge p { margin: 0; }
.vfg-tp-stars { position: relative; display: inline-block; line-height: 0; }
.vfg-tp-stars svg { fill: currentColor; margin-right: 2px; }
.vfg-tp-empty { color: #D9D0BD; white-space: nowrap; display: inline-block; }
.vfg-tp-full { color: var(--wp--preset--color--gold); position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.vfg-tp-load {
	align-self: flex-start; min-height: 44px; padding: 0 1.2rem; border-radius: 999px; cursor: pointer;
	border: 2px solid var(--wp--preset--color--navy); background: transparent; color: var(--wp--preset--color--navy);
	font: inherit; font-weight: 700; font-size: 1rem;
}
.vfg-tp-load:hover { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--cream); }
.vfg-tp-note { font-size: 1rem; color: var(--wp--preset--color--slate); margin: 0.5rem 0 0; }

/* Lesbarkeit: Buttons nicht automatisch verkleinern, lange Wörter in Überschriften trennen */
.wp-block-button__link, .wp-element-button { font-size: 1.125rem; }
.vfg-header-cta .wp-block-button__link { font-size: 1rem !important; }
h1, h2, h3, .vfg-facts p, .vfg-card p { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }