/* Inhalts-Bausteine [optifin_ablauf] und [optifin_cta]; Quelle: Vorlagen im SEO-Projekt, content/_vorlagen/ */

/* Ablauf-Baustein */
.of-ablauf{box-sizing:border-box;margin:32px 0;background:#fff;border:1px solid #eaecf0;border-radius:20px;box-shadow:0 1px 3px rgba(16,24,40,.06),0 12px 32px -16px rgba(16,24,40,.18);overflow:hidden;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#101828;line-height:1.55;-webkit-font-smoothing:antialiased}
.of-ablauf *,.of-ablauf *::before,.of-ablauf *::after{box-sizing:border-box}
.of-ablauf h2,.of-ablauf h3,.of-ablauf p,.of-ablauf ul,.of-ablauf ol,.of-ablauf li,.of-ablauf a,.of-ablauf span{font-family:inherit;letter-spacing:normal;text-transform:none}
.of-ablauf h2::before,.of-ablauf h3::before,.of-ablauf h2::after,.of-ablauf h3::after{content:none}
.of-ablauf__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:32px 36px 24px;border-bottom:1px solid #eaecf0}
.of-ablauf__kopf-text{display:flex;flex-direction:column;gap:8px;max-width:560px}
.of-ablauf__kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#2875b7}
.of-ablauf__kicker::before{content:"";width:18px;height:2px;background:#f58220;display:inline-block}
.of-ablauf__titel{margin:0;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.01em;color:#101828;text-wrap:pretty}
.of-ablauf__zahl{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;text-align:right}
.of-ablauf__zahl-wert{font-size:34px;font-weight:800;line-height:1;color:#216197;letter-spacing:-.02em}
.of-ablauf__zahl-text{font-size:12px;font-weight:500;color:#6e6e6e}
.of-ablauf__schritte{list-style:none;margin:0;padding:8px 36px}
.of-ablauf__schritt{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 20px;padding:24px 0;margin:0;border-bottom:1px solid #eaecf0;color:#101828;font-size:14.5px}
.of-ablauf__schritt:last-child{border-bottom:0;padding-bottom:28px}
.of-ablauf__spur{display:flex;flex-direction:column;align-items:center;gap:10px}
.of-ablauf__symbol{width:48px;height:48px;border-radius:999px;background:#216197;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px #eaf2f9;flex-shrink:0}
.of-ablauf__symbol svg{width:22px;height:22px}
.of-ablauf__schritt--letzter .of-ablauf__symbol{background:#f58220;box-shadow:0 0 0 6px #fef6ee}
.of-ablauf__linie{width:2px;flex-grow:1;background:#d6e4f0;border-radius:2px}
.of-ablauf__inhalt{display:flex;flex-direction:column;gap:12px;min-width:0}
.of-ablauf__schritt-kopf{display:flex;align-items:baseline;gap:12px}
.of-ablauf__nr{font-size:12px;font-weight:700;color:#f58220;letter-spacing:.06em}
.of-ablauf__schritt-titel{margin:0;font-size:19px;line-height:1.3;font-weight:700;color:#101828}
.of-ablauf__paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.of-ablauf__rolle{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;background:#f9fafb;border:1px solid #eaecf0}
.of-ablauf__rolle--wir{background:#eaf2f9;border-color:#d6e4f0}
.of-ablauf__rolle-name{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6e6e6e}
.of-ablauf__rolle--wir .of-ablauf__rolle-name{color:#216197}
.of-ablauf .of-ablauf__rolle p{margin:0;font-size:14.5px;line-height:1.55;color:#475467}
.of-ablauf .of-ablauf__rolle--wir p{color:#174c73}
.of-ablauf__fuss{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;padding:24px 36px;background:#f9fafb;border-top:1px solid #eaecf0}
.of-ablauf__uebernahme{display:flex;flex-direction:column;gap:10px}
.of-ablauf__block-titel{margin:0;font-size:15px;font-weight:700;color:#101828}
.of-ablauf__liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.of-ablauf__liste li{display:flex;align-items:flex-start;gap:10px;margin:0;padding:0;font-size:14px;line-height:1.45;color:#475467}
.of-ablauf__liste svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.of-ablauf__aktion{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:22px 24px;background:#216197;border-radius:16px;color:#fff}
.of-ablauf .of-ablauf__aktion,.of-ablauf .of-ablauf__aktion p,.of-ablauf .of-ablauf__aktion span{color:#d6e4f0!important}
.of-ablauf__kosten{margin:0;font-size:14px;line-height:1.5;color:#d6e4f0!important}
.of-ablauf__knoepfe{display:flex;flex-direction:column;gap:10px}
.of-ablauf__btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.of-ablauf__btn svg{width:18px;height:18px;flex-shrink:0}
.of-ablauf .of-ablauf__btn--primaer,.of-ablauf .of-ablauf__btn--primaer:visited{padding:13px 20px;background:#f58220!important;border:1px solid #f58220;color:#fff!important;box-shadow:0 6px 16px -6px rgba(245,130,32,.7);text-decoration:none!important}
.of-ablauf .of-ablauf__btn--primaer:hover,.of-ablauf .of-ablauf__btn--primaer:focus{background:#344054!important;border-color:#344054;color:#fff!important;box-shadow:none}
.of-ablauf .of-ablauf__btn--sekundaer,.of-ablauf .of-ablauf__btn--sekundaer:visited{padding:12px 20px;background:#fff!important;border:1px solid #fff;color:#216197!important;font-weight:600;font-size:14px;text-decoration:none!important}
.of-ablauf .of-ablauf__btn--sekundaer:hover,.of-ablauf .of-ablauf__btn--sekundaer:focus{background:#eaf2f9!important;border-color:#eaf2f9;color:#174c73!important}
.of-ablauf .of-ablauf__btn svg{color:inherit;stroke:currentColor}
.of-ablauf__telefon{margin:0;font-size:13px;color:#d6e4f0!important;text-align:center}
.of-ablauf .of-ablauf__telefon a,.of-ablauf .of-ablauf__telefon a:visited{color:#fff!important;font-weight:700;text-decoration:none;white-space:nowrap}
.of-ablauf .of-ablauf__telefon a:hover{text-decoration:underline}
/* Ausrichtung und Verteilung gegen Theme-Regeln festsetzen (z. B. zentrierte Gruppen, verteilte Flex-Inhalte) */
.of-ablauf,.of-ablauf *{text-align:left}
.of-ablauf .of-ablauf__zahl{text-align:right}
.of-ablauf .of-ablauf__liste{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;margin:0!important;padding:0!important;list-style:none!important}
.of-ablauf .of-ablauf__liste li{display:flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:flex-start!important;text-align:left!important;margin:0!important;padding:0!important;list-style:none!important}
.of-ablauf .of-ablauf__liste li::before,.of-ablauf .of-ablauf__liste li::after,.of-ablauf .of-ablauf__btn::before,.of-ablauf .of-ablauf__btn::after{content:none!important}
.of-ablauf .of-ablauf__liste svg{margin:1px 0 0!important;float:none!important}
.of-ablauf .of-ablauf__btn{display:flex!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;text-align:center!important;width:auto!important;margin:0!important}
.of-ablauf .of-ablauf__btn svg{margin:0!important;float:none!important;flex:0 0 auto!important}
.of-ablauf .of-ablauf__knoepfe{display:flex!important;flex-direction:column!important;align-items:stretch!important}
.of-ablauf .of-ablauf__telefon{text-align:center!important}
.of-ablauf .of-ablauf__schritt-kopf{justify-content:flex-start!important}
.of-ablauf .of-ablauf__kopf{justify-content:space-between!important}
@media (max-width:760px){
.of-ablauf__kopf{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 20px 18px}
.of-ablauf__zahl{align-items:flex-start;text-align:left;flex-direction:row;align-items:baseline;gap:8px}
.of-ablauf__zahl-wert{font-size:26px}
.of-ablauf__titel{font-size:24px}
.of-ablauf__schritte{padding:4px 20px}
.of-ablauf__schritt{grid-template-columns:44px minmax(0,1fr);gap:0 14px;padding:20px 0}
.of-ablauf__symbol{width:40px;height:40px;box-shadow:0 0 0 4px #eaf2f9}
.of-ablauf__schritt--letzter .of-ablauf__symbol{box-shadow:0 0 0 4px #fef6ee}
.of-ablauf__symbol svg{width:19px;height:19px}
.of-ablauf__schritt-titel{font-size:17px}
.of-ablauf__paar{grid-template-columns:1fr;gap:8px}
.of-ablauf__fuss{grid-template-columns:1fr;gap:18px;padding:20px}
}

/* CTA-Baustein */
.of-cta{box-sizing:border-box;display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center;margin:36px 0!important;padding:30px 32px;background:#216197;border-radius:20px;box-shadow:0 12px 32px -16px rgba(16,24,40,.45);font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#fff;line-height:1.55;text-align:left}
.of-cta *{box-sizing:border-box;font-family:inherit;letter-spacing:normal;text-transform:none}
.of-cta p,.of-cta ul,.of-cta li{margin:0!important;padding:0!important}
.of-cta__kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.08em!important;text-transform:uppercase!important;color:#d6e4f0}
.of-cta__kicker::before{content:"";width:18px;height:2px;background:#f58220;display:inline-block}
.of-cta .of-cta__titel{margin:8px 0 10px!important;font-size:26px;line-height:1.2;font-weight:800;color:#fff}
.of-cta .of-cta__text{font-size:15.5px;color:#d6e4f0}
.of-cta .of-cta__punkte{display:flex!important;flex-wrap:wrap;gap:8px 18px;margin-top:16px!important;list-style:none!important}
.of-cta .of-cta__punkte li{display:flex!important;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#fff;list-style:none!important}
.of-cta .of-cta__punkte li::before,.of-cta .of-cta__punkte li::after{content:none!important}
.of-cta__punkte svg{width:18px;height:18px;flex-shrink:0}
.of-cta__aktion{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.of-cta .of-cta__btn,.of-cta .of-cta__btn:visited{display:flex!important;align-items:center;justify-content:center;gap:8px;padding:15px 20px;border-radius:10px;background:#f58220!important;border:1px solid #f58220;color:#fff!important;font-size:16px;font-weight:700;line-height:1.2;text-decoration:none!important;text-align:center;box-shadow:0 6px 16px -6px rgba(245,130,32,.8);transition:background-color .2s,border-color .2s}
.of-cta .of-cta__btn:hover,.of-cta .of-cta__btn:focus{background:#fff!important;border-color:#fff;color:#174c73!important}
.of-cta .of-cta__btn::before,.of-cta .of-cta__btn::after{content:none!important}
.of-cta__btn svg{width:18px;height:18px;stroke:currentColor}
.of-cta .of-cta__telefon{font-size:13px;color:#d6e4f0;text-align:center!important}
.of-cta .of-cta__telefon a,.of-cta .of-cta__telefon a:visited{color:#fff!important;font-weight:700;text-decoration:none;white-space:nowrap}
@media (max-width:760px){
.of-cta{grid-template-columns:1fr;gap:20px;padding:24px 20px}
.of-cta .of-cta__titel{font-size:22px}
}
/* [optifin_cta stil="team"] und stil="kontakt" (13.11.2026): Aussehen kommt aus dem Theme (fragen-box, zitate-box, testimonial-box, kontakt-box)
   wie bei den bisherigen Blöcken 22929, 23515 und 22930. Hier nur das Layout, das bisher die Block-Gruppe und die Block-Spalten lieferten. */
.of-cta-team{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:.5em;box-sizing:border-box}
/* Abstand links und rechts (13.11.2026): Das Theme gibt fragen-box und zitate-box nur oben und unten 40 px. Lange Titel liefen
   bis an den Rand (Entwurf /standorte/), mobil galt das für jeden Team-Kasten. Kurze Titel wie „Haben Sie weitere Fragen?“ stehen gleich. */
.fragen-box.of-cta-team,.zitate-box.of-cta-team{padding-left:clamp(20px,6%,64px);padding-right:clamp(20px,6%,64px)}
.of-cta-kontakt{display:flex;flex-wrap:nowrap;align-items:center!important;gap:2em;box-sizing:border-box}
.of-cta-kontakt>.wp-block-column{flex:1 1 0;min-width:0}
@media (max-width:781px){
.of-cta-kontakt{flex-wrap:wrap!important}
.of-cta-kontakt>.wp-block-column{flex-basis:100%!important}
}