.elementor-2633 .elementor-element.elementor-element-73a08ef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;}.elementor-2633 .elementor-element.elementor-element-5dfbe51{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:50px 50px;--row-gap:50px;--column-gap:50px;}.elementor-2633 .elementor-element.elementor-element-8d4e2ed{--display:flex;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-2633 .elementor-element.elementor-element-78c2756{--divider-border-style:solid;--divider-color:var( --e-global-color-accent );--divider-border-width:2px;}.elementor-2633 .elementor-element.elementor-element-78c2756 .elementor-divider-separator{width:80px;margin:0 auto;margin-center:0;}.elementor-2633 .elementor-element.elementor-element-78c2756 .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-2633 .elementor-element.elementor-element-f556220{text-align:center;}.elementor-2633 .elementor-element.elementor-element-f556220 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-2633 .elementor-element.elementor-element-121e490 > .elementor-widget-container{margin:5px 0px 0px 0px;}.elementor-2633 .elementor-element.elementor-element-121e490{text-align:center;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}@media(max-width:1440px){.elementor-2633 .elementor-element.elementor-element-f556220 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-2633 .elementor-element.elementor-element-121e490{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:991px){.elementor-2633 .elementor-element.elementor-element-f556220 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-2633 .elementor-element.elementor-element-121e490{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-2633 .elementor-element.elementor-element-5dfbe51{--gap:35px 35px;--row-gap:35px;--column-gap:35px;}.elementor-2633 .elementor-element.elementor-element-78c2756 .elementor-divider{text-align:left;}.elementor-2633 .elementor-element.elementor-element-78c2756 .elementor-divider-separator{margin:0 auto;margin-left:0;}.elementor-2633 .elementor-element.elementor-element-f556220{text-align:start;}.elementor-2633 .elementor-element.elementor-element-121e490{text-align:start;}}@media(max-width:480px){.elementor-2633 .elementor-element.elementor-element-f556220 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-2633 .elementor-element.elementor-element-121e490{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(min-width:481px){.elementor-2633 .elementor-element.elementor-element-5dfbe51{--content-width:1350px;}}/* Start custom CSS *//* --------------------------------------------------------------------------
   0) GEMEINSAME FARBPALETTE
   Hier zentral anpassen – wirkt auf Ablauf und Hero-Grafik.
   (Die Hero-Grafik nutzt weiterhin zuerst die Elementor-Globalfarben,
   falls vorhanden – genau wie bisher.)
   -------------------------------------------------------------------------- */
:root {
  --eo-c-navy:        #0B1B3A;  /* Dunkelblau (Ablauf-Hintergrund) */
  --eo-c-blue:        #1F80B2;  /* Hauptblau (Fallback Elementor-Akzent) */
  --eo-c-peach:       #F6D5B8;  /* Pfirsich */
  --eo-c-peach-light: #FDF1E4;  /* Pfirsich hell */
  --eo-c-sky:         #CDE6F4;  /* Himmelblau */
  --eo-c-sky-light:   #E3F1F9;  /* Himmelblau hell */
  --eo-c-sage:        #E6F2E1;  /* Salbeigrün */
  --eo-c-lilac:       #EFE8F7;  /* Flieder */
}


/* ==========================================================================
   1) ABLAUF-SECTION  #eo-ablauf
   ========================================================================== */
#eo-ablauf {
  --ab-bg: var(--eo-c-navy);
  --ab-bg-2: #132A55;
  --ab-line: #24406E;
  --ab-on-dark: #FFFFFF;
  --ab-on-dark-2: #C3CCE0;
  --ab-accent: #3399CC;
  --ab-accent-light: #8FCBEA;
  --ab-btn: #1F6FA3;
  --ab-ink: #111111;
  --ab-body: #5E5A55;
  --ab-muted: #6B6762;
  --ab-card: #FFFFFF;
  --ab-paper: #F6F5F4;
  --ab-border: rgba(0,0,0,.08);
  --ab-peach: var(--eo-c-peach); --ab-peach-2: var(--eo-c-peach-light); --ab-peach-ink: #8A5A12;
  --ab-sky: var(--eo-c-sky);     --ab-sky-2: var(--eo-c-sky-light);     --ab-sky-ink: #165B84;
  --ab-sage: var(--eo-c-sage);   --ab-sage-ink: #2F5F23;
  --ab-font: var(--e-global-typography-primary-font-family);
  --ab-serif: 'Source Serif 4', Georgia, serif;
  font-family: var(--ab-font);
  color: var(--ab-on-dark);
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
#eo-ablauf *, #eo-ablauf *::before, #eo-ablauf *::after { box-sizing: border-box; }
#eo-ablauf p, #eo-ablauf h2, #eo-ablauf h3, #eo-ablauf ol, #eo-ablauf ul { margin: 0; padding: 0; }
#eo-ablauf .eo-wrap { max-width: 1280px; margin: 0 auto; }

/* Kopf */
#eo-ablauf .eo-head { text-align: center; max-width: 760px; margin: 0 auto; }
#eo-ablauf .eo-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ab-bg-2); border: 1px solid var(--ab-line); color: var(--ab-accent-light); font-size: 13px; font-weight: 600; }
#eo-ablauf .eo-head h2 { margin-top: 20px; font-weight: 600; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.03; letter-spacing: -.04em; color: var(--ab-on-dark); }
#eo-ablauf .eo-head h2 em { font-family: var(--ab-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--ab-accent-light); }
#eo-ablauf .eo-head p { margin: 20px auto 0; max-width: 560px; color: var(--ab-on-dark-2); }

/* Phasen-Leiste */
#eo-ablauf .eo-phasebar { margin: 56px auto 24px; max-width: 980px; display: flex; align-items: center; }
#eo-ablauf .eo-phasechip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--ab-bg-2); border: 1px solid var(--ab-line); font-size: 14px; font-weight: 600; color: var(--ab-on-dark); }
#eo-ablauf .eo-dot { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; color: var(--ab-ink); }
#eo-ablauf .eo-dot-1 { background: var(--ab-peach); }
#eo-ablauf .eo-dot-2 { background: var(--ab-sky); }
#eo-ablauf .eo-dot-3 { background: var(--ab-accent); color: #fff; }
#eo-ablauf .eo-dash { flex: 1; height: 0; border-top: 2px dashed var(--ab-line); margin: 0 8px; min-width: 16px; }

/* Karten */
#eo-ablauf .eo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#eo-ablauf .eo-card { background: var(--ab-card); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; color: var(--ab-ink);border:1px solid #ddd; }
#eo-ablauf .eo-visual { height: 236px; padding: 24px; display: flex; align-items: flex-end; justify-content: center; }
#eo-ablauf .eo-visual-1 { background: var(--ab-peach); }
#eo-ablauf .eo-visual-2 { background: var(--ab-sky); }
#eo-ablauf .eo-visual-3 { background: var(--ab-accent); }

/* Mockups */
#eo-ablauf .eo-mock { width: 100%; max-width: 280px; background: #fff; border-radius: 12px 12px 0 0; padding: 16px 16px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.08); margin-bottom: -24px; }
#eo-ablauf .eo-mock-tight { margin-bottom: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
#eo-ablauf .eo-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 8px; background: var(--ab-paper); }
#eo-ablauf .eo-seg span { padding: 6px; border-radius: 6px; text-align: center; font-size: 12px; color: var(--ab-muted); }
#eo-ablauf .eo-seg span.on { background: #fff; font-weight: 600; color: var(--ab-ink); }
#eo-ablauf .eo-days { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
#eo-ablauf .eo-days i { height: 34px; border-radius: 6px; border: 1px solid var(--ab-border); }
#eo-ablauf .eo-days i.on { background: var(--ab-btn); border-color: var(--ab-btn); }
#eo-ablauf .eo-mock-label { margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--ab-body); }
#eo-ablauf .eo-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#eo-ablauf .eo-chips span { padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); font-size: 11px; color: var(--ab-ink); }
#eo-ablauf .eo-chips span.on { background: var(--ab-btn); border-color: var(--ab-btn); color: #fff; }
#eo-ablauf .eo-stack { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 8px; margin-bottom: -24px; }
#eo-ablauf .eo-stack .eo-mock-tight { border-radius: 12px 12px 0 0; }
#eo-ablauf .eo-bubble { align-self: flex-start; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 8px 12px 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,.08); font-size: 13px; color: var(--ab-ink); }
#eo-ablauf .eo-bubble img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; object-position: center 18%; background: var(--ab-peach); flex-shrink: 0; }
#eo-ablauf .eo-badge-green { align-self: flex-end; padding: 4px 10px; border-radius: 999px; background: var(--ab-sage); color: var(--ab-sage-ink); font-size: 11px; font-weight: 600; white-space: nowrap; }
#eo-ablauf .eo-badge-sm { font-size: 10px; padding: 2px 8px; }
#eo-ablauf .eo-mock-title { font-size: 13px; font-weight: 600; color: var(--ab-ink); }
#eo-ablauf .eo-mt { margin: 12px 0 10px; font-size: 15px; }
#eo-ablauf .eo-btn-mini { display: flex; align-items: center; justify-content: center; height: 30px; border-radius: 7px; border: 1px solid rgba(0,0,0,.12); font-size: 12px; color: var(--ab-ink); }
#eo-ablauf .eo-btn-mini.on { background: var(--ab-btn); border-color: var(--ab-btn); color: #fff; }
#eo-ablauf .eo-mock-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,.06); }
#eo-ablauf .eo-wordmark { font-family: 'Oxanium', var(--ab-font); font-weight: 600; font-size: 12px; letter-spacing: .06em; color: #000; }
#eo-ablauf .eo-wordmark span { color: var(--ab-accent); }
#eo-ablauf .eo-link { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--ab-border); margin-bottom: 8px; }
#eo-ablauf .eo-lock { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: var(--ab-sky-2); display: grid; place-items: center; }
#eo-ablauf .eo-lock svg { width: 16px; height: 16px; fill: none; stroke: var(--ab-sky-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#eo-ablauf .eo-link-text { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--ab-ink); line-height: 1.35; }
#eo-ablauf .eo-link-text small { font-size: 11px; color: var(--ab-muted); }

/* Kartentext */
#eo-ablauf .eo-body { padding: 28px 28px 24px; display: flex; flex-direction: column; flex: 1; }
#eo-ablauf .eo-phase { font-size: 13px; font-weight: 600; }
#eo-ablauf .eo-phase-1 { color: var(--ab-peach-ink); }
#eo-ablauf .eo-phase-2 { color: var(--ab-sky-ink); }
#eo-ablauf .eo-phase-3 { color: #1C6E9C; }
#eo-ablauf .eo-body h3 { margin-top: 4px; font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: var(--ab-ink); }
#eo-ablauf .eo-steps { list-style: none; margin-top: 18px; }
#eo-ablauf .eo-steps li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(0,0,0,.06); }
#eo-ablauf .eo-steps strong { display: block; font-size: 16px; font-weight: 600; color: var(--ab-ink); }
#eo-ablauf .eo-steps span:not(.eo-num) { display: block; margin-top: 2px; font-size: 15px; color: var(--ab-body); }
#eo-ablauf .eo-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; background: var(--ab-paper); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--ab-ink); }
#eo-ablauf .eo-num-accent { background: var(--ab-accent); color: #fff; }
#eo-ablauf .eo-num-plus { background: transparent; border: 1px dashed rgba(0,0,0,.25); color: var(--ab-muted); font-weight: 400; }
#eo-ablauf .eo-split { margin-top: auto; padding-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#eo-ablauf .eo-split > div { padding: 12px; border-radius: 10px; background: var(--ab-paper); }
#eo-ablauf .eo-split b { display: block; font-size: 12px; font-weight: 600; color: var(--ab-body); }
#eo-ablauf .eo-split span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.2em; color: var(--ab-ink); }
#eo-ablauf .eo-you-1 { background: var(--ab-peach-2) !important; } #eo-ablauf .eo-you-1 b { color: var(--ab-peach-ink); }
#eo-ablauf .eo-you-2 { background: var(--ab-sky-2) !important; }   #eo-ablauf .eo-you-2 b { color: var(--ab-sky-ink); }
#eo-ablauf .eo-you-3 { background: var(--ab-sage) !important; }    #eo-ablauf .eo-you-3 b { color: var(--ab-sage-ink); }

/* Vertrauensleiste */
#eo-ablauf .eo-trust { margin-top: 16px; background: var(--ab-bg-2); border: 1px solid var(--ab-line); border-radius: 16px; padding: 18px 20px 18px 28px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
#eo-ablauf .eo-trust ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--ab-on-dark); }
#eo-ablauf .eo-trust li { display: inline-flex; align-items: center; gap: 8px; }
#eo-ablauf .eo-trust li::before { content: "✓"; font-weight: 700; color: #7FD38A; }
#eo-ablauf .eo-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 8px; background: #fff; color: var(--ab-bg); text-decoration: none; font-size: 15px; font-weight: 500; transition: background .2s; }
#eo-ablauf .eo-cta:hover { background: var(--ab-sky-2); color: var(--ab-bg); }
#eo-ablauf .eo-cta:focus-visible { outline: 2px solid var(--ab-accent-light); outline-offset: 3px; }
#eo-ablauf .eo-cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Einblenden beim Scrollen */
#eo-ablauf.eo-js .eo-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
#eo-ablauf.eo-js .eo-reveal.is-in { opacity: 1; transform: none; }
#eo-ablauf.eo-js .eo-reveal:nth-child(2) { transition-delay: .12s; }
#eo-ablauf.eo-js .eo-reveal:nth-child(3) { transition-delay: .24s; }

/* Tablet */
@media (max-width: 1024px) {
  #eo-ablauf .eo-cards { grid-template-columns: 1fr 1fr; }
  #eo-ablauf .eo-card:last-child { grid-column: 1 / -1; }
  #eo-ablauf .eo-card:last-child .eo-visual { height: 220px; }
}
/* Mobile */
@media (max-width: 680px) {
  #eo-ablauf .eo-cards { grid-template-columns: 1fr; }
  #eo-ablauf .eo-phasebar { margin-top: 40px; }
  #eo-ablauf .eo-phasechip { padding: 4px 10px 4px 4px; gap: 6px; font-size: 12px; }
  #eo-ablauf .eo-dot { width: 22px; height: 22px; font-size: 11px; }
  #eo-ablauf .eo-dash { margin: 0 4px; min-width: 8px; }
  #eo-ablauf .eo-visual { height: 216px; }
  #eo-ablauf .eo-body { padding: 24px 20px 20px; }
  #eo-ablauf .eo-body h3 { font-size: 24px; }
  #eo-ablauf .eo-trust { padding: 20px; }
  #eo-ablauf .eo-cta { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
  #eo-ablauf .eo-split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #eo-ablauf.eo-js .eo-reveal { opacity: 1; transform: none; transition: none; }
}/* End custom CSS */