/* Enfold begrenzt .container auf max-width:85% -- fuer ein datendichtes Tool (Karte, Listen,
   Cards) verschenkt das auf Mobile ca. 30% der Bildschirmbreite. Kompletter Planer bricht
   deshalb aus dem Theme-Container aus; .sop-results/.sop-block regeln ihre eigene Breite/
   Zentrierung selbst darunter. */
.sop-planner { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.sop-planner { --sop-accent: #00adff; --sop-accent-d: #0090d6; --sop-ink: #111; --sop-muted: #5b616b; --sop-line: #e6e8eb; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--sop-ink); background: #fff; }
.sop-planner * { box-sizing: border-box; }
.sop-planner a { text-decoration: none; }

/* ---------- Dark Mode (Site-Toggle html[data-site-theme="dark"]) ----------
   V2 (23.09., Nutzer-Korrektur): V1 liess das Hero-Suchformular und alle Inputs bewusst
   hell ("Kontrast-Karte") -- Nutzer wollte das nicht, wirkte wie ein Fremdkoerper ("immer
   noch extrem weiss"). Ausserdem waren Format-/Staedte-/Scenario-Karten nur mit Border
   ohne eigene Flaeche unterwegs, was auf dunklem Grund wie ein grelles weisses Rechteck
   wirkte statt einer dezenten Card. Jetzt: konsequent dunkel, Definition kommt aus einer
   leicht helleren Oberflaechenfarbe (Elevation) statt aus harten Bordern -- clean/agency
   statt "Formular-Kaestchen ueberall". */
html[data-site-theme="dark"] .sop-planner {
  --sop-ink: #eef1f4;
  --sop-muted: #9aa1ab;
  --sop-line: rgba(255,255,255,.08);
  --sop-accent-bg: #132330;
  background: #0e1013;
}
html[data-site-theme="dark"] .sop-planner :is(.sop-suggestions, .sop-chip, .sop-type, .sop-list, .sop-card, .sop-zip, .sop-modal__box, .sop-mobile-toggle, .sop-plan-cta, .sop-budgethint, .sop-quickcity, .sop-sticky-cta, .sop-modal__foot, .sop-format, .sop-scenario, .sop-cities__grid a, .sop-hero__search) {
  background: #191c20;
  border-color: rgba(255,255,255,.08);
}
/* Zusaetzliche hartkodierte helle Flaechen, die im ersten Durchgang durchgerutscht sind:
   FAQ-Themen-Pillen und die Werbeform-Fakten-Kaestchen (STANDORTE/PREIS/...) hatten eigene
   helle Hintergruende -- mit der neuen hellen --sop-ink-Textfarbe wurde das sonst hell-auf-
   hell und quasi unlesbar. */
html[data-site-theme="dark"] .sop-planner .sop-format__facts div { background: #0e1013; }
html[data-site-theme="dark"] .sop-planner .sop-deeplinks a { background: #142530; border-color: #1c3a4d; }
html[data-site-theme="dark"] .sop-planner .sop-form__selection { background: #142530; border-color: #1c3a4d; color: #cfe8f7 !important; }
html[data-site-theme="dark"] .sop-planner .sop-form__selection :is(strong, li) { color: #eef1f4 !important; }
html[data-site-theme="dark"] .sop-planner .sop-card--sel { background: #10202b; border-color: var(--sop-accent); }
html[data-site-theme="dark"] .sop-planner .sop-type--active { background: var(--sop-accent); border-color: var(--sop-accent); }
html[data-site-theme="dark"] .sop-planner .sop-type--active :is(.sop-type__name, .sop-type__meta) { color: #fff !important; }
html[data-site-theme="dark"] .sop-planner .sop-mobile-toggle__btn { color: #c7cbd1; }
html[data-site-theme="dark"] .sop-planner .sop-mobile-toggle__btn--active { background: var(--sop-accent); color: #fff !important; }
html[data-site-theme="dark"] .sop-planner :is(.sop-card__visual, .sop-format__visual) { background: var(--sop-accent-bg); }
html[data-site-theme="dark"] .sop-planner :is(.sop-card__visual--GD, .sop-card__visual--VD, .sop-format__visual--GD, .sop-format__visual--VD) { background: #1c2040; color: #93a2ff; }
html[data-site-theme="dark"] .sop-planner :is(.sop-card__visual--GZ, .sop-format__visual--GZ) { background: #241c3d; color: #c0a8ff; }
html[data-site-theme="dark"] .sop-planner :is(.sop-card__address, .sop-card__price, .sop-zip strong, .sop-cities__grid strong, .sop-scenario__budget) { color: var(--sop-ink) !important; }
html[data-site-theme="dark"] .sop-planner :is(.sop-modal__box > p, .sop-modal__box label, .sop-faq details p, .sop-scenario p, .sop-plan-cta p, .sop-budgethint) { color: #c7cbd1 !important; }
html[data-site-theme="dark"] .sop-planner .sop-modal__box h3 { color: var(--sop-ink) !important; }
html[data-site-theme="dark"] .sop-planner .sop-chip { color: #dfe3e8 !important; }
html[data-site-theme="dark"] .sop-planner :is(.sop-deeplinks a, .sop-faq__more, .sop-link) { color: #6fd0ff !important; }
html[data-site-theme="dark"] .sop-planner .sop-crumbs a { color: #c7cbd1 !important; }
html[data-site-theme="dark"] .sop-planner .sop-crumbs span { color: #7a808a !important; }
html[data-site-theme="dark"] .sop-planner .sop-selbar { background: #191c20; box-shadow: 0 -10px 30px -10px rgba(0,0,0,.6); }
html[data-site-theme="dark"] .sop-planner .sop-selbar :is(strong, span, div) { color: #fff !important; }
/* Hero-Suchformular + alle Inputs/Selects/Vorschlagslisten konsequent dunkel (siehe Kopf-
   kommentar) -- Flaeche wie die uebrigen Cards (#191c20), Text hell, Rahmen dezent. */
html[data-site-theme="dark"] .sop-planner .sop-hero__search { box-shadow: 0 24px 48px -16px rgba(0,0,0,.55); }
html[data-site-theme="dark"] .sop-planner .sop-hero__search .sop-field label { color: #9aa1ab !important; }
html[data-site-theme="dark"] #top .sop-planner :is(input, select):not(.sop-final input):not(.sop-final select) { background: #21252a !important; color: #eef1f4 !important; border-color: rgba(255,255,255,.14) !important; }
html[data-site-theme="dark"] .sop-planner .sop-suggestions { background: #21252a; border-color: rgba(255,255,255,.14); box-shadow: 0 12px 28px -8px rgba(0,0,0,.5); }
html[data-site-theme="dark"] .sop-planner .sop-suggestions li:hover { background: #2a2f35; }
html[data-site-theme="dark"] .sop-planner .sop-sg__main { color: var(--sop-ink) !important; }
html[data-site-theme="dark"] .sop-planner .sop-info { background: #2a2f35; color: #c7cbd1 !important; }
html[data-site-theme="dark"] .leaflet-popup-content-wrapper, html[data-site-theme="dark"] .leaflet-popup-tip { background: #191c20 !important; box-shadow: 0 6px 20px -6px rgba(0,0,0,.6) !important; }
html[data-site-theme="dark"] .leaflet-popup-content :is(div, span) { color: #c7cbd1 !important; }
html[data-site-theme="dark"] .leaflet-popup-content .sop-card__type { color: #4dc8ff !important; }


/* Enfold setzt h1-h3 global sehr gross mit engem Letter-Spacing -- im Planer eigene Typo-Skala. */
.sop-planner.sop-planner h1, .sop-planner.sop-planner h2, .sop-planner.sop-planner h3 { letter-spacing: -0.01em !important; text-transform: none !important; }
.sop-planner.sop-planner .sop-hero h1 { font-size: clamp(28px, 4.4vw, 44px) !important; line-height: 1.15 !important; }
.sop-planner.sop-planner .sop-hero h2 { font-size: clamp(28px, 4.4vw, 44px) !important; line-height: 1.15 !important; }
.sop-planner.sop-planner h2 { font-size: clamp(22px, 3vw, 30px) !important; line-height: 1.2 !important; }
.sop-planner.sop-planner .sop-results__head h2 { font-size: clamp(19px, 2.2vw, 24px) !important; }
.sop-planner.sop-planner .sop-proof h2 { font-size: clamp(19px, 2.4vw, 24px) !important; }
.sop-planner.sop-planner h3 { font-size: 18px !important; line-height: 1.25 !important; }
.sop-planner.sop-planner .sop-plan-cta h3, .sop-planner.sop-planner .sop-modal__box h3 { font-size: 17px !important; }
.sop-planner.sop-planner .sop-faq summary { font-size: 16px !important; }

/* Dropdown-Optionen: Browser rendern die Liste hell, Enfold/Dark-Form vererbt helle Schrift -> unlesbar. */
.sop-planner select option, .sop-planner .sop-final select option { background: #fff !important; color: #111 !important; }

/* Hover-Erklaerungen */
.sop-tip { position: relative; }
.sop-tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 260px; background: #111; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: 0; text-align: left; padding: 8px 10px; border-radius: 8px; box-shadow: 0 8px 20px -6px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 50; white-space: normal; }
.sop-tip:hover::after, .sop-tip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.sop-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; background: #e8ecf0; color: #555 !important; font-size: 10px; font-weight: 800; cursor: help; vertical-align: 1px; text-transform: none; }
.sop-info.sop-tip::after { left: 0; transform: translateY(4px); }
.sop-info.sop-tip:hover::after { transform: translateY(0); }
/* ---------- Hero ---------- */
.sop-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: radial-gradient(circle at 15% 0%, rgba(0,173,255,.25), transparent 55%), linear-gradient(135deg, #0b0d10, #17191c); color: #fff !important; padding: 48px 20px 40px; overflow: visible; }
.sop-hero__inner { position: relative; max-width: 980px; margin: 0 auto; text-align: center; }
.sop-crumbs { font-size: 13px; color: #9aa1ab !important; margin-bottom: 14px; }
.sop-crumbs a { color: #c7cbd1 !important; }
.sop-crumbs a:hover { color: #fff !important; }
.sop-crumbs span { color: #9aa1ab !important; }
.sop-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; color: #4dc8ff !important; margin: 0 0 10px; }
.sop-hero h1 { font-size: clamp(28px, 4.6vw, 44px); font-weight: 700; line-height: 1.15; margin: 0 0 12px; color: #fff !important; }
.sop-hero h2 { font-size: clamp(28px, 4.6vw, 44px); font-weight: 700; line-height: 1.15; margin: 0 0 12px; color: #fff !important; }
.sop-hero__sub { font-size: 17px; color: #c7cbd1 !important; max-width: 680px; margin: 0 auto 26px; line-height: 1.5; }

.sop-hero__search { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: #fff; border-radius: 16px; padding: 18px; color: #111; box-shadow: 0 24px 48px -16px rgba(0,10,30,.45); position: relative; z-index: 5; }
.sop-field { display: flex; flex-direction: column; gap: 6px; text-align: left; position: relative; }
.sop-field--grow { flex: 1 1 280px; }
.sop-field label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #444 !important; }
.sop-planner .sop-field input, .sop-planner .sop-select { padding: 12px 14px !important; margin: 0 !important; border: 1.5px solid #e2e4e8 !important; border-radius: 10px !important; font-size: 15px !important; line-height: 1.3 !important; height: auto !important; background: #fff !important; color: #111 !important; transition: border-color .15s; }
.sop-field input { min-width: 220px; }
.sop-select { cursor: pointer; min-width: 140px; }
.sop-planner .sop-select--sm { padding: 7px 10px !important; font-size: 13px !important; min-width: 0; }
.sop-planner .sop-field input:focus, .sop-planner .sop-select:focus { outline: none; border-color: var(--sop-accent) !important; }
.sop-suggestions { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e2e4e8; border-radius: 10px; list-style: none; margin: 6px 0 0; padding: 4px; z-index: 30; max-height: 240px; overflow-y: auto; text-align: left; box-shadow: 0 12px 28px -8px rgba(0,10,30,.18); }
.sop-suggestions:empty { display: none; }
.sop-planner .sop-suggestions li { list-style: none !important; margin: 0 !important; padding: 9px 12px !important; cursor: pointer; border-radius: 7px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; line-height: 1.35 !important; }
.sop-planner .sop-suggestions li::before, .sop-planner .sop-suggestions li::marker { content: none !important; }
.sop-planner .sop-sg__main { font-size: 14px !important; font-weight: 600; color: #111 !important; }
.sop-planner .sop-sg__sub { grid-column: 1; font-size: 12px !important; color: #7a808a !important; }
.sop-planner .sop-sg__kind { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 10px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #0090d6 !important; background: #eef8ff; border-radius: 999px; padding: 3px 8px; }
.sop-planner .sop-suggestions li:hover { background: #f3f8fc; }
.sop-trust { margin: 0 0 18px; color: #aeb4bd !important; font-size: 14px; }
.sop-trust strong { color: #fff !important; }

/* ---------- Buttons / Chips ---------- */
.sop-chip { display: inline-block; border: 1.5px solid #e2e4e8; background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: #333 !important; cursor: pointer; transition: border-color .15s; }
.sop-chip:hover { border-color: var(--sop-accent); }
.sop-cta { background: var(--sop-accent); color: #fff !important; border: none; border-radius: 999px; padding: 14px 24px; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; box-shadow: 0 10px 24px -8px rgba(0,173,255,.55); }
.sop-cta:hover { background: var(--sop-accent-d); transform: translateY(-1px); }
.sop-cta:disabled { opacity: .6; cursor: wait; }
.sop-cta--outline { background: transparent; border: 1.5px solid var(--sop-accent); color: var(--sop-accent-d) !important; box-shadow: none; }
.sop-cta--outline:hover { background: #eef8ff; transform: none; }
.sop-link { background: none; border: none; padding: 0; color: var(--sop-accent-d) !important; font-weight: 700; font-size: 14px; cursor: pointer; }
.sop-link:hover { text-decoration: underline; }
.sop-link--light { color: #c7cbd1 !important; font-weight: 600; }
.sop-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sop-accent-d); }

/* ---------- Ergebnisse ---------- */
.sop-results { max-width: 1240px; margin: 0 auto; padding: 36px 20px 24px; }
.sop-results__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.sop-results__head h2 { font-size: clamp(20px, 2.6vw, 26px); margin: 0; line-height: 1.25; }
.sop-results__count { color: var(--sop-muted); margin: 4px 0 0; font-size: 14px; }
.sop-inline { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #444; }

.sop-typebar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sop-type { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1.5px solid var(--sop-line); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.sop-type:hover { border-color: var(--sop-accent); }
.sop-type:disabled { opacity: .45; cursor: default; }
.sop-type__name { font-size: 14px; font-weight: 700; color: #111; }
.sop-type__meta { font-size: 12px; color: #7a808a; min-height: 15px; }
.sop-type--active { background: var(--sop-accent); border-color: var(--sop-accent); }
.sop-type--active .sop-type__name, .sop-type--active .sop-type__meta { color: #fff !important; }

.sop-budgethint { background: #f6faff; border: 1px solid #dcefff; border-radius: 12px; padding: 12px 16px; font-size: 14px; color: #333; margin-bottom: 12px; }
.sop-budgethint .sop-link { margin-left: 6px; }

.sop-mobile-toggle { display: none; gap: 4px; background: #f1f3f5; border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.sop-mobile-toggle__btn { flex: 1; border: none; background: transparent; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; color: #444; }
.sop-mobile-toggle__btn--active { background: var(--sop-accent); color: #fff !important; }

.sop-split { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 14px; height: 600px; }
.sop-list { overflow-y: auto; border: 1px solid var(--sop-line); border-radius: 14px; padding: 8px; background: #fbfbfc; }
.sop-list__empty { padding: 24px 14px; color: var(--sop-muted); font-size: 14px; }
.sop-list__empty p { margin: 0 0 10px; }
.sop-quickcities { display: flex; flex-wrap: wrap; gap: 6px; }
.sop-list__more { font-size: 13px; color: var(--sop-muted); padding: 10px 6px; margin: 0; }
.sop-map-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--sop-line); }
.sop-map { height: 100%; min-height: 400px; }
.sop-map .leaflet-tile-pane { filter: grayscale(0.6) brightness(1.06) contrast(0.92) saturate(0.8); }

.sop-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid #eceef0; border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sop-card:hover { border-color: #bfe6ff; box-shadow: 0 6px 16px -10px rgba(0,20,50,.25); }
.sop-card--sel { border-color: var(--sop-accent); background: #f3fbff; }
.sop-card__visual { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--sop-accent-bg, #eef7ff); color: var(--sop-accent-d); }
.sop-card__visual .sop-ico { width: 24px; height: 24px; }
.sop-card__visual--GD, .sop-card__visual--VD { background: #eef2ff; color: #4338ca; }
.sop-card__visual--GZ { background: #f3f0ff; color: #6d28d9; }
.sop-card__main { min-width: 0; flex: 1; }
.sop-card__type { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sop-accent-d); }
.sop-card__address { margin: 3px 0 2px; font-size: 14px; font-weight: 600; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-card__meta { font-size: 12px; color: #7a808a; }
.sop-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.sop-card__price { font-size: 16px; font-weight: 700; color: #111; }
.sop-card__runtime { font-size: 11px; color: #7a808a; }
.sop-btn-sel { margin-top: 4px; border: 1.5px solid var(--sop-accent); background: #fff; color: var(--sop-accent-d) !important; border-radius: 999px; height: 30px; padding: 0 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sop-btn-sel--on { background: var(--sop-accent); color: #fff !important; }

.sop-pin span { display: block; width: 14px; height: 14px; margin: 2px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); background: #00adff; }
.sop-pin--VI span { background: #7b61ff; }
.sop-pin--GZ span { background: #ff8a00; }
.sop-pin--GDVD span { background: #00b37e; }
.sop-pin--sel span { width: 18px; height: 18px; margin: 0; background: #111 !important; border-color: #00adff; }
.sop-pop { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.sop-pop__addr { font-weight: 700; font-size: 14px; margin: 4px 0 2px; color: #111; }
.sop-pop__city { font-size: 12px; color: #7a808a; }
.sop-pop__price { font-size: 16px; font-weight: 700; margin: 8px 0; color: #111; }
.sop-pop .sop-btn-sel { width: 100%; height: 34px; }

.sop-plan-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; background: #f6faff; border: 1px solid #e3f1fc; border-radius: 14px; padding: 18px 22px; margin: 18px 0 0; }
.sop-plan-cta h3 { margin: 0 0 2px; font-size: 17px; }
.sop-plan-cta p { margin: 0; color: #556; font-size: 14px; }

/* ---------- Inhaltsbloecke ---------- */
.sop-block { max-width: 1140px; margin: 0 auto; padding: 64px 24px; }
.sop-block h2 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 700; margin: 0 0 6px; line-height: 1.2; }
.sop-block__sub { color: var(--sop-muted); margin: 0 0 30px; font-size: 15px; }

.sop-zips__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sop-zip { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--sop-line); background: #fff; border-radius: 12px; padding: 14px 16px; cursor: pointer; }
.sop-zip:hover { border-color: var(--sop-accent); }
.sop-zip strong { font-size: 16px; }
.sop-zip span { font-size: 12px; color: #7a808a; }

.sop-formats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.sop-format { border: 1px solid var(--sop-line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; }
.sop-format__visual { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: #eef7ff; color: var(--sop-accent-d); }
.sop-format__visual .sop-ico { width: 26px; height: 26px; }
.sop-format__visual--GD, .sop-format__visual--VD { background: #eef2ff; color: #4338ca; }
.sop-format__visual--GZ { background: #f3f0ff; color: #6d28d9; }
.sop-format h3 { font-size: 18px; margin: 0 0 6px; }
.sop-format__text { font-size: 14px; color: #444; margin: 0 0 12px; line-height: 1.5; }
.sop-format__facts { margin: 0 0 12px; display: grid; gap: 4px; }
.sop-format__facts div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px dashed #eceef0; padding-bottom: 4px; }
.sop-format__facts dt { color: #7a808a; font-weight: 600; }
.sop-format__facts dd { margin: 0; font-weight: 700; text-align: right; }
.sop-format__use { font-size: 13px; color: #555; margin: 0 0 12px; flex: 1; }
.sop-format .sop-link { align-self: flex-start; }

.sop-scenarios__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.sop-scenario { border: 1px solid var(--sop-line); border-radius: 16px; padding: 26px; }
.sop-scenario h3 { font-size: 18px; margin: 4px 0 6px; }
.sop-scenario p { margin: 0; font-size: 14px; color: #555; line-height: 1.5; }
.sop-scenario .sop-scenario__budget { font-size: 24px; font-weight: 800; color: #111; margin-top: 12px; }

.sop-steps__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: sopstep; }
.sop-steps__list li { counter-increment: sopstep; border-top: 2px solid var(--sop-accent); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #555; }
.sop-steps__list li::before { content: counter(sopstep, decimal-leading-zero); font-size: 12px; font-weight: 800; color: var(--sop-accent-d); }
.sop-steps__list strong { font-size: 16px; color: #111; }

.sop-proof { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #0f1114; padding: 44px 20px; }
.sop-proof__inner { max-width: 1140px; margin: 0 auto; }
.sop-proof h2 { color: #fff !important; font-size: clamp(20px, 2.6vw, 26px); text-align: center; margin: 0 0 18px; }
.sop-case { display: grid; gap: 4px; max-width: 640px; margin: 24px auto 0; background: #1a1d22; border: 1px solid #2a2e35; border-radius: 14px; padding: 18px 22px; transition: border-color .15s; }
.sop-case:hover { border-color: var(--sop-accent); }
.sop-case .sop-tag { color: #4dc8ff !important; }
.sop-case strong { color: #fff !important; font-size: 18px; }
.sop-case span { color: #c7cbd1 !important; font-size: 14px; line-height: 1.5; }
.sop-case em { color: #4dc8ff !important; font-style: normal; font-weight: 700; font-size: 14px; }

.sop-cities__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 22px; }
.sop-cities__grid a { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--sop-line); border-radius: 12px; padding: 16px 18px; transition: border-color .15s, background .15s; }
.sop-cities__grid a:hover { border-color: var(--sop-accent); }
.sop-cities__grid strong { font-size: 14px; color: #111; }
.sop-cities__grid span { font-size: 12px; color: #7a808a; }

.sop-faq details { border-bottom: 1px solid var(--sop-line); padding: 14px 0; }
.sop-faq summary { font-size: 16px; font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 28px; }
.sop-faq summary::-webkit-details-marker { display: none; }
.sop-faq summary::after { content: '+'; position: absolute; right: 4px; top: -2px; font-size: 22px; color: var(--sop-accent-d); }
.sop-faq details[open] summary::after { content: '–'; }
.sop-faq details p { margin: 10px 0 0; color: #444; font-size: 15px; line-height: 1.6; }

/* ---------- Anfrage ---------- */
.sop-final { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: linear-gradient(135deg, #0b0d10, #17191c); color: #fff !important; padding: 56px 20px; text-align: center; }
.sop-final h2 { font-size: clamp(24px, 3.6vw, 32px); font-weight: 700; margin: 0 0 6px; color: #fff !important; }
.sop-final__sub { color: #aeb4bd !important; margin: 0 0 26px; }
.sop-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.sop-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.sop-form input, .sop-form select { padding: 11px 13px; border: 1.5px solid #e2e4e8; border-radius: 9px; font-size: 14px; font-weight: 400; transition: border-color .15s; }
.sop-form input:focus, .sop-form select:focus { outline: none; border-color: var(--sop-accent); }
.sop-form__row { display: flex; gap: 12px; flex-wrap: wrap; }
.sop-form__row label { flex: 1 1 200px; }
.sop-form--wide { max-width: 620px; margin: 0 auto; }
.sop-form .sop-cta { align-self: flex-start; }

/* ---------- 2-Step-Formular ---------- */
.sop-step-indicator { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sop-step-dot { width: 24px; height: 24px; border-radius: 50%; background: #e2e4e8; color: #7a808a; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.sop-step-dot--active { background: var(--sop-accent); color: #fff !important; }
.sop-step-line { flex: 1; max-width: 40px; height: 2px; background: #e2e4e8; }
.sop-final .sop-step-dot { background: #2c3036; color: #8a919c; }
.sop-final .sop-step-line { background: #2c3036; }
.sop-step { display: none; flex-direction: column; gap: 12px; }
.sop-step--active { display: flex; }
.sop-step__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sop-step__actions .sop-cta { align-self: auto; }
.sop-honeypot { position: absolute; left: -9999px; }
.sop-form__status { font-size: 13px; min-height: 18px; margin: 0; }
.sop-form__selection { background: #f3fbff; border: 1px solid #cdeaff; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #222; }
.sop-form__selection ul { margin: 6px 0 0; padding-left: 18px; }
.sop-final .sop-form input, .sop-final .sop-form select { background: #1c1f24; border-color: #2c3036; color: #fff !important; }
.sop-final .sop-form label { color: #d7dae0 !important; }
.sop-final .sop-form__status { color: #d7dae0 !important; }
.sop-final .sop-form__selection { background: #1c1f24; border-color: #2c3036; }
.sop-final .sop-form__selection :is(strong, li) { color: #d7dae0 !important; }

/* ---------- Auswahlleiste ---------- */
.sop-selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #111; box-shadow: 0 -10px 30px -10px rgba(0,0,0,.4); }
.sop-selbar[hidden] { display: none; }
.sop-selbar__inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sop-selbar__info { color: #fff; font-size: 14px; }
.sop-selbar .sop-selbar__info strong { color: #fff !important; }
.sop-selbar .sop-selbar__info span { color: #c7cbd1 !important; }
.sop-selbar__actions { display: flex; align-items: center; gap: 14px; }
.sop-selbar .sop-cta { padding: 11px 20px; font-size: 14px; }
body.sop-has-selbar { padding-bottom: 72px; }
body.sop-has-selbar #scroll-top-link { bottom: 84px !important; }

/* ---------- Modal ---------- */
.sop-modal { position: fixed; inset: 0; background: rgba(10,15,25,.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.sop-modal[hidden] { display: none; }
.sop-modal__box { background: #fff; border-radius: 16px; padding: 26px; max-width: 480px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; }
.sop-modal__box h3 { margin: 0 0 4px; color: #111 !important; }
.sop-modal__box > p { margin: 0 0 14px; color: #555 !important; font-size: 14px; }
.sop-modal__box label { color: #333 !important; }
.sop-modal__close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; cursor: pointer; color: #888; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .sop-typebar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sop-mobile-toggle { display: flex; }
  .sop-split { grid-template-columns: 1fr; height: auto; }
  .sop-split[data-pane="list"] .sop-map-wrap { display: none; }
  .sop-split[data-pane="map"] .sop-list { display: none; }
  .sop-list { max-height: 70vh; }
  .sop-map { height: 65vh; }
}
@media (max-width: 720px) {
  /* Hero ca. 25-30% niedriger: weniger Padding, kleinere Headline/Subline, engere Abstaende. */
  .sop-hero { padding: 16px 16px 16px; }
  .sop-crumbs { margin-bottom: 6px; font-size: 12px; }
  .sop-eyebrow { font-size: 10px; margin-bottom: 4px; }
  .sop-planner.sop-planner .sop-hero h1 { font-size: 21px !important; line-height: 1.2 !important; margin-bottom: 6px; }
  .sop-planner.sop-planner .sop-hero h2 { font-size: 21px !important; line-height: 1.2 !important; margin-bottom: 6px; }
  .sop-hero__sub { font-size: 13px; line-height: 1.4; margin: 0 auto 10px; }
  .sop-trust { font-size: 11px; margin: 0 0 10px; line-height: 1.4; }

  /* Suchmodul kompakter: Ort volle Breite oben, Umkreis+Budget als 2er-Reihe, Button volle Breite. */
  .sop-hero__search { flex-direction: row; flex-wrap: wrap; align-items: stretch; padding: 12px; gap: 8px; }
  .sop-field--grow { flex: 1 1 100%; }
  .sop-hero__search .sop-field:not(.sop-field--grow) { flex: 1 1 40%; min-width: 0; }
  .sop-hero__search .sop-field:not(.sop-field--grow) .sop-select { width: 100%; min-width: 0; }
  .sop-hero__search #sop-search-btn { flex: 1 1 100%; }
  .sop-planner .sop-field input, .sop-planner .sop-select { padding: 10px 12px !important; font-size: 14px !important; }
  .sop-field--grow input { min-width: 0; }
  .sop-hero__search .sop-field label { font-size: 10px; letter-spacing: .01em; min-height: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 3px; white-space: nowrap; }
  .sop-hero__search .sop-info { width: 13px; height: 13px; font-size: 9px; margin-left: 0; flex-shrink: 0; }

  /* Weniger "Wand aus Reglern" vor den eigentlichen Ergebnissen: Kopf, Filterleiste und
     Budget-Hinweis deutlich kompakter, damit nach dem Auto-Scroll schneller echter Inhalt
     (Karten/Karte) sichtbar ist. */
  .sop-results { padding: 14px 16px 20px; }
  .sop-results__head { align-items: flex-start; margin-bottom: 10px; }
  .sop-results__count { font-size: 13px; }
  .sop-selbar__inner { flex-wrap: nowrap; gap: 8px; }
  .sop-selbar #sop-selbar-sum, .sop-selbar #sop-selbar-clear { display: none; }
  .sop-selbar .sop-cta { padding: 10px 16px; font-size: 13px; }
  .sop-typebar { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; margin-bottom: 8px; gap: 6px; }
  .sop-type { flex: 0 0 auto; min-width: 0; scroll-snap-align: start; flex-direction: row; align-items: center; gap: 5px; padding: 7px 12px; }
  .sop-type__name { font-size: 12.5px; white-space: nowrap; }
  .sop-type__meta { font-size: 11px; min-height: 0; }
  .sop-type__meta::before { content: '· '; }
  .sop-type__meta:empty { display: none; }
  .sop-budgethint { padding: 10px 12px; font-size: 12.5px; margin-bottom: 8px; }
  .sop-mobile-toggle { margin-bottom: 8px; }
  .sop-plan-cta { flex-direction: column; align-items: flex-start; }
  .sop-block { padding: 40px 20px; }
  .sop-selbar__info { font-size: 13px; }

  /* Werbeformen als horizontales Swipe-Carousel statt 4 gestapelter Textcards. */
  .sop-formats__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .sop-format { flex: 0 0 78vw; scroll-snap-align: start; }

  /* Platz fuer die persistente Sticky-CTA unten reservieren. */
  body.sop-has-sticky-cta { padding-bottom: 64px; }
}

/* ---------- Sticky Mobile CTA (erscheint nach erstem Scroll durch den Planer) ---------- */
.sop-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; background: #fff; border-top: 1px solid #e2e4e8; box-shadow: 0 -8px 24px -12px rgba(0,10,30,.25); padding: 10px 14px; }
.sop-sticky-cta.sop-sticky-cta--visible { display: flex; gap: 8px; align-items: center; }
.sop-sticky-cta__label { flex: 1; font-size: 13px; font-weight: 700; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sop-sticky-cta .sop-cta { padding: 10px 16px; font-size: 13px; white-space: nowrap; }
@media (min-width: 721px) { .sop-sticky-cta { display: none !important; } }
/* Nicht beide Bottom-Bars gleichzeitig: Auswahl-Leiste hat Vorrang vor der generischen Sticky-CTA. */
body.sop-has-selbar .sop-sticky-cta { display: none !important; }
body.sop-has-selbar.sop-has-sticky-cta { padding-bottom: 72px; }
@media (max-width: 720px) {
  body.sop-sticky-cta-visible:not(.sop-has-selbar) #scroll-top-link { bottom: 76px !important; }
}

/* ═══ Feinschliff 23.09.2026: Hero hoeher + Foto-Slideshow, zentrierte Texte, kompakter Leerzustand,
   Stadt-Blasen auf der Karte, Werbeformen im 2er-Raster ═══ */
.sop-planner .sop-hero { padding: 88px 20px 72px; overflow: hidden; }
.sop-hero__bg { position: absolute; inset: 0; z-index: 0; }
.sop-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,14,.78) 0%, rgba(8,10,14,.70) 45%, rgba(8,10,14,.92) 100%), radial-gradient(circle at 15% 0%, rgba(0,173,255,.22), transparent 55%); }
.sop-hero__bgimg { position: absolute; inset: -4%; background-size: cover; background-position: center; opacity: 0; animation: sopHeroFade 24s infinite; will-change: opacity, transform; }
.sop-hero__bgimg--0 { animation-delay: 0s; }
.sop-hero__bgimg--1 { animation-delay: 6s; }
.sop-hero__bgimg--2 { animation-delay: 12s; }
.sop-hero__bgimg--3 { animation-delay: 18s; }
@keyframes sopHeroFade {
  0% { opacity: 0; transform: scale(1); }
  5% { opacity: 1; }
  25% { opacity: 1; }
  32% { opacity: 0; transform: scale(1.07); }
  100% { opacity: 0; transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .sop-hero__bgimg { animation: none; }
  .sop-hero__bgimg--0 { opacity: 1; }
}
.sop-planner .sop-hero__inner { z-index: 1; }
.sop-planner .sop-hero .sop-hero__sub, .sop-planner .sop-hero .sop-trust, .sop-planner .sop-hero .sop-eyebrow, .sop-planner .sop-hero .sop-crumbs { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
.sop-planner .sop-hero .sop-hero__sub { max-width: 700px; margin-bottom: 18px !important; }
.sop-planner .sop-hero h1 { margin-bottom: 16px !important; }
.sop-planner .sop-hero h2 { margin-bottom: 16px !important; }

.sop-planner .sop-type { align-items: center; justify-content: center; text-align: center; min-height: 58px; }

.sop-split--idle { height: 440px; }
.sop-split--idle .sop-list { display: flex; flex-direction: column; justify-content: center; }
.sop-list__empty { padding: 16px 12px; }
.sop-planner .sop-list__lead { margin: 0 0 12px !important; display: flex; flex-direction: column; gap: 2px; }
.sop-planner .sop-list__lead strong { font-size: 15px; color: #111; }
.sop-planner .sop-list__lead span { font-size: 13px; color: #7a808a; }
.sop-quickcities { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sop-quickcity { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: #fff; border: 1px solid #eceef0; border-radius: 9px; padding: 8px 10px; transition: border-color .15s; }
.sop-quickcity:hover { border-color: var(--sop-accent); }
.sop-planner .sop-quickcity strong { font-size: 13px; color: #111; }
.sop-planner .sop-quickcity span { font-size: 11px; color: #7a808a; white-space: nowrap; }

.sop-bubble span { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,173,255,.88); color: #fff; font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 4px 14px -4px rgba(0,60,100,.55); cursor: pointer; transition: transform .15s, background .15s; }
.sop-bubble:hover span { transform: scale(1.1); background: #0090d6; }

.sop-planner .sop-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sop-format { padding: 26px; }
.sop-format__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.sop-format__head .sop-format__visual { margin-bottom: 0; flex-shrink: 0; }
.sop-planner .sop-format__head h3 { margin: 0 !important; }
.sop-format__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.sop-planner .sop-format__facts div { flex-direction: column; justify-content: flex-start; gap: 2px; background: #f7f9fb; border: none; border-radius: 10px; padding: 9px 11px; }
.sop-planner .sop-format__facts dd { text-align: left; font-size: 14px; line-height: 1.3; }
.sop-planner .sop-format__facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 900px) {
  .sop-planner .sop-formats__grid { grid-template-columns: 1fr; }
  .sop-split--idle { height: auto; }
}
@media (max-width: 720px) {
  .sop-planner .sop-hero { padding: 48px 16px 32px; }
  .sop-hero__bgimg--1, .sop-hero__bgimg--2, .sop-hero__bgimg--3 { display: none; }
  .sop-hero__bgimg--0 { animation: none; opacity: 1; }
  .sop-format__facts { grid-template-columns: 1fr 1fr; }
}
.sop-planner .sop-type__meta:empty { display: none; }

/* ═══ Runde 3 (23.09.2026): Anfrageformular, FAQ-Deeplinks, Cases, Info-Icon, Adresssuche, Mittelpunkt-Pin ═══ */

/* Anfrage: Foto statt flachem Schwarz, Formular als Glas-Karte */
.sop-planner .sop-final { padding: 72px 20px; overflow: hidden; isolation: isolate; background: #0b0d10; }
.sop-planner .sop-final::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('/wp-content/uploads/u-bahn-station-plakatflaechen-vollformat-passanten-tunnel-berlin-iphone-15-photo.webp') center / cover no-repeat; transform: scale(1.04); }
.sop-planner .sop-final::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 20% 0%, rgba(0,173,255,.28), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(123,97,255,.22), transparent 50%), linear-gradient(180deg, rgba(8,10,14,.86), rgba(8,10,14,.93)); }
.sop-planner .sop-final .sop-form--wide { max-width: 640px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 28px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.sop-planner .sop-step-indicator { justify-content: center; margin: 0 auto 10px; }
.sop-planner .sop-final .sop-step-dot { width: 30px; height: 30px; font-size: 13px; background: rgba(255,255,255,.1); color: #c7cbd1 !important; }
.sop-planner .sop-final .sop-step-dot--active { background: var(--sop-accent); color: #fff !important; box-shadow: 0 0 0 4px rgba(0,173,255,.2); }
.sop-planner .sop-final .sop-step-line { max-width: 60px; background: rgba(255,255,255,.18); }
.sop-planner .sop-final .sop-step > .sop-cta { align-self: center; }
.sop-planner .sop-final .sop-step__actions { justify-content: center; gap: 22px; }
.sop-planner .sop-final .sop-form label { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #aeb4bd !important; gap: 6px; }
#top .sop-planner .sop-final .sop-form input, #top .sop-planner .sop-final .sop-form select { margin: 0 !important; padding: 13px 15px !important; height: auto !important; border-radius: 12px !important; border: 1.5px solid rgba(255,255,255,.16) !important; background: rgba(10,12,16,.55) !important; color: #fff !important; font-size: 15px !important; font-weight: 400; text-transform: none; letter-spacing: 0; transition: border-color .15s, box-shadow .15s, background .15s; }
.sop-planner .sop-final .sop-form input::placeholder { color: rgba(255,255,255,.4) !important; }
.sop-planner .sop-final .sop-form input:focus, .sop-planner .sop-final .sop-form select:focus { border-color: var(--sop-accent) !important; background: rgba(10,12,16,.75) !important; box-shadow: 0 0 0 4px rgba(0,173,255,.18); outline: none; }
.sop-planner .sop-final .sop-link { color: #c7cbd1 !important; }

/* FAQ: Deeplinks zu passenden Inhalten */
.sop-deeplinks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 18px; }
.sop-planner .sop-deeplinks__label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #7a808a; margin-right: 4px; }
.sop-planner .sop-deeplinks a { display: inline-block; border: 1.5px solid #dcefff; background: #f5fbff; color: #0080c0 !important; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s; }
.sop-planner .sop-deeplinks a:hover { background: #e6f5ff; border-color: var(--sop-accent); }
.sop-planner .sop-faq__more { display: inline-block; margin-left: 4px; font-weight: 700; color: #0090d6 !important; white-space: nowrap; }

/* Referenz-Cases (3 Karten mit Bild + KPIs) */
.sop-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.sop-planner .sop-cases .sop-case { display: flex; flex-direction: column; max-width: none; margin: 0; padding: 0; overflow: hidden; border-radius: 16px; background: #16191e; border: 1px solid #2a2e35; }
.sop-case__img { display: block; aspect-ratio: 16 / 9; background-size: cover; background-position: center; transition: transform .4s; }
.sop-planner .sop-cases .sop-case:hover .sop-case__img { transform: scale(1.04); }
.sop-case__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.sop-planner .sop-case__kpis { display: flex; gap: 16px; margin: 4px 0 2px; }
.sop-planner .sop-case__kpis span { display: flex; flex-direction: column; font-size: 12px !important; color: #9aa1ab !important; line-height: 1.3 !important; }
.sop-planner .sop-case__kpis b { font-size: 18px; color: #fff; font-weight: 800; }

/* "i"-Hinweis: groesser, klar erkennbar */
.sop-planner .sop-info { width: 18px; height: 18px; margin-left: 6px; font-size: 11px; font-family: Georgia, serif; font-style: italic; background: #eef7ff; color: #0090d6 !important; border: 1px solid #cfe9fb; vertical-align: 2px; transition: background .15s; }
.sop-planner .sop-info:hover { background: var(--sop-accent); color: #fff !important; }
.sop-planner .sop-hero__search .sop-info { width: 17px; height: 17px; margin-left: 6px; font-size: 11px; }
.sop-planner .sop-info.sop-tip::after { left: auto; right: -8px; font-style: normal; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* Adressvorschlaege mit Icon + Treffer-Hervorhebung */
.sop-planner .sop-suggestions li { grid-template-columns: 22px 1fr auto; }
.sop-planner .sop-sg__icon { grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; background: #0090d6; -webkit-mask: var(--sop-sg-ico) center / contain no-repeat; mask: var(--sop-sg-ico) center / contain no-repeat; }
.sop-sg__icon--pin { --sop-sg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.sop-sg__icon--street { --sop-sg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h2l-1 20H7zM15 2h-2l1 20h3zM11.2 5h1.6v3h-1.6zm0 5h1.6v4h-1.6zm0 6h1.6v4h-1.6z'/%3E%3C/svg%3E"); }
.sop-sg__icon--city { --sop-sg-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V9l5-3v3l5-3v5h8v10zm4-3h2v-2H7zm0-4h2v-2H7zm5 4h2v-2h-2zm5 0h2v-2h-2zm0-4h2v-2h-2z'/%3E%3C/svg%3E"); }
.sop-planner .sop-sg__main { grid-column: 2; }
.sop-planner .sop-sg__sub { grid-column: 2; }
.sop-planner .sop-sg__kind { grid-column: 3; }
.sop-planner .sop-sg__main mark { background: none; color: #0090d6; font-weight: 800; padding: 0; }
.sop-planner .sop-suggestions li.sop-sg--active { background: #eef7ff; }

/* Mittelpunkt-Pin (verschiebbar) */
.sop-centerpin span { position: absolute; left: 2px; top: 0; width: 24px; height: 24px; border-radius: 50% 50% 50% 0; background: #111; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 4px 10px rgba(0,0,0,.35); cursor: grab; }
.sop-centerpin span::after { content: ''; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #00adff; }

@media (max-width: 900px) { .sop-cases { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .sop-planner .sop-final { padding: 48px 14px; }
  .sop-planner .sop-final .sop-form--wide { padding: 20px 16px; border-radius: 18px; }
}
.sop-planner .sop-step-indicator .sop-step-line { flex: 0 0 60px; width: 60px; }
/* Bughunt 23.09.: Pflichtfeld-Markierung nach Absendeversuch, Budget-Hinweis */
.sop-planner .sop-form--checked input[required]:invalid, .sop-planner .sop-form--checked input[type="email"]:invalid { border-color: #ff5a5f !important; box-shadow: 0 0 0 3px rgba(255,90,95,.18) !important; }
.sop-planner .sop-budgethint__note { color: #b45309 !important; font-weight: 600; }
/* Dark-Mode: Theme setzt Links per Inline-Style hellcyan/schwarz -> hier korrekt fuer dunklen
   Hintergrund gegenfaerben. Braucht #top-Praefix, da der Dark-Toggle inline "html[data-site-
   theme=dark] body:not(...)x4 a { color:... !important }" injiziert (nur mit ID schlagbar). */
html[data-site-theme="dark"] #top .sop-planner :is(.sop-deeplinks a, .sop-faq__more) { color: #6fd0ff !important; }
html[data-site-theme="dark"] #top .sop-planner .sop-scenario .sop-scenario__budget { color: var(--sop-ink) !important; }
html[data-site-theme="dark"] #top .sop-planner .sop-quickcity strong { color: var(--sop-ink) !important; }
html[data-site-theme="dark"] #top .sop-planner .sop-list__lead strong { color: var(--sop-ink) !important; }
html[data-site-theme="dark"] #top .sop-planner .sop-crumbs a { color: #c7cbd1 !important; }
html[data-site-theme="dark"] #top .sop-planner :is(.sop-quickcity, .sop-cities__grid a, .sop-chip) { color: var(--sop-ink) !important; }
/* Header-"Kontakt"-Button (ausserhalb .sop-planner, Site-Header): der generische Dark-Toggle
   faerbt alle Links cyan per spaeter injiziertem Inline-<style> (schlaegt die eigentlich
   vorgesehene Weiss-Regel fuer .smo-contact-trigger). Nur auf dieser Seite geladen -- der
   eigentliche Fix gehoert ins sitewide Dark-CSS, hier als Sofortloesung mit hoeherer
   Spezifitaet (#top-Praefix), Nutzer-Fund 23.09.2026. */
html[data-site-theme="dark"] #top .smo-contact-trigger,
html[data-site-theme="dark"] #top #menu-item-135471 a { color: #fff !important; }

/* Mobil: kompakte Werbeform-Leiste (einzeilig) hat Vorrang vor der zentrierten Desktop-Variante */
@media (max-width: 720px) {
  .sop-planner .sop-type { min-height: 0; justify-content: flex-start; text-align: left; }
}
/* Adress-Dropdown ragt ueber den Hero hinaus: Hero darf nicht clippen (sonst Dropdown abgeschnitten),
   Slideshow-Ebene clippt selbst; Hero liegt ueber dem Ergebnisbereich. */
.sop-planner .sop-hero { overflow: visible !important; z-index: 20; }
.sop-hero__bg { overflow: hidden; }
.sop-planner .sop-hero__search { z-index: 25; }
.sop-planner .sop-suggestions { z-index: 1000; max-height: 320px; }

/* ═══ Runde 4 (23.09.2026): Anfrage-Popup UX, Auswahl-Uebersicht mit Einzel-Entfernen, Homepage-Hero ═══ */

/* Popup: fester Kopf + Fuss, scrollbarer Inhalt dazwischen (bei 15+ Standorten sonst Absenden-Button */
/* ausserhalb des Sichtfelds). */
.sop-modal__box--flex { display: flex; flex-direction: column; padding: 0; max-height: 86vh; max-width: 560px; overflow: hidden; }
.sop-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 14px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.sop-modal__head h3 { margin: 0 !important; }
.sop-modal__box--flex .sop-modal__close { position: static; flex-shrink: 0; }
.sop-modal__body { padding: 16px 24px; overflow-y: auto; flex: 1 1 auto; }
.sop-planner .sop-modal__intro { margin: 0 0 14px !important; color: #555 !important; font-size: 14px; }
.sop-modal__foot { padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #eee; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 14px; background: #fff; border-radius: 0 0 16px 16px; }
.sop-planner .sop-modal__foot .sop-form__status { margin: 0 !important; flex: 1; text-align: left; font-size: 13px; }
.sop-modal__foot .sop-cta { flex-shrink: 0; }

/* Erfolgs-Panel nach dem Absenden (statt nur einer kleinen Statuszeile) */
.sop-form-success { text-align: center; padding: 30px 12px; }
.sop-form-success__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #e3f9ec; color: #1a9c5c; font-size: 24px; font-weight: 800; margin-bottom: 14px; }
.sop-planner .sop-form-success h3, .sop-planner .sop-form-success h4 { margin: 0 0 6px !important; font-size: 19px; }
.sop-planner .sop-form-success p { margin: 0 !important; color: #666 !important; font-size: 14px; }
.sop-planner .sop-final .sop-form-success h3, .sop-planner .sop-final .sop-form-success h4 { color: #fff !important; }
.sop-planner .sop-final .sop-form-success p { color: #c7cbd1 !important; }
.sop-final .sop-form-success__icon { background: rgba(26,156,92,.18); color: #4ade80; }

/* Auswahl-Uebersicht: kompakte Kopfzeile statt reiner Adressliste, aufklappbar, mit Einzel-Entfernen.
   Wichtig ab ca. 8+ Standorten -- sonst sprengt eine lange Adressliste das Popup/Formular. */
.sop-selsum { padding: 12px 14px !important; }
.sop-selsum__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sop-planner .sop-selsum__head strong { font-size: 15px !important; }
.sop-selsum__price { font-weight: 700; white-space: nowrap; font-size: 14px; }
.sop-planner .sop-selsum__meta { font-size: 12.5px !important; color: #5b616b !important; margin-top: 3px !important; }
.sop-selsum__toggle { display: inline-block; margin-top: 9px; background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 700; color: var(--sop-accent-d); cursor: pointer; }
.sop-selsum__toggle:hover { text-decoration: underline; }
.sop-selsum__list { list-style: none; margin: 9px 0 0; padding: 0; max-height: 190px; overflow-y: auto; border-top: 1px dashed rgba(0,0,0,.1); }
.sop-planner .sop-selsum__list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px !important; color: #333 !important; border-bottom: 1px solid rgba(0,0,0,.06); }
.sop-selsum__list li:last-child { border-bottom: none; }
.sop-selsum__remove { flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%; border: none; background: rgba(0,0,0,.07); color: #666; font-size: 14px; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.sop-selsum__remove:hover { background: #ffdcdc; color: #c0392b; }

/* dunkler Hintergrund (.sop-final vor der Anfrage) */
.sop-planner .sop-final .sop-selsum__meta, .sop-planner .sop-final .sop-selsum__price { color: #d7dae0 !important; }
.sop-planner .sop-final .sop-selsum__toggle { color: #6fd0ff !important; }
.sop-planner .sop-final .sop-selsum__list { border-top-color: rgba(255,255,255,.14); }
.sop-planner .sop-final .sop-selsum__list li { color: #d7dae0 !important; border-bottom-color: rgba(255,255,255,.08); }
.sop-final .sop-selsum__remove { background: rgba(255,255,255,.12); color: #ccc; }
.sop-final .sop-selsum__remove:hover { background: rgba(255,90,95,.3); color: #fff; }

/* Schritt-Anzeige mit Namen ("1 Kampagne — 2 Kontakt") statt nur nackter Zahlen */
.sop-step-dot__label { font-size: 11px; font-weight: 700; color: #7a808a; }
.sop-planner .sop-final .sop-step-dot__label { color: #aeb4bd !important; }

/* Homepage-Hero-Mirror: identischer Look wie der Planer-Hero, eigener Wrapper zur Abgrenzung */
.sh2-hero-mirror .sop-planner { margin-bottom: -1px; }

/* Wichtig: eigene .sop-form/.sop-modal__foot-Regeln setzen display:flex und schlagen damit die
   Browser-Standardregel [hidden]{display:none} (Autoren-CSS gewinnt gegen UA-Stylesheet, auch bei
   gleicher Spezifitaet). Ohne diese Regel bleiben per JS ausgeblendete Formulare/Footer trotz
   hidden-Attribut sichtbar (z. B. Formular hinter dem Erfolgs-Panel). */
.sop-planner [hidden] { display: none !important; }


/* 16.10.2026: Ziel-Einstieg (optional) mit Begruendung */
.sop-planner .sop-goals { max-width: 980px; margin: 14px auto 0; padding: 0 12px; text-align: left; }
.sop-planner .sop-goals__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sop-planner .sop-goals__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-right: 4px; }
.sop-planner .sop-goal { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.sop-planner .sop-goal:hover { background: rgba(255,255,255,.22); }
.sop-planner .sop-goal--active { background: #fff; color: #0a0a0a; border-color: #fff; }
.sop-planner .sop-goal:focus-visible { outline: 2px solid #00adff; outline-offset: 3px; }
.sop-planner .sop-goals__why { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.92); max-width: 70ch; }
@media (max-width: 767px) { .sop-planner .sop-goals { margin-top: 12px; } .sop-planner .sop-goals__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .sop-planner .sop-goal { flex: 0 0 auto; } }

/* 16.10.2026: Touchflaechen mobil >= 44px (WCAG 2.2 verlangt AA 24px; hier bewusst groesser) */
@media (max-width: 767px) {
  .sop-planner .sop-type, .sop-planner .sop-mobile-toggle__btn, .sop-planner .sop-btn-sel { min-height: 44px; }
}

/* Stadtvergleich (berechnete Aussagen) */
.sop-planner .sop-profile__text { max-width: 78ch; font-size: 17px; line-height: 1.65; margin: 0 0 12px; }

/* 16.10.2026: Pin-Klick markiert den Listeneintrag */
.sop-card--focus { border-color: #00adff; box-shadow: 0 0 0 2px rgba(0,173,255,.35); }