/* ==========================================================================
   YA Plan – Website-Stile (Farben & Schrift kommen aus theme.json)
   ========================================================================== */
:root {
  --ya-navy: #1B365D; --ya-himbeere: #C2185B; --ya-himbeere-dunkel: #A8144F;
  --ya-nebelblau: #DCE3EE; --ya-papier: #F6F7FA; --ya-weiss: #FFFFFF;
  --ya-text-2: #3D5275; --ya-text-3: #5A6B88; --ya-hell: #D5DDEA;
  --ya-rosa: #F3B6CC; --ya-rahmen-navy: #8FA3C2; --ya-inaktiv: #C3CEDF;
  --ya-pad: clamp(1.25rem, 4vw, 2.5rem);
  --ya-max: 1200px;
  --ya-r-btn: 12px; --ya-r-card: 16px;
}

/* Grundraster: keine Lücken zwischen den Flächen */
.wp-site-blocks > * , .ya-main > * { margin-block: 0 !important; }
.wp-site-blocks { padding: 0 !important; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
:where(a, button, input, summary):focus-visible { outline: 2px solid var(--ya-himbeere); outline-offset: 3px; border-radius: 4px; }
.ya-hero :focus-visible, .ya-header :focus-visible, .ya-footer :focus-visible, .ya-pagehead :focus-visible { outline-color: var(--ya-rosa); }

/* Flächen bekommen einheitlichen Seitenabstand */
.ya-header, .ya-hero, .ya-section, .ya-band, .ya-footer, .ya-pagehead { padding-inline: var(--ya-pad); }
.ya-header > *, .ya-hero > *, .ya-section > *, .ya-band > *, .ya-footer > *, .ya-pagehead > * { max-width: var(--ya-max); margin-inline: auto; }
.ya-wrap { width: 100%; max-width: var(--ya-max); margin-inline: auto; }
.ya-wrap--narrow { max-width: 720px; }
.ya-wrap > :first-child { margin-top: 0; }

/* ---------- Kopfzeile ---------- */
.ya-header { padding-block: 1.1rem; position: relative; z-index: 20; }
.ya-header__bar { gap: 1.5rem; }
.ya-logo { display: inline-flex; line-height: 0; flex: none; }
.ya-logo img { width: 132px; height: auto; }
.ya-header__nav { gap: 1.75rem; }
.ya-nav { font-weight: 600; font-size: 0.9375rem; gap: 1.6rem; }
.ya-nav a { color: var(--ya-weiss) !important; text-decoration: none !important; padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.ya-nav a:hover, .ya-nav .current-menu-item > a { border-bottom-color: var(--ya-rosa); }
.ya-header__cta .wp-block-button__link { padding: 0.7rem 1.15rem; font-size: 0.9375rem; min-height: 44px; display: inline-flex; align-items: center; }
.ya-nav .wp-block-navigation__responsive-container-open { color: var(--ya-weiss); }
.ya-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem var(--ya-pad); }
.ya-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; font-size: 1.375rem; font-weight: 700; }
@media (max-width: 781px) { .ya-header__cta { display: none; } }

/* ---------- Gemeinsame Bausteine ---------- */
.ya-overline { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ya-himbeere); margin: 0 0 0.9rem; }
.ya-overline--navy { color: var(--ya-rosa); }
.ya-lead { font-size: var(--wp--preset--font-size--gross); color: var(--ya-text-2); max-width: 62ch; }
.ya-note { color: var(--ya-text-3); font-size: 0.9375rem; margin-top: 2rem; }
.ya-note--center { text-align: center; }
.ya-note a { color: var(--ya-navy); font-weight: 600; }
.ya-signature { font-weight: 700; margin-top: 2rem; }

.ya-actions { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-top: 2rem; }
.ya-actions--center { justify-content: center; margin-top: 3rem; }
.ya-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 1rem 1.625rem; border-radius: var(--ya-r-btn); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none !important; border: 1.5px solid transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ya-btn--primary { background: var(--ya-himbeere); color: var(--ya-weiss) !important; }
.ya-btn--primary:hover { background: var(--ya-himbeere-dunkel); }
.ya-btn--ghost { background: transparent; color: var(--ya-weiss) !important; border-color: var(--ya-rahmen-navy); }
.ya-btn--ghost:hover { border-color: var(--ya-weiss); }
.ya-btn--navy { background: var(--ya-navy); color: var(--ya-weiss) !important; }
.ya-btn--navy:hover { background: #142a49; }
.ya-btn--outline { background: transparent; color: var(--ya-navy) !important; border-color: var(--ya-navy); }

/* ---------- Hero ---------- */
.ya-hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); }
.ya-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ya-hero__title { font-size: var(--wp--preset--font-size--hero); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; color: var(--ya-weiss); margin: 0; }
.ya-hero__lead { font-size: var(--wp--preset--font-size--gross); color: var(--ya-hell); max-width: 34rem; margin: 1.5rem 0 0; }

