/* BFV MG – Grundstil. Farben und Maße wie Startseite (.mfn) und das bisherige Zusatz-CSS (28.09.2026). */

:root {
	--mg-dunkel: #0f223c;
	--mg-tuerkis: #3a9e93;
	--mg-tuerkis-dunkel: #2c7f75;
	--mg-tuerkis-hell: #e7f4f2;
	--mg-grau: #5d6b7e;
	--mg-linie: #e3e8ee;
	--mg-breite: 1140px;
	--mg-kante: 1100px; /* Textkante der Startseite (.mfn-w) – Kopf und Fuß fluchten damit */
	--mg-rand: 20px;
	--mg-kopf-h: 68px;
}
@media (max-width: 767px) {
	:root { --mg-rand: 16px; --mg-kopf-h: 64px; }
}

/* ===== Grundlage */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mg-kopf-h) + 12px); }
body {
	margin: 0;
	background: #fff;
	color: var(--mg-dunkel);
	font: 400 17px/30px "Open Sans", sans-serif;
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
/* Fuß bei kurzen Seiten unten halten (wie im alten Theme) */
body { display: flex; flex-direction: column; min-height: 100vh; }
.mg-inhalt { flex: 1 0 auto; }
/* Grundmaße wie im alten Theme (seoes, gemessen 29.10.2026): Links ohne Unterstreichung in Textfarbe, Überschriften 50/40/30/24/20/17 px.
   Bausteine (Startseite, Kasse, Rechtstexte) setzen ihre Farben und Größen selbst und verlassen sich darauf. */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mg-tuerkis-dunkel); }
h1, h2, h3, h4, h5, h6 { color: var(--mg-dunkel); font-family: "Open Sans", sans-serif; font-weight: 700; line-height: normal; margin: 1.2em 0 .6em; }
h1 { font-size: clamp(30px, 4.5vw, 50px); margin-top: 0; }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: clamp(22px, 2.6vw, 30px); }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 17px; }
p, ul, ol { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--mg-tuerkis); outline-offset: 2px; }

/* Formularfelder wie im alten Theme (gemessen 29.10.2026). Stripe liest daraus Schrift und Größe seiner Kartenfelder. */
input, select, textarea, button { font: inherit; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=search], input[type=date], textarea {
	font: 400 17px/1.15 "Nunito Sans", sans-serif; color: #000; background: #f2f7fc; border: 1px solid #f2f7fc; border-radius: 10px; padding: 10px; max-width: 100%;
}
select { font: 400 17px/30px "Open Sans", sans-serif; color: var(--mg-dunkel); background: transparent; border: 1px solid #e5e5e5; padding: 6px 10px; max-width: 100%; }

.mg-sprung { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #fff; padding: 8px 14px; border-radius: 8px; }
.mg-sprung:focus { left: 8px; }

/* Satzspiegel für normale Seiten */
.mg-w { max-width: calc(var(--mg-breite) + 2 * var(--mg-rand)); margin: 0 auto; padding: 0 var(--mg-rand); }
.mg-seite { padding-top: 40px; padding-bottom: 64px; }
@media (max-width: 767px) { .mg-seite { padding-top: 28px; padding-bottom: 48px; } }
/* Antrag und Kasse: Inhalt bringt Abstände selbst mit (.mfa, 1120 px breit) – Kopf fluchtet mit dessen Kante */
.mg-kopf-antrag { --mg-kante: 1120px; }
.mg-kopf-antrag .mg-seite { padding-top: 0; padding-bottom: 0; }
/* Kasse am Handy: Karten fast randlos wie im alten Theme (Textkante 21 px) */
@media (max-width: 767px) { .woocommerce-checkout .mg-w { padding-left: 8px; padding-right: 8px; } }

/* ===== Knöpfe – türkis, ohne Rand, rund, fett, ohne Schatten (Vorgabe 28.09.2026: keine Schatten, auch nicht beim Überfahren) */
.mg-btn,
a.rb_button.advanced,
.woocommerce #payment #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--mg-tuerkis); color: #fff; border: 0; border-radius: 12px; box-shadow: none; text-shadow: none;
	font: 700 17px/1.2 "Open Sans", sans-serif; letter-spacing: normal; text-decoration: none;
	padding: 13px 24px; cursor: pointer; transition: background-color .2s, transform .2s;
}
.mg-btn:hover, .mg-btn:focus-visible,
a.rb_button.advanced:hover, a.rb_button.advanced:focus-visible,
.woocommerce #payment #place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--mg-tuerkis-dunkel); color: #fff; transform: translateY(-1px); }
.mg-btn::after, a.rb_button.advanced::after {
	content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .2s;
}
.mg-btn:hover::after, a.rb_button.advanced:hover::after { transform: translateX(3px); }
a.rb_button.advanced.small { padding: 11px 20px; font-size: 15px; }
.woocommerce #payment #place_order { min-height: 65px; width: 100%; } /* Bezahlknopf: Höhe wie im alten Theme */
/* Druckknopf der Rechtsseiten: ohne Pfeil */
a.rb_button.advanced.print::after, button.rb_button.print::after { display: none; }
button.rb_button.advanced.print { background: #fff; color: var(--mg-tuerkis-dunkel); box-shadow: inset 0 0 0 2px var(--mg-tuerkis); border: 0; border-radius: 12px; padding: 10px 18px; font: 700 15px/1.2 "Open Sans", sans-serif; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .mg-btn, .mg-btn::after, a.rb_button.advanced, a.rb_button.advanced::after { transition: none; } }

/* ===== Kopf */
.mg-kopf { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 2px 14px rgba(16, 1, 148, .05); }
.mg-kopf-antrag .mg-kopf { position: relative; }
.admin-bar .mg-kopf { top: 32px; }
@media (max-width: 782px) { .admin-bar .mg-kopf { top: 0; position: relative; } }
.mg-kopf__w { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--mg-kopf-h); max-width: calc(var(--mg-kante) + 2 * var(--mg-rand)); margin: 0 auto; padding: 10px var(--mg-rand); }
.mg-kopf__btn { padding: 12px 22px; font-size: 16px; }
@media (max-width: 1199px) { .mg-kopf__btn { display: none; } }

/* Text-Logo: Zeichen als SVG + echte Schrift (Nunito 800 nur mit den Zeichen des Schriftzugs) */
a.mfl { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; text-decoration: none; line-height: 1; }
a.mfl .mfl__i { width: 36px; height: 36px; flex: none; display: block; }
a.mfl .mfl__t { display: flex; flex-direction: column; }
a.mfl .mfl__n { font-family: "Nunito", "Nunito Sans", sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--mg-dunkel); white-space: nowrap; }
a.mfl .mfl__n b { font-weight: 800; color: var(--mg-tuerkis); }
a.mfl:hover .mfl__n b { color: var(--mg-tuerkis-dunkel); }
@media (max-width: 767px) { a.mfl { min-height: 44px; gap: 8px; } a.mfl .mfl__i { width: 30px; height: 30px; } a.mfl .mfl__n { font-size: 16.5px; } }
@media (max-width: 370px) { a.mfl .mfl__i { width: 28px; height: 28px; } a.mfl .mfl__n { font-size: 15px; } }

