/* ASTRAL-Blöcke: Preis-Karten, Rechner, Formular, Brotkrumen, Autor-Box, FAQ. */

.astral-tarife, .astral-rechner, .astral-formular, .astral-autor, .astral-faq, .astral-verwandt {
	--a-navy: var(--wp--preset--color--navy, #0B1E3F);
	--a-primary: var(--wp--preset--color--primary, #17386F);
	--a-accent: var(--wp--preset--color--accent, #F2A20C);
	--a-surface: var(--wp--preset--color--surface, #F3F5F9);
	--a-line: var(--wp--preset--color--line, #DCE2EC);
	--a-muted: var(--wp--preset--color--muted, #566176);
	--a-radius: var(--wp--custom--radius--card, 12px);
}

/* ---------- Preis-Karten ---------- */
.astral-tarife { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-block: 1.5rem; }
.astral-tarife--einzeln { grid-template-columns: minmax(0, 560px); justify-content: center; }
.astral-tarif {
	position: relative; display: flex; flex-direction: column; gap: .6rem; background: #fff;
	border: 1px solid var(--a-line); border-top: 5px solid var(--a-primary); border-radius: var(--a-radius);
	padding: 1.5rem; box-shadow: 0 1px 2px rgba(11,30,63,.06), 0 8px 24px rgba(11,30,63,.08);
}
.astral-tarif.is-empfohlen { border-top-color: var(--a-accent); }
.astral-tarif > * { margin: 0; }
.astral-tarif__badge { position: absolute; top: -.85rem; right: 1rem; background: var(--a-accent); color: var(--a-navy); font-weight: 800; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; }
.astral-tarif__produkt { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--a-primary); }
.astral-tarif__titel { font-size: 1.35rem !important; line-height: 1.2; }
.astral-tarif__satz { font-size: .95rem; color: var(--a-muted); }
.astral-tarif__satz strong { color: var(--a-navy); }
.astral-tarif__daten { display: grid; gap: .1rem; font-size: .92rem; border-top: 1px solid var(--a-line); padding-top: .6rem; }
.astral-tarif__daten div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .5rem; padding: .25rem 0; }
.astral-tarif__daten dt { color: var(--a-muted); }
.astral-tarif__daten dd { margin: 0; font-weight: 600; }
.astral-tarif__extras { list-style: none; padding: 0 !important; font-size: .92rem; }
.astral-tarif__extras li { padding-left: 1.4rem; position: relative; margin: .2rem 0; }
.astral-tarif__extras li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--success, #1E7A4C); font-weight: 800; }
.astral-tarif__preis { margin-top: auto !important; background: var(--a-surface); border-radius: 8px; padding: .9rem 1rem; display: grid; gap: .15rem; }
.astral-tarif__preis-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); font-weight: 700; }
.astral-tarif__preis-wert { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 2.2rem; line-height: 1.05; color: var(--a-navy); }
.astral-tarif__preis-wert small { font-size: 1rem; font-weight: 600; color: var(--a-muted); font-family: var(--wp--preset--font-family--body); }
.astral-tarif__preis-info { font-size: .85rem; color: var(--a-muted); }
.astral-tarif__preis-datum { margin: -.25rem 0 0; font-size: .85rem; font-weight: 600; color: var(--a-muted); text-align: center; }
.astral-tarif__cta { display: block; text-align: center; text-decoration: none !important; }
.astral-tarif__meta { font-size: .78rem; color: var(--a-muted); }

/* ---------- Rechner ---------- */
.astral-rechner { background: var(--a-navy); color: #fff; border-radius: var(--a-radius); padding: clamp(1.25rem, 3vw, 2rem); margin-block: 2rem; }
.astral-rechner__kopf { margin-bottom: 1rem; }
.astral-rechner__kopf p { margin: .25rem 0 0; color: #C9D5EA; }
.astral-rechner__titel { color: #fff !important; font-size: var(--wp--preset--font-size--x-large) !important; margin: 0; }
.astral-rechner__form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
.astral-rechner__feld[hidden] { display: none; }
.astral-rechner__schritt { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-right: .3em; border-radius: 50%; background: var(--a-accent); color: var(--a-navy); font-size: .8rem; line-height: 1; }
.astral-rechner__feld label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .35rem; color: #E3EAF6; }
.astral-rechner select, .astral-rechner input[type=number] {
	width: 100%; min-height: 48px; border-radius: 8px; border: 1px solid #3A5584; background: #fff; color: var(--a-navy);
	padding: .55rem .75rem; font: inherit; font-size: 1rem;
}
.astral-rechner__ergebnis { grid-column: 1 / -1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 10px; padding: 1.1rem 1.25rem; display: grid; gap: .35rem; }
.astral-rechner__ergebnis p { margin: 0; }
.astral-rechner__preis { font-size: 1.5rem; }
.astral-rechner__preis strong { font-family: var(--wp--preset--font-family--heading); font-size: 2.3rem; color: var(--a-accent); }
.astral-rechner__details { color: #D7E0F0; font-size: .95rem; }
.astral-rechner__hinweis { color: #FFD68A; font-size: .9rem; }
.astral-rechner__hinweis:empty, .astral-rechner__details:empty { display: none; }
.astral-rechner__cta { justify-self: start; margin-top: .5rem; border: 0; cursor: pointer; }
.astral-rechner__klein { font-size: .78rem; color: #A9B8D3; }

/* ---------- Formular ---------- */
.astral-formular__form { background: #fff; border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: 0 8px 24px rgba(11,30,63,.08); }
.astral-formular__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1rem; }
.astral-formular__raster[hidden], .astral-formular [hidden] { display: none !important; }
.astral-formular__breit { grid-column: 1 / -1; }
.astral-formular label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.astral-formular input[type=text], .astral-formular input[type=email], .astral-formular input[type=tel], .astral-formular input[type=number], .astral-formular select, .astral-formular textarea {
	width: 100%; min-height: 46px; border: 1px solid #B9C3D4; border-radius: 8px; padding: .55rem .75rem; font: inherit; font-size: 1rem; background: #fff; color: inherit;
}
.astral-formular textarea { min-height: 110px; }
.astral-formular :is(input, select, textarea):focus { border-color: var(--a-primary); outline: 2px solid rgba(23,56,111,.25); outline-offset: 0; }
.astral-formular.ist-geprueft :invalid, .astral-formular__form.ist-geprueft :invalid { border-color: #B42318; }
.astral-formular__anliegen { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.astral-formular__anliegen legend { font-weight: 700; margin-bottom: .5rem; width: 100%; }
.astral-formular__anliegen label { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--a-line); border-radius: 999px; padding: .55rem 1rem; cursor: pointer; margin: 0; }
.astral-formular__anliegen label:has(input:checked) { border-color: var(--a-primary); background: #E8EEF8; }
.astral-formular__datenschutz label { font-weight: 400; display: flex; gap: .6rem; align-items: flex-start; }
.astral-formular__datenschutz input { margin-top: .3rem; width: 1.1rem; height: 1.1rem; flex: none; }
.astral-formular__senden { border: 0; cursor: pointer; font-size: 1.05rem !important; min-width: 240px; }
.astral-formular__klein { font-size: .8rem; color: var(--a-muted); }
.astral-formular__auswahl { background: #FFF7E6; border-radius: 8px; padding: .6rem .9rem; font-weight: 600; }
.astral-formular__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.astral-formular__danke { background: #E8F5EE; border: 1px solid #A6D8BC; border-radius: var(--a-radius); padding: 1.5rem; }
.astral-formular__danke h3 { margin-top: 0; }
.astral-formular__fehler { background: #FDECEA; border: 1px solid #F5B7B1; border-radius: 8px; padding: .8rem 1rem; }

/* ---------- Brotkrumen ---------- */
.astral-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: 0; margin: 0; font-size: .875rem; }
.astral-breadcrumbs li + li::before { content: "›"; margin-right: .35rem; opacity: .7; }
.astral-breadcrumbs a { color: inherit; opacity: .85; }
.astral-breadcrumbs [aria-current] { opacity: .75; }

/* ---------- Autor-Box ---------- */
.astral-autor { display: flex; gap: 1.1rem; align-items: flex-start; border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 1.25rem; background: var(--a-surface); margin-block: 2rem; }
.astral-autor p { margin: 0; }
.astral-autor__foto, .astral-autor__initialen { width: 72px; height: 72px; border-radius: 50%; flex: none; object-fit: cover; }
.astral-autor__initialen { display: grid; place-items: center; background: var(--a-primary); color: #fff; font-weight: 800; font-size: 1.4rem; font-family: var(--wp--preset--font-family--heading); }
.astral-autor__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--a-muted); font-weight: 700; }
.astral-autor__name { font-weight: 800; font-size: 1.15rem; color: var(--a-navy); }
.astral-autor__rolle, .astral-autor__stand { font-size: .88rem; color: var(--a-muted); }
.astral-autor__text { font-size: .95rem; margin-block: .35rem !important; }

/* ---------- FAQ ---------- */
.astral-faq { margin-block: 1rem 2rem; }
.astral-faq__gruppe { margin-top: 2.5rem !important; font-size: var(--wp--preset--font-size--x-large) !important; }
.astral-faq__eintrag summary { font-size: 1.08rem; padding-block: .15rem; }
.astral-faq__antwort > :first-child { margin-top: .5rem; }
.astral-faq__link { font-size: .85rem; }
.astral-verwandt { border-top: 1px solid var(--a-line); padding-top: 1.5rem; margin-top: 1rem; }
.astral-verwandt h2 { font-size: var(--wp--preset--font-size--large) !important; }
.astral-verwandt__produkt { font-weight: 700; background: var(--a-surface); padding: .8rem 1rem; border-radius: 8px; }

/* ---------- Korrekturen nach Design-Prüfung ---------- */
.astral-rechner *, .astral-rechner *::before, .astral-rechner *::after,
.astral-formular *, .astral-formular *::before, .astral-formular *::after { box-sizing: border-box; }
.astral-rechner input[type=number] { height: 48px; }
.astral-rechner__feld label { min-height: 1.2em; }
.astral-formular__datenschutz label > span { flex: 1; }
@media (max-width: 600px) {
	.astral-rechner__preis { font-size: 1.15rem; }
	.astral-rechner__preis strong { font-size: 1.9rem; display: inline-block; }
	.astral-rechner__cta, .astral-formular__senden { width: 100%; justify-self: stretch; }
}