/* Die Plan-Karte: das eine Element, das hängen bleibt */
.ya-plancard { background: var(--ya-weiss); color: var(--ya-navy); border-radius: var(--ya-r-card); padding: 1.75rem; box-shadow: 0 24px 48px -24px rgba(5, 18, 38, .55); }
.ya-plancard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ya-plancard__title { font-weight: 800; font-size: 1.1875rem; margin: 0; }
.ya-plancard__pct { margin: 0; font-weight: 700; color: var(--ya-text-3); font-size: 0.9375rem; }
.ya-plancard__pct span { color: var(--ya-himbeere); font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ya-progress { height: 8px; background: var(--ya-nebelblau); border-radius: 99px; margin: 1rem 0 1.5rem; overflow: hidden; }
.ya-progress span { display: block; height: 100%; background: var(--ya-himbeere); border-radius: inherit; transform-origin: left; animation: ya-fill 1.1s .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ya-fill { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ya-progress span { animation: none; } }
.ya-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.ya-steps li { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0; font-weight: 600; border-top: 1px solid var(--ya-nebelblau); }
.ya-steps li:first-child { border-top: 0; }
.ya-steps__mark { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--ya-inaktiv); display: grid; place-items: center; }
.ya-steps__mark svg { width: 16px; height: 16px; color: var(--ya-weiss); }
.ya-steps li.is-done .ya-steps__mark { background: var(--ya-navy); border-color: var(--ya-navy); }
.ya-steps li.is-current .ya-steps__mark { border-color: var(--ya-himbeere); box-shadow: inset 0 0 0 4px var(--ya-weiss), inset 0 0 0 12px var(--ya-himbeere); }
.ya-steps li:not(.is-done):not(.is-current) { color: var(--ya-text-3); font-weight: 500; }

/* ---------- Abschnitte ---------- */
.ya-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.ya-section--tight { padding-top: 0; }
.ya-section__head { margin-bottom: 2.25rem; max-width: 40rem; }
.ya-section h2, .ya-band h2, .ya-feature h2 { font-size: var(--wp--preset--font-size--abschnitt); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }

.ya-cards { display: grid; gap: 1.25rem; }
.ya-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ya-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ya-card { box-sizing: border-box; background: var(--ya-weiss); border: 1px solid var(--ya-nebelblau); border-radius: var(--ya-r-card); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ya-card h3, .ya-card__title { font-size: 1.1875rem !important; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.ya-card p { margin: 0; color: var(--ya-text-2); }
.ya-card .ya-btn { align-self: flex-start; margin-top: auto; }
.ya-card p + .ya-btn { margin-top: 1rem; }
.ya-icon { width: 32px; height: 32px; color: var(--ya-himbeere); margin-bottom: 0.5rem; }

/* Drei Wege (Startseite) */
.ya-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ya-nebelblau); border-radius: var(--ya-r-card); background: var(--ya-weiss); overflow: hidden; }
.ya-path { display: grid; gap: 0.35rem; padding: 1.75rem 1.5rem; text-decoration: none !important; color: var(--ya-navy) !important; border-left: 1px solid var(--ya-nebelblau); transition: background-color .15s ease; }
.ya-path:first-child { border-left: 0; }
.ya-path:hover { background: var(--ya-papier); }
.ya-path__name { font-weight: 800; font-size: 1.1875rem; }
.ya-path__price { font-weight: 800; font-size: 1.75rem; color: var(--ya-himbeere); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ya-path__desc { color: var(--ya-text-2); }

/* Abschluss-Band */
.ya-band { padding-block: clamp(2.75rem, 6vw, 4rem); }
.ya-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
.ya-band p { margin: 0.6rem 0 0; color: var(--ya-text-2); max-width: 36rem; }

/* ---------- Unterseiten-Kopf ---------- */
.ya-pagehead { padding-block: clamp(3rem, 7vw, 5rem); }
.ya-pagehead h1, .ya-pagehead .wp-block-post-title { font-size: clamp(2.125rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--ya-weiss); margin: 0; max-width: 20ch; }
.ya-pagehead--small .wp-block-post-title { font-size: clamp(1.875rem, 4vw, 2.5rem); }
.ya-pagehead__lead { color: var(--ya-hell); font-size: var(--wp--preset--font-size--gross); max-width: 44rem; margin: 1.25rem 0 0; }

/* ---------- Preise ---------- */
.ya-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.ya-price { background: var(--ya-weiss); border: 1px solid var(--ya-nebelblau); border-radius: var(--ya-r-card); padding: 2rem 1.75rem; display: flex; flex-direction: column; scroll-margin-top: 2rem; }
.ya-price--featured { border: 2px solid var(--ya-navy); }
.ya-price__name { font-size: 1.375rem !important; margin: 0 !important; }
.ya-price__amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; }
.ya-price__amount small { font-size: 1rem; font-weight: 700; color: var(--ya-text-3); letter-spacing: 0; }
.ya-price__for { color: var(--ya-text-2); margin: 0.5rem 0 1.25rem; min-height: 3.2em; }
.ya-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.7rem; }
.ya-list li { display: grid; grid-template-columns: 22px 1fr; gap: 0.6rem; align-items: start; }
.ya-list svg { width: 20px; height: 20px; color: var(--ya-himbeere); margin-top: 0.2rem; }
.ya-price__btn { margin-top: auto; width: 100%; }