/* Siegel im Antragskopf */
.mg-siegel { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.mg-siegel img { height: 44px; width: auto; display: block; }
@media (max-width: 767px) { .mg-siegel { gap: 10px; } .mg-siegel img { height: 30px; } }
@media (max-width: 560px) { .mg-siegel { display: none; } }

/* ===== Fuß */
.mg-fuss { background: #fff; box-shadow: 0 -2px 14px rgba(0, 0, 0, .04); font-size: 14px; line-height: 1.6; color: #3e4a59; }
.mg-fuss__w { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; max-width: calc(var(--mg-kante) + 2 * var(--mg-rand)); margin: 0 auto; padding: 16px var(--mg-rand); }
.mg-fuss__h { margin: 0; }
.mg-fuss__n { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mg-fuss__n a { color: #3e4a59; text-decoration: none; }
.mg-fuss__n a:hover { color: var(--mg-tuerkis-dunkel); text-decoration: underline; }
@media (max-width: 767px) { .mg-fuss__w { flex-direction: column; text-align: center; padding: 20px var(--mg-rand) 24px; } .mg-fuss__n { justify-content: center; } }

/* ===== Inhalte aus WPBakery-Seiten (bis zur Umstellung auf Blöcke) */
.mg-seite .vc_row { margin-left: -15px; margin-right: -15px; }
.mg-text { margin: 0 0 1.4em; }
.mg-text--mitte { text-align: center; }
.mg-text__t { margin: 0 0 .5em; }
.mg-text__strich { display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--mg-tuerkis); margin: 0 0 1em; }
.mg-text--mitte .mg-text__strich { margin-left: auto; margin-right: auto; }
.mg-text__i > :last-child { margin-bottom: 0; }
.mg-hinweis { border-radius: 12px; padding: 16px 20px; margin: 0 0 1.4em; border-left: 4px solid var(--mg-tuerkis); background: var(--mg-tuerkis-hell); }
.mg-hinweis--fehler { border-left-color: #c0392b; background: #fdecea; }
.mg-hinweis__t { font-weight: 700; margin: 0; }
.mg-hinweis__d { margin: .3em 0 0; }

/* ===== Bausteine der umgestellten Seiten (vorher WPBakery-Zeilen) */
.mg-mitte { text-align: center; }
.mg-mitte .mg-text__strich { margin-left: auto; margin-right: auto; }
.mg-luft-oben { margin-top: 32px; }
.mg-zweispaltig { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.mg-zweispaltig--bild-links { grid-template-columns: 1fr 2fr; }
.mg-zweispaltig--mitte { align-items: center; }
.mg-zweispaltig__bild img { display: block; margin-left: auto; }
.mg-zweispaltig--bild-links .mg-zweispaltig__bild img { margin: 0 auto; }
@media (max-width: 767px) {
	.mg-zweispaltig, .mg-zweispaltig--bild-links { grid-template-columns: 1fr; gap: 24px; }
	.mg-zweispaltig__bild img { margin: 0 auto; max-width: 260px; }
}
.mg-band { padding: 80px 0; }
.mg-band--grau { background: #f7f7f7; }
.mg-band__w { max-width: calc(var(--mg-breite) + 2 * var(--mg-rand)); margin: 0 auto; padding: 0 var(--mg-rand); }
.mg-seite > .mg-band:first-child { margin-top: -40px; }
.mg-seite > .mg-band:last-child { margin-bottom: -64px; }
@media (max-width: 767px) { .mg-band { padding: 48px 0; } .mg-seite > .mg-band:first-child { margin-top: -28px; } .mg-seite > .mg-band:last-child { margin-bottom: -48px; } }
.mg-ebook-bild img { border: 15px solid #000; border-radius: 15px; max-height: 560px; width: auto; }
.mg-bundle-text { color: #f00; font-size: 20px; }
.mg-loeschseite { padding: 5% 0; }
.support-formular a { color: #1d4e80; text-decoration: underline; }
.mg-drucken { margin: 16px 0 32px; }

/* ===== Gutenberg-Grundlagen */
.mg-seite .alignwide { max-width: none; }
.mg-seite .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.mg-seite .wp-block-separator { border: 0; border-top: 1px solid var(--mg-linie); margin: 2em 0; }

/* ===== WooCommerce-Grundlagen (Kasse kommt in Schritt 4 dazu) */
.woocommerce-notices-wrapper:empty { display: none; }
/* Shop-Hinweise wie im alten Theme: farbige Fläche, weiße Schrift, Zeichen links (z. B. „Bestellung storniert“ auf der Bezahlseite) */
.woocommerce .woocommerce-error, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info,
.woocommerce-error, .woocommerce-message, .woocommerce-info {
	position: relative; list-style: none; margin: 0 0 24px; padding: 22px 24px 22px 62px; border: 0; border-radius: 15px;
	color: #fff; font: 400 16px/1.7 "Nunito Sans", sans-serif; box-shadow: none;
}
.woocommerce-error { background: linear-gradient(-10deg, #ee4545, #f66565); }
.woocommerce-message { background: linear-gradient(-10deg, #2c7f75, #3a9e93); }
.woocommerce-info { background: linear-gradient(-10deg, #2c5f9e, #3b74b8); }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { margin: 0; padding: 0; list-style: none; }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { color: #fff; text-decoration: underline; }
.woocommerce-error::before, .woocommerce-message::before, .woocommerce-info::before {
	content: ""; position: absolute; left: 20px; top: 22px; width: 26px; height: 26px; background: #fff; border: 0; font-family: inherit;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 16px; }
.mg-shop .product .price { color: var(--mg-dunkel); font-weight: 700; }

/* ===== Seiten aus Editor-Blöcken (02.11.2026, wie GB). Gruppen tragen die bisherigen Klassen (mg-band, mg-zweispaltig, mg-hinweis …).
   Ohne theme.json legt WordPress in jede Gruppe einen Innencontainer – display:contents macht ihn durchlässig, damit Raster
   und Abstände der Klassen wie vorher auf die Kinder wirken. */
.wp-block-group > .wp-block-group__inner-container { display: contents; }
hr.wp-block-separator.mg-text__strich { border: 0; opacity: 1; width: 56px; height: 3px; margin: 0 0 1em; }
.mg-mitte hr.wp-block-separator.mg-text__strich { margin-left: auto; margin-right: auto; }
.mg-zweispaltig__bild .wp-block-image, .mg-danke .wp-block-image { margin: 0; }
.mg-seite .alignfull.mg-band { margin-left: 0; margin-right: 0; max-width: none; }
/* Startseite: Überzeilen sind jetzt Absatz-Blöcke – nicht die Fließtext-Regeln der Vorteile-Spalte erben */
.mfn .mfn-vort-txt p.mfn-eb { color: var(--t); font-size: 13px; }