/* KSP Praxis-Onepager – Layout-Styles rund um den Funnel. Farben/Fonts über CSS-Variablen anpassbar. */
.ksp-op {
  /* Farbwerte aus dem bestehenden Bildbedarf-Check (spaete.com) übernommen. */
  --op-accent: #31b5ab;
  --op-accent-dark: #1d8a82;
  --op-accent-soft: #ddf1ee;
  --op-text: #243746;
  --op-muted: #6b7887;
  --op-bg-soft: #f4f6f7;
  --op-bg-dark: #1e3340;
  --op-line: #e6eaed;
  --op-max: 1180px;
  color: var(--op-text);
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.ksp-op *, .ksp-op *::before, .ksp-op *::after { box-sizing: border-box; }
.ksp-op img { max-width: 100%; display: block; }

.ksp-op__section { max-width: var(--op-max); margin: 0 auto; padding: clamp(56px, 8vw, 110px) 24px; }
.ksp-op__section--soft { background: var(--op-bg-soft); max-width: none; }
.ksp-op__section--soft > * { max-width: var(--op-max); margin-left: auto; margin-right: auto; }
.ksp-op__section--dark { background: var(--op-bg-dark); color: #f4f2ee; max-width: none; }
.ksp-op__section--dark .ksp-op__lead { color: #cfd6d2; }

.ksp-op__h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.08; margin: 0 0 18px; letter-spacing: -0.02em; }
.ksp-op__h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.13; margin: 0 0 16px; text-align: center; letter-spacing: -0.01em; }
.ksp-op__pill { display: inline-block; background: var(--op-accent-soft); color: var(--op-accent-dark); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin: 0 0 16px; }
.ksp-op__section--dark .ksp-op__pill { background: rgba(255, 255, 255, 0.12); color: #a9e5de; }
.ksp-op__section--soft .ksp-op__split .ksp-op__h2,
.ksp-op__lead--narrow { text-align: left; }
.ksp-op__lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--op-muted); margin: 0 0 8px; max-width: 640px; }
.ksp-op__center { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.ksp-op__center .ksp-op__lead { margin-left: auto; margin-right: auto; }
.ksp-op__lead--narrow { max-width: 620px; margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 36px; }
.ksp-op__sub { color: var(--op-muted); margin: 0 0 28px; font-size: 1.02rem; }

.ksp-op__hero { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 48px; max-width: var(--op-max); margin: 0 auto; padding: clamp(40px, 7vw, 90px) 24px clamp(56px, 8vw, 90px); }
.ksp-op__hero-media { border-radius: 20px; overflow: hidden; aspect-ratio: 4/5; }
.ksp-op__hero-img { width: 100%; height: 100%; object-fit: cover; }
.ksp-op__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.ksp-op__actions--center { justify-content: center; }

.ksp-op__btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; text-decoration: none; border-radius: 999px; padding: 15px 28px; transition: background 0.15s, color 0.15s, border-color 0.15s; min-height: 48px; }
.ksp-op__btn--primary { background: var(--op-accent); color: #fff; }
.ksp-op__btn--primary:hover { background: var(--op-accent-dark); }
.ksp-op__btn--ghost { border: 2px solid var(--op-line); color: var(--op-text); }
.ksp-op__btn--ghost:hover { border-color: var(--op-text); }
.ksp-op__btn--light { background: #fff; color: var(--op-accent-dark); }
.ksp-op__btn--light:hover { background: #e9e6df; }
.ksp-op__btn--ghost-light { border: 2px solid rgba(255,255,255,0.35); color: #f4f2ee; }
.ksp-op__btn--ghost-light:hover { border-color: #fff; }

.ksp-op__cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.ksp-op__benefit-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; margin-bottom: 18px; }
.ksp-op__benefit h3 { font-size: 1.2rem; margin: 0 0 8px; }
.ksp-op__benefit p { color: var(--op-muted); margin: 0; line-height: 1.55; }

.ksp-op__split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ksp-op__split--reverse { grid-template-columns: 1fr 1fr; }
.ksp-op__split--reverse > div:first-child { order: 2; }
.ksp-op__split--reverse > .ksp-op__split-media { order: 1; }
.ksp-op__split p { color: var(--op-muted); line-height: 1.6; margin: 0 0 20px; }
.ksp-op__split-media { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; }
.ksp-op__split-img { width: 100%; height: 100%; object-fit: cover; }
.ksp-op__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; background: #e4e1dc; color: #7a756c; border-radius: 18px; padding: 24px; }
.ksp-op__checks, .ksp-op__facts { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ksp-op__checks li, .ksp-op__facts li { padding-left: 28px; position: relative; }
.ksp-op__checks li::before, .ksp-op__facts li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--op-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M10 0a10 10 0 100 20 10 10 0 000-20zm-1.6 14.4L4 10l1.4-1.4 3 3 6.2-6.2L16 6.8z'/%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 20 20'%3E%3Cpath fill='%23000' d='M10 0a10 10 0 100 20 10 10 0 000-20zm-1.6 14.4L4 10l1.4-1.4 3 3 6.2-6.2L16 6.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ksp-op__link { color: var(--op-accent-dark); font-weight: 600; text-decoration: underline; }

.ksp-op__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 14px; }
.ksp-op__tile { margin: 0; border-radius: 12px; overflow: hidden; background: #eee; }
.ksp-op__tile-img { width: 100%; height: 100%; object-fit: cover; }
.ksp-op__tile--portrait { grid-row: span 2; }

.ksp-op__faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.ksp-op__faq-item { border: 1px solid var(--op-line); border-radius: 12px; padding: 4px 20px; }
.ksp-op__faq-item summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ksp-op__faq-item summary::-webkit-details-marker { display: none; }
.ksp-op__faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--op-accent); flex: none; }
.ksp-op__faq-item[open] summary::after { content: "–"; }
.ksp-op__faq-a { padding: 0 0 18px; color: var(--op-muted); line-height: 1.6; }
.ksp-op__faq-a p { margin: 0 0 10px; }

.ksp-op__section--dark .ksp-op__h2 { color: #fff; }
.ksp-op__direct { max-width: var(--op-max); margin: 40px auto 0; }
.ksp-op__direct .ksp-pf { background: #fff; }

/* Abschlussblock: ein Ziel, ruhig gesetzt. */
.ksp-op__cta { max-width: 680px; margin: 0 auto; text-align: center; }
.ksp-op__cta .ksp-op__lead { margin: 0 auto 32px; }
.ksp-op__cta .ksp-op__actions { margin-bottom: 26px; }
.ksp-op__cta .ksp-op__btn--light { padding: 17px 34px; font-size: 1.05rem; }
.ksp-op__cta-direct { margin: 0; font-size: 0.95rem; color: #b9c6cd; }
.ksp-op__cta-direct a, .ksp-op__cta-direct a:link, .ksp-op__cta-direct a:visited { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ksp-op__cta-direct a:hover { color: var(--op-accent); }

@media (max-width: 900px) {
  .ksp-op__hero { grid-template-columns: 1fr; }
  .ksp-op__hero-media { order: -1; aspect-ratio: 4/3; }
  .ksp-op__cols3 { grid-template-columns: 1fr; gap: 28px; }
  .ksp-op__split, .ksp-op__split--reverse { grid-template-columns: 1fr; }
  .ksp-op__split--reverse > div:first-child { order: 1; }
  .ksp-op__split--reverse > .ksp-op__split-media { order: 2; }
  .ksp-op__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .ksp-op__tile--portrait { grid-row: span 2; }
}

/* --- Theme-Armor: Hello Elementor/Theme-Styles überschreiben Buttons und Links.
       Bewusst eng auf .ksp-op begrenzt, damit nichts außerhalb des Onepagers betroffen ist. --- */
.ksp-op a.ksp-op__btn { text-decoration: none; box-shadow: none; }
.ksp-op a.ksp-op__btn--primary,
.ksp-op a.ksp-op__btn--primary:link,
.ksp-op a.ksp-op__btn--primary:visited { background: var(--op-accent); background-image: none; color: #fff; border: 0; }
.ksp-op a.ksp-op__btn--primary:hover,
.ksp-op a.ksp-op__btn--primary:focus { background: var(--op-accent-dark); color: #fff; }
.ksp-op a.ksp-op__btn--ghost,
.ksp-op a.ksp-op__btn--ghost:link,
.ksp-op a.ksp-op__btn--ghost:visited { background: transparent; background-image: none; color: var(--op-text); border: 2px solid var(--op-line); }
.ksp-op a.ksp-op__btn--ghost:hover { border-color: var(--op-text); color: var(--op-text); }
.ksp-op a.ksp-op__btn--light,
.ksp-op a.ksp-op__btn--light:link,
.ksp-op a.ksp-op__btn--light:visited { background: #fff; background-image: none; color: var(--op-accent-dark); border: 0; }
.ksp-op a.ksp-op__btn--ghost-light,
.ksp-op a.ksp-op__btn--ghost-light:link,
.ksp-op a.ksp-op__btn--ghost-light:visited { background: transparent; background-image: none; color: #f4f2ee; border: 2px solid rgba(255,255,255,0.35); }
.ksp-op a.ksp-op__link, .ksp-op a.ksp-op__link:link, .ksp-op a.ksp-op__link:visited { color: var(--op-accent-dark); }
.ksp-op h1, .ksp-op h2, .ksp-op h3, .ksp-op h4 { color: inherit; }
.ksp-op__section--dark, .ksp-op__section--dark h2, .ksp-op__section--dark h3 { color: #f4f2ee; }
/* Hero-Bild nicht ins Endlose wachsen lassen */
.ksp-op__hero-media { max-height: 560px; }
/* Ohne Portrait keine leere zweite Spalte. */
.ksp-op__split--single { grid-template-columns: 1fr; max-width: 760px; }