/* 1-Minuten-Check */
.ya-section--check { scroll-margin-top: 1rem; }
.ya-check { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ya-check__intro p:not(.ya-overline) { color: var(--ya-text-2); margin-top: 0.75rem; }
.ya-check__form { background: var(--ya-weiss); border-radius: var(--ya-r-card); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.5rem; }
.ya-check__q { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.ya-check__q legend { font-weight: 800; font-size: 1.0625rem; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.6rem; padding: 0; }
.ya-check__num { width: 26px; height: 26px; border-radius: 50%; background: var(--ya-navy); color: var(--ya-weiss); font-size: 0.8125rem; display: inline-grid; place-items: center; flex: none; }
.ya-check__q label { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--ya-nebelblau); border-radius: 10px; cursor: pointer; min-height: 44px; }
.ya-check__q label:hover { border-color: var(--ya-inaktiv); }
.ya-check__q label:has(input:checked) { border-color: var(--ya-navy); background: var(--ya-papier); font-weight: 600; }
.ya-check__q input { accent-color: var(--ya-himbeere); width: 18px; height: 18px; margin: 0; }
.ya-check__result { border-top: 1px solid var(--ya-nebelblau); padding-top: 1.5rem; }
.ya-check__result p { margin: 0 0 0.75rem; color: var(--ya-text-2); }
.ya-check__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ya-himbeere) !important; }
.ya-check__offer { font-size: 1.625rem; font-weight: 800; color: var(--ya-navy) !important; letter-spacing: -0.02em; }
.ya-check__offer span { color: var(--ya-himbeere); }
.ya-check__hint { margin: 0; color: var(--ya-text-3); font-size: 0.9375rem; }

/* ---------- So funktioniert's ---------- */
.ya-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; counter-reset: ya; }
.ya-timeline li { counter-increment: ya; position: relative; padding: 0 0 2.5rem 4.25rem; }
.ya-timeline li::before { content: counter(ya); position: absolute; left: 0; top: -0.15rem; width: 44px; height: 44px; border-radius: 50%; background: var(--ya-navy); color: var(--ya-weiss); font-weight: 800; display: grid; place-items: center; }
.ya-timeline li::after { content: ""; position: absolute; left: 21px; top: 48px; bottom: 6px; width: 2px; background: var(--ya-nebelblau); }
.ya-timeline li.is-last::before { background: var(--ya-himbeere); }
.ya-timeline li.is-last::after { display: none; }
.ya-timeline h2 { font-size: 1.375rem !important; margin: 0 0 0.4rem !important; }
.ya-timeline p { margin: 0; color: var(--ya-text-2); }

