/* Kampagnenplaner V4 (27.10.2026): oberer Bereich "wie Airbnb" -- Suchleiste mit Pills, Format-Chips, Liste mit Fotos links, grosse Karte rechts, Auswahlleiste.
   Gilt nur fuer .sop-planner.sop-v4 (Planerseite, nicht der Startseiten-Mirror). Tokens aus planner-v3.css (--v3-*). Haengt NACH v3, daher teils !important. */

/* ---------- Hero ---------- */
html body .sop-planner.sop-v4 .sop-hero { position: relative; overflow: hidden; background: var(--v3-bg); padding: clamp(104px, 9vw, 132px) 0 22px; }
.sop-v4 .sop-hero__photo { position: absolute; top: 0; right: 0; width: min(56%, 760px); height: 380px; background-size: cover; background-position: 40% 50%; opacity: .92; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to left, #000 52%, transparent 100%), linear-gradient(to top, transparent 0, #000 38%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, #000 52%, transparent 100%), linear-gradient(to top, transparent 0, #000 38%); mask-composite: intersect; }
html[data-site-theme="dark"] .sop-v4 .sop-hero__photo { opacity: .55; }
.sop-v4 .sop-hero__inner { position: relative; z-index: 1; }
html body .sop-planner.sop-v4 .sop-hero h1 { font-size: clamp(32px, 4vw, 52px) !important; line-height: 1.04 !important; max-width: 17ch !important; margin: 0 0 14px; }
html body .sop-planner.sop-v4 .sop-hero__sub { font-size: 15px !important; line-height: 1.55 !important; max-width: 560px; margin: 0 0 24px !important; }
.sop-v4 .sop-eyebrow { margin: 0 0 14px !important; }

/* ---------- Suchleiste (Pills) ---------- */
html body .sop-planner.sop-v4 .sop-hero__search { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: stretch; background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.sop-v4 .sop-pill { position: relative; display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 10px 18px; background: var(--v3-bg); border: 1px solid var(--v3-line); border-radius: 20px; box-shadow: 0 8px 28px -16px rgba(0, 0, 0, .28); }
.sop-v4 .sop-pill:focus-within { border-color: var(--v3-ink); }
.sop-v4 .sop-pill__ico { flex: 0 0 auto; width: 24px; height: 24px; color: var(--v3-ink); }
.sop-v4 .sop-pill__ico svg { width: 24px; height: 24px; display: block; }
.sop-v4 .sop-pill__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html body .sop-planner.sop-v4 .sop-pill label { margin: 0; padding: 0; min-height: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--v3-muted) !important; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
html body .sop-planner.sop-v4 .sop-pill input, html body .sop-planner.sop-v4 .sop-pill select { width: 100%; min-height: 0; height: 24px; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; outline: 0; font-size: 15px; font-weight: 500; color: var(--v3-ink); border-radius: 0; }
.sop-v4 .sop-pill select { appearance: none; -webkit-appearance: none; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 16px; padding-right: 22px; }
.sop-v4 .sop-pill input::placeholder { color: var(--v3-muted); opacity: 1; font-weight: 400; }
html body .sop-planner.sop-v4 .sop-hero__search .sop-cta { min-height: 66px; padding: 0 30px; border-radius: 20px; font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.sop-v4 .sop-suggestions { left: 0; right: 0; top: calc(100% + 6px); z-index: 60; }

/* ---------- Format-Chips ---------- */
html body .sop-planner.sop-v4 .sop-typebar { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }
html body .sop-planner.sop-v4 .sop-type { flex: 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 18px; border: 1px solid var(--v3-line); border-radius: 999px; background: var(--v3-bg); color: var(--v3-ink); font-size: 14px; font-weight: 500; box-shadow: 0 4px 14px -10px rgba(0, 0, 0, .3); text-align: center; }
html body .sop-planner.sop-v4 .sop-type__name { font-size: 14px; font-weight: 500; white-space: nowrap; color: inherit; }
html body .sop-planner.sop-v4 .sop-type__meta { font-size: 12px; color: var(--v3-muted); min-height: 0; white-space: nowrap; }
.sop-v4 .sop-type__meta:empty { display: none; }
.sop-v4 .sop-type__meta::before { content: '· '; }
html body .sop-planner.sop-v4 .sop-type--active { background: var(--v3-ink); color: var(--v3-bg); border-color: var(--v3-ink); }
html body .sop-planner.sop-v4 .sop-type--active .sop-type__name, html body .sop-planner.sop-v4 .sop-type--active .sop-type__meta { color: var(--v3-bg) !important; }
.sop-v4 .sop-type:disabled { opacity: .45; }

/* ---------- Panel: Liste links, Karte rechts ---------- */
.sop-v4 .sop-results { padding-top: 8px; }
.sop-v4 .sop-panel { background: var(--v3-bg); border: 1px solid var(--v3-line); border-radius: 26px; padding: 14px; box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .35); }
html body .sop-planner.sop-v4 .sop-split { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 14px; height: 660px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.sop-v4 .sop-side { display: flex; flex-direction: column; min-height: 0; gap: 10px; }
.sop-v4 .sop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sop-v4 .sop-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid var(--v3-line); border-radius: 14px; background: var(--v3-surface); color: var(--v3-muted); font-size: 15px; font-weight: 600; cursor: pointer; }
.sop-v4 .sop-tab--on { background: var(--v3-bg); color: var(--v3-ink); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); border-color: var(--v3-ink); }
.sop-v4 .sop-tab__count { font-weight: 500; color: var(--v3-muted); }
.sop-v4 .sop-tab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #2f80ed; color: #fff; font-size: 12px; font-weight: 700; }
.sop-v4 .sop-sidefilters { display: flex; gap: 8px; flex-wrap: wrap; }
.sop-v4 .sop-fpill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--v3-line); border-radius: 999px; background: var(--v3-bg); font-size: 13px; color: var(--v3-muted); margin: 0; }
html body .sop-planner.sop-v4 .sop-fpill select { min-height: 0; height: 24px; width: auto; padding: 0 18px 0 0; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--v3-ink); box-shadow: none; appearance: none; -webkit-appearance: none; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center / 14px; }
.sop-v4 .sop-sidehead h2 { margin: 2px 0 2px; font-size: 15px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; text-align: left; }
.sop-v4 .sop-sidehead .sop-results__count { margin: 0; font-size: 12px; line-height: 1.4; color: var(--v3-muted); }
.sop-v4 .sop-budgethint { margin: 0; }
html body .sop-planner.sop-v4 .sop-list, .sop-v4 .sop-sellist { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none; border: 0; padding: 0 4px 0 0; background: transparent; scrollbar-width: thin; }
.sop-v4 .sop-list[hidden], .sop-v4 .sop-sellist[hidden] { display: none !important; }
.sop-v4 .sop-list__empty { padding: 8px 2px; }