/* ---------- Über uns ---------- */
.ya-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ya-split__main .ya-lead { margin: 1rem 0 2rem; }
.ya-photo { margin: 0; position: sticky; top: 2rem; }
.ya-photo__placeholder { aspect-ratio: 4 / 5; border-radius: var(--ya-r-card); background: var(--ya-nebelblau); display: grid; place-items: center; color: var(--ya-text-3); font-weight: 600; text-align: center; padding: 1rem; }
.ya-facts { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ya-facts__text p { color: var(--ya-text-2); margin-top: 1rem; }
.ya-facts__list { margin: 0; display: grid; gap: 0; border-left: 2px solid var(--ya-himbeere); }
.ya-facts__list div { padding: 0.9rem 0 0.9rem 1.5rem; }
.ya-facts__list dt { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ya-navy); }
.ya-facts__list dd { margin: 0; color: var(--ya-text-2); }

/* ---------- Kontakt ---------- */
.ya-feature { margin-top: 1.25rem; background: var(--ya-navy); color: var(--ya-weiss); border-radius: var(--ya-r-card); padding: clamp(1.75rem, 4vw, 2.75rem); display: flex; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ya-feature > div { max-width: 40rem; }
.ya-feature h2 { color: var(--ya-weiss) !important; font-size: 1.625rem !important; }
.ya-feature p { color: var(--ya-hell); margin: 0.75rem 0 0; }
.ya-feature__proof { color: var(--ya-rosa) !important; font-weight: 700; }

/* ---------- Fließtext-Seiten (Impressum, Datenschutz) ---------- */
.ya-prose h2 { font-size: 1.5rem !important; margin-top: 2.5rem; }
.ya-prose h3 { margin-top: 1.75rem; }
.ya-prose p, .ya-prose li { color: var(--ya-text-2); }

/* ---------- Fußzeile ---------- */
.ya-footer { padding-block: 3rem 2rem; font-size: 0.9375rem; }
.ya-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.ya-footer__brand p { margin: 1rem 0 0; max-width: 22rem; color: var(--ya-hell); }
.ya-footer__links { display: grid; gap: 0.55rem; align-content: start; }
.ya-footer a { color: var(--ya-weiss) !important; text-decoration: none; }
.ya-footer__links a:hover { text-decoration: underline; text-decoration-color: var(--ya-rosa); text-underline-offset: 4px; }
.ya-footer__copy { margin-block: 2.5rem 0; padding-top: 1.25rem; border-top: 1px solid rgba(213, 221, 234, .2); color: var(--ya-rahmen-navy); font-size: 0.875rem; }

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
  .ya-hero__grid, .ya-check, .ya-split, .ya-facts { grid-template-columns: 1fr; }
  .ya-cards--3, .ya-prices, .ya-paths { grid-template-columns: 1fr; }
  .ya-path { border-left: 0; border-top: 1px solid var(--ya-nebelblau); }
  .ya-path:first-child { border-top: 0; }
  .ya-photo { position: static; max-width: 22rem; }
  .ya-price__for { min-height: 0; }
}
@media (max-width: 640px) {
  .ya-cards--2 { grid-template-columns: 1fr; }
  .ya-footer__grid { grid-template-columns: 1fr 1fr; }
  .ya-footer__brand { grid-column: 1 / -1; }
  .ya-actions .ya-btn { flex: 1 1 100%; }
  .ya-band__inner .ya-btn { width: 100%; }
}

/* Rechtstexte */
.ya-prose .ya-wrap h2 { font-size: 1.25rem !important; margin: 2.25rem 0 0.5rem; letter-spacing: -0.01em; }
.ya-prose .ya-wrap p { margin: 0 0 0.85rem; }

/* Fotos Über uns */
.ya-photo img { display: block; width: 100%; aspect-ratio: 9 / 10; object-fit: cover; border-radius: var(--ya-r-card); }
.ya-photo figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--ya-text-3); font-weight: 600; }
.ya-person { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.25rem; }
.ya-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--ya-nebelblau); }

/* Über uns: Studiofoto im Kopfbereich */
.ya-pagehead__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ya-teamphoto { margin: 0; }
.ya-teamphoto img { display: block; width: 100%; height: auto; border-radius: var(--ya-r-card); box-shadow: 0 24px 48px -24px rgba(5, 18, 38, .6); }
.ya-split--single { grid-template-columns: 1fr; }
.ya-split--single .ya-cards--2 { max-width: 960px; }
@media (max-width: 900px) { .ya-pagehead__grid { grid-template-columns: 1fr; } }

/* Volle Breite für Seiten ohne Titel (z. B. Kundenseite) */
.ya-fullpage .wp-block-post-content > * { margin-block: 0; max-width: none; }