/* ---------- Karten in der Liste (Foto, Tags, Preis, Plus) ---------- */
html body .sop-planner.sop-v4 .sop-card { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; margin: 0 0 10px; border: 1px solid var(--v3-line); border-radius: 18px; background: var(--v3-bg); cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.sop-v4 .sop-card:hover { box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .4); }
.sop-v4 .sop-card--focus, .sop-v4 .sop-card--sel { border-color: var(--v3-ink); }
html body .sop-planner.sop-v4 .sop-card__visual { width: 88px; height: 78px; border-radius: 14px; overflow: hidden; background: var(--v3-surface); padding: 0; display: block; }
.sop-v4 .sop-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sop-v4 .sop-card__visual .sop-ico { width: 28px; height: 28px; margin: 25px auto 0; display: block; }
.sop-v4 .sop-card__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html body .sop-planner.sop-v4 .sop-card__address { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--v3-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sop-v4 .sop-card__meta { font-size: 12px; color: var(--v3-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .sop-planner.sop-v4 .sop-card__type { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; font-size: 11px; text-transform: none; letter-spacing: 0; }
.sop-v4 .sop-tag { display: inline-block; padding: 3px 9px; border-radius: 8px; background: var(--v3-surface); border: 1px solid var(--v3-line); color: var(--v3-ink); font-size: 11px; font-weight: 500; line-height: 1.3; }
.sop-v4 .sop-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
html body .sop-planner.sop-v4 .sop-card__price { font-size: 14px; font-weight: 700; color: var(--v3-ink); white-space: nowrap; }
.sop-v4 .sop-card__runtime { font-size: 11px; color: var(--v3-muted); min-height: 0; }
html body .sop-planner.sop-v4 .sop-card .sop-btn-sel { width: 36px; height: 36px; min-height: 0 !important; padding: 0; border-radius: 50%; border: 1px solid var(--v3-line); background: var(--v3-bg); color: var(--v3-ink); font-size: 22px; font-weight: 400; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
html body .sop-planner.sop-v4 .sop-card .sop-btn-sel--on { background: var(--v3-ink); color: var(--v3-bg); border-color: var(--v3-ink); font-size: 16px; }

/* ---------- Karte ---------- */
html body .sop-planner.sop-v4 .sop-map-wrap { border: 1px solid var(--v3-line); border-radius: 20px; overflow: hidden; }
.sop-v4 .sop-mapctl { position: absolute; right: 12px; bottom: 30px; z-index: 450; display: flex; gap: 8px; }
.sop-v4 .sop-mapctl__btn { min-height: 40px; padding: 8px 16px; border: 1px solid var(--v3-line); border-radius: 999px; background: var(--v3-bg); color: var(--v3-ink); font-size: 13px; font-weight: 600; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); cursor: pointer; }
.sop-v4 .sop-mapctl__btn--ico { width: 40px; padding: 0; font-size: 18px; }
.sop-v4 .sop-map-wrap--full { position: fixed !important; inset: 0; z-index: 100000; border-radius: 0 !important; border: 0 !important; }
body.sop-mapfull { overflow: hidden; }
.sop-v4 .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 18px; }
.sop-v4 .leaflet-popup-content { margin: 0; width: 262px !important; }
.sop-v4 .sop-pop { padding: 0 0 14px; }
.sop-v4 .sop-pop__photo { height: 140px; background: var(--v3-surface); overflow: hidden; }
.sop-v4 .sop-pop__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sop-v4 .sop-pop__addr { margin: 12px 14px 0; font-size: 16px; font-weight: 700; line-height: 1.25; }
.sop-v4 .sop-pop__city { margin: 2px 14px 0; font-size: 12px; color: var(--v3-muted); }
.sop-v4 .sop-pop .sop-card__type { margin: 8px 14px 0; }
.sop-v4 .sop-pop__price { margin: 8px 14px 0; font-size: 15px; font-weight: 700; }
html body .sop-planner.sop-v4 .sop-pop .sop-btn-sel--wide { display: block; width: calc(100% - 28px); margin: 12px 14px 0; min-height: 44px; border-radius: 12px; border: 1px solid var(--v3-ink); background: var(--v3-ink); color: var(--v3-bg); font-size: 14px; font-weight: 700; }
html body .sop-planner.sop-v4 .sop-pop .sop-btn-sel--wide.sop-btn-sel--on { background: transparent; color: var(--v3-ink); }
.sop-v4 .sop-legend { margin: 12px 4px 0; }

/* ---------- Auswahlleiste: schwebende Karte mit Fotos ---------- */
html body .sop-planner.sop-v4 .sop-selbar { left: 50%; right: auto; bottom: 16px; width: min(1120px, calc(100% - 32px)); transform: translateX(-50%); padding: 12px 18px; background: var(--v3-bg); border: 1px solid var(--v3-line); border-radius: 22px; box-shadow: 0 24px 64px -20px rgba(0, 0, 0, .45); }
.sop-v4 .sop-selbar__inner { max-width: none; flex-wrap: nowrap; gap: 20px; }
html body .sop-planner.sop-v4 .sop-selbar .sop-selbar__info, html body .sop-planner.sop-v4 .sop-selbar .sop-selbar__info strong { color: var(--v3-ink) !important; }
html body .sop-planner.sop-v4 .sop-selbar #sop-selbar-sum, html body .sop-planner.sop-v4 .sop-selbar #sop-selbar-brief { display: none; }
.sop-v4 .sop-selbar__thumbs { display: flex; align-items: center; }
.sop-v4 .sop-selbar__thumb { width: 44px; height: 44px; margin-left: -8px; border: 2px solid var(--v3-bg); border-radius: 12px; overflow: hidden; background: var(--v3-surface); }
.sop-v4 .sop-selbar__thumb:first-child { margin-left: 0; }
.sop-v4 .sop-selbar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sop-v4 .sop-selbar__more { margin-left: 8px; color: #2f80ed; font-weight: 700; font-size: 14px; }
.sop-v4 .sop-selbar__fact { display: flex; flex-direction: column; gap: 2px; padding-left: 20px; border-left: 1px solid var(--v3-line); white-space: nowrap; }
.sop-v4 .sop-selbar__fact small { font-size: 11px; color: var(--v3-muted); }
html body .sop-planner.sop-v4 .sop-selbar .sop-selbar__fact strong { font-size: 14px; color: var(--v3-ink) !important; font-weight: 700; }
.sop-v4 .sop-selbar__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
html body .sop-planner.sop-v4 .sop-selbar .sop-link { color: #2f80ed; font-size: 13px; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; }
html body .sop-planner.sop-v4 .sop-selbar .sop-link--light { color: var(--v3-muted); }
html body .sop-planner.sop-v4 .sop-selbar .sop-cta { min-height: 52px; padding: 0 28px; border-radius: 16px; font-size: 14px; letter-spacing: 0; text-transform: none; }

/* ---------- Tablet / Mobil ---------- */
@media (max-width: 1100px) {
  html body .sop-planner.sop-v4 .sop-hero__search { grid-template-columns: 1fr 1fr; }
  .sop-v4 .sop-pill--grow, .sop-v4 .sop-field--grow { grid-column: 1 / -1; }
  html body .sop-planner.sop-v4 .sop-hero__search .sop-cta { grid-column: 1 / -1; }
  .sop-v4 .sop-hero__photo { opacity: .35; }
  .sop-v4 .sop-selbar__fact { display: none; }
}
@media (max-width: 900px) {
  /* Karte steht oben in der Buehne (sticky), die Liste fliesst darunter (siehe planner-v3.css "Karten-Buehne") */
  .sop-v4 .sop-panel { border: 0; border-radius: 0; padding: 0; box-shadow: none; background: transparent; }
  html body .sop-planner.sop-v4.sop-stage-on .sop-split { display: block; height: auto; }
  .sop-v4 .sop-side { gap: 10px; padding-top: 12px; }
  html body .sop-planner.sop-v4 .sop-list, .sop-v4 .sop-sellist { overflow: visible; padding: 0; }
  .sop-v4 .sop-hero__photo { display: none; }
  html body .sop-planner.sop-v4 .sop-hero { padding-top: 14px; }
  html body .sop-planner.sop-v4 .sop-hero h1 { font-size: 24px !important; }
  html body .sop-planner.sop-v4 .sop-hero__sub { font-size: 14px !important; margin-bottom: 14px !important; }
  .sop-v4 .sop-pill { min-height: 58px; padding: 8px 14px; border-radius: 16px; }
  html body .sop-planner.sop-v4 .sop-hero__search { gap: 10px; }
  html body .sop-planner.sop-v4 .sop-hero__search .sop-cta { min-height: 54px; border-radius: 16px; }
  html body .sop-planner.sop-v4 .sop-selbar { width: calc(100% - 20px); bottom: 10px; padding: 10px 12px; border-radius: 18px; }
  .sop-v4 .sop-selbar__thumbs, .sop-v4 .sop-selbar__fact, .sop-v4 .sop-selbar__actions .sop-link--light { display: none; }
  .sop-v4 .sop-selbar__inner { gap: 10px; }
  html body .sop-planner.sop-v4 .sop-selbar .sop-cta { min-height: 46px; padding: 0 18px; }
  .sop-v4 .sop-mapctl { bottom: 56px; }
  html body .sop-planner.sop-v4.sop-stage-on .sop-card { grid-template-columns: 76px minmax(0, 1fr) auto; }
  html body .sop-planner.sop-v4.sop-stage-on .sop-card__visual { width: 76px; height: 70px; }
}

/* ---------- Feinschliff (nach erstem Screenshot) ---------- */
html body .sop-planner.sop-v4 .sop-pill { flex-direction: row !important; align-items: center !important; }
html body .sop-planner.sop-v4 .sop-pill .sop-pill__body { align-items: stretch; }
html body .sop-planner.sop-v4 .sop-pill input, html body .sop-planner.sop-v4 .sop-pill select,
html body .sop-planner.sop-v4 .sop-fpill select { border: 0 !important; background-color: transparent !important; box-shadow: none !important; padding-left: 0 !important; border-radius: 0 !important; outline: 0 !important; }
html body .sop-planner.sop-v4 .sop-pill select, html body .sop-planner.sop-v4 .sop-fpill select { padding-right: 20px !important; }
html body .sop-planner.sop-v4 .sop-sidefilters { flex-wrap: nowrap; }
html body .sop-planner.sop-v4 .sop-fpill { flex: 1 1 0; min-width: 0; }
html body .sop-planner.sop-v4 .sop-fpill select { width: 100%; }
.sop-v4 .sop-hero__inner { display: flex; flex-direction: column; }
.sop-v4 .sop-hero__search { order: 1; }
.sop-v4 .sop-typebar { order: 2; }
.sop-v4 .sop-goals { order: 3; margin-top: 12px; }
html body .sop-planner.sop-v4 .sop-sidehead h2 { font-size: 15px !important; line-height: 1.25 !important; margin: 2px 0 2px !important; letter-spacing: -.01em; }
html body .sop-planner.sop-v4 .sop-tag { display: inline-block; text-transform: none !important; letter-spacing: 0 !important; font-size: 11px !important; font-weight: 500 !important; padding: 3px 9px; width: auto; }
.sop-v4 .sop-card__address { order: 1; }
.sop-v4 .sop-card__meta { order: 2; }
.sop-v4 .sop-card__type { order: 3; }
@media (max-width: 900px) {
  html body .sop-planner.sop-v4 .sop-typebar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  html body .sop-planner.sop-v4 .sop-sidefilters { flex-wrap: wrap; }
  .sop-v4 .sop-mapctl { display: none; }
}

/* ---------- Feinschliff 2 ---------- */
.sop-v4 .sop-hero__inner > * { align-self: flex-start; }
.sop-v4 .sop-hero__inner > .sop-hero__search, .sop-v4 .sop-hero__inner > .sop-typebar { align-self: stretch; }
html body .sop-planner.sop-v4 .sop-selbar .sop-cta { background: var(--v3-ink) !important; color: var(--v3-bg) !important; border: 1px solid var(--v3-ink) !important; font-weight: 600; }
html body .sop-planner.sop-v4 .sop-sidefilters { flex-wrap: wrap; }
html body .sop-planner.sop-v4 .sop-fpill { flex: 1 1 auto; }
html body .sop-planner.sop-v4 .sop-fpill select { width: auto; min-width: 90px; }

/* ---------- Feinschliff 3 ---------- */
html body .sop-planner.sop-v4 .sop-crumbs { margin: 0 0 14px !important; align-self: flex-start; text-align: left; }
html body .sop-planner.sop-v4 .sop-sidefilters { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 8px; flex-wrap: nowrap; }
html body .sop-planner.sop-v4 .sop-fpill { flex: none; min-width: 0; }
html body .sop-planner.sop-v4 .sop-fpill select { flex: 1 1 auto; min-width: 0; width: 100%; }

/* ---------- Feinschliff 4 (Mobil/Tablet) ---------- */
@media (max-width: 900px) {
  html body .sop-planner.sop-v4.sop-stage-on .sop-hero__search { grid-template-columns: 1fr; }
  html body .sop-planner.sop-v4 .sop-fpill { padding: 0 10px; gap: 6px; font-size: 12px; }
  html body .sop-planner.sop-v4 .sop-fpill select { font-size: 12.5px; padding-right: 16px !important; min-width: 0; }
  html body .sop-planner.sop-v4 .sop-sidefilters { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}