/* =========================================================
   STADTSINN – Unterseiten im Stil «Quartiersplan»
   Baut auf den Farben und Bausteinen aus stil-v1.css auf.
   ========================================================= */

/* ---------- Grundlagen Unterseiten ---------- */
@supports (overflow: clip) {
  .ss.ss-page{ overflow: clip; }
}
.ss-block{ padding: clamp(36px, 5vw, 68px) 0; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-mt{ margin-top: clamp(28px, 4vw, 48px) !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-subhead{ margin: 2.2em 0 1em !important; font-size: 1.35rem !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) h4{ color: var(--ss-night); font-size: 1.05rem; margin: 0 0 .35em; font-weight: 800; }

/* Brotkrumen */
.ss-crumbs{ position: relative; z-index: 3; padding: 18px 0 0; font-size: .86rem; color: var(--ss-text); }
.ss-crumbs a{ color: var(--ss-aare-d) !important; font-weight: 600; }
.ss-crumbs a:hover{ text-decoration: underline !important; }
.ss-crumb-sep{ opacity: .5; margin: 0 .2em; }

/* ---------- Seitenkopf ---------- */
.ss-phero{ padding-top: clamp(24px, 4vw, 56px); padding-bottom: clamp(40px, 6vw, 80px); }
.ss-phero::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--ss-topo-sand) center/cover no-repeat;
}
.ss-phero-grid{ display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.ss-phero .ss-lead{ max-width: 640px; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-meta{ font-size: .9rem; font-weight: 700; color: var(--ss-aare-d); margin-top: .4em; }
.ss-phero-aside{ display: flex; flex-direction: column; align-items: center; gap: 0; }
.ss-phero-aside .ss-shot{ max-width: 420px; }
.ss-phero-aside .ss-cloud{ margin-top: -26px !important; position: relative; z-index: 2; max-width: 440px; }
.ss-phero-s{ padding-bottom: clamp(24px, 3vw, 40px); }
.ss-phero-s h1{ margin-top: .2em !important; }

/* Organische Fläche mit grossem Icon */
.ss-blob{
  width: min(300px, 72%); aspect-ratio: 1 / 1; display: grid; place-items: center;
  border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%;
  background: var(--ss-aare); color: #fff;
  box-shadow: 22px 26px 0 -2px var(--ss-gelb-l);
  animation: ss-morph 16s ease-in-out infinite alternate;
}
.ss-blob .ss-ico{ width: 46%; height: 46%; margin: 0; background: none !important; color: inherit !important; border-radius: 0; }
.ss-blob .ss-ico svg{ width: 100%; height: 100%; stroke-width: 1.4; }
.ss-blob-park{ background: var(--ss-park); color: var(--ss-night); box-shadow: 22px 26px 0 -2px var(--ss-aare-l); }
.ss-blob-gelb{ background: var(--ss-gelb); color: var(--ss-night); box-shadow: 22px 26px 0 -2px var(--ss-aare-l); }
.ss-blob-night{ background: var(--ss-night); color: var(--ss-gelb); }
.ss-blob-sand{ background: var(--ss-sand-d); color: var(--ss-night); box-shadow: 22px 26px 0 -2px var(--ss-park-l); }

/* ---------- Text in zwei Spalten ---------- */
.ss-cols{ display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(24px, 5vw, 80px); align-items: start; }
.ss-cols-head{ position: sticky; top: 120px; }
.ss-cols-head h2{ margin-top: .3em !important; }

.ss-prose{ font-size: 1.05rem; }
.ss-prose-narrow{ max-width: 820px; }
.ss-prose h3{ margin-top: 1.4em !important; }
.ss-prose h3:first-child{ margin-top: 0 !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-prose a:not(.ss-btn),:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-prose a:not(.wp-block-button__link){ color: var(--ss-aare-d) !important; font-weight: 700; border-bottom: 2px solid var(--ss-gelb); }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-prose a:not(.ss-btn):hover,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-prose a:not(.wp-block-button__link):hover{ border-bottom-color: var(--ss-aare); }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-intro-txt{ max-width: 760px; font-size: 1.08rem; margin-bottom: 1.8em; }

/* Liste mit Wegpunkten */
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-pinlist{ list-style: none !important; margin: 1.2em 0 !important; padding: 0 !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-pinlist li{ position: relative; margin: 0 0 .7em !important; padding-left: 2em; line-height: 1.55; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-pinlist li::before{
  content: ""; position: absolute; left: 0; top: .28em; width: 1em; height: 1em; border-radius: 50%;
  background: #fff; border: 4px solid var(--ss-gelb);
}

/* ---------- Karten ---------- */
.ss-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: 1.6em; }
.ss-cards-2{ grid-template-columns: repeat(2, 1fr); }
.ss-cards-4{ grid-template-columns: repeat(4, 1fr); }
.ss-cards-5{ grid-template-columns: repeat(5, 1fr); }
.ss-card{
  position: relative; padding: clamp(24px, 2.6vw, 34px);
  background: var(--ss-aare-l); border-radius: 40px 40px 110px 40px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.ss-card:hover{ transform: translateY(-6px); box-shadow: var(--ss-shadow); }
.ss-card h3{ font-size: 1.15rem !important; }
.ss-card p{ font-size: .98rem; }
.ss-card p:last-child{ margin-bottom: 0; }
.ss-card .ss-ico{ width: 56px; height: 56px; }
.ss-card .ss-ico svg{ width: 27px; height: 27px; }
.ss-card:nth-child(6n+2){ background: var(--ss-park-l); border-radius: 40px 110px 40px 40px; }
.ss-card:nth-child(6n+2) .ss-ico{ background: var(--ss-park-d); color: var(--ss-night); }
.ss-card:nth-child(6n+3){ background: var(--ss-gelb-l); border-radius: 40px 40px 40px 110px; }
.ss-card:nth-child(6n+3) .ss-ico{ background: var(--ss-aare); }
.ss-card:nth-child(6n+4){ background: var(--ss-sand); border-radius: 110px 40px 40px 40px; }
.ss-card:nth-child(6n+4) .ss-ico{ background: var(--ss-night); color: #fff; }
.ss-card:nth-child(6n+5){ background: #fff; border-radius: 40px 110px 40px 110px; box-shadow: 0 18px 40px -26px rgba(23,50,63,.35); }
.ss-card:nth-child(6n+5) .ss-ico{ background: var(--ss-gelb); color: var(--ss-night); }
.ss-card:nth-child(6n){ background: var(--ss-sand-l); border-radius: 110px 40px 110px 40px; }
.ss-card:nth-child(6n) .ss-ico{ background: var(--ss-park); color: var(--ss-night); }

:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-num{
  display: inline-flex; align-items: center; gap: .4em; margin-bottom: 1em;
  padding: .35em .9em; border-radius: 999px; background: var(--ss-night); color: var(--ss-gelb);
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.ss-card-num .ss-num .ss-rate{ margin: 0; }

/* ---------- Zeigt / zeigt nicht ---------- */
.ss-compare{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }
.ss-yes,.ss-no{ padding: clamp(28px, 3.4vw, 46px); }
.ss-yes{ background: var(--ss-park-l); border-radius: 48px 130px 48px 48px; }
.ss-no{ background: var(--ss-sand); border-radius: 130px 48px 48px 48px; }
.ss-compare h3{ font-size: 1.3rem !important; margin-bottom: .9em !important; }
.ss-compare ul{ list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ss-compare li{ position: relative; margin: 0 0 .8em !important; padding-left: 2.2em; line-height: 1.5; }
.ss-compare li::before{
  content: ""; position: absolute; left: 0; top: .1em; width: 1.45em; height: 1.45em; border-radius: 50%;
  background: var(--ss-aare) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
.ss-no li::before{
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9M16.5 7.5l-9 9' fill='none' stroke='%2317323F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/62% no-repeat;
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-hint{
  max-width: 860px; margin: 1.8em 0 0; padding: 1.1em 1.5em;
  background: rgba(255,255,255,.7); border-left: 5px solid var(--ss-gelb); border-radius: 0 24px 24px 0;
}

/* ---------- Vorgehen mit vier Schritten ---------- */
.ss-steps-4{ --g: clamp(14px, 1.8vw, 22px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-steps-4::before{ width: calc((100% + var(--g)) * 3 / 4); }
.ss-steps-4 .ss-step-card{ padding: clamp(20px, 2vw, 26px); }
.ss-steps-4 .ss-step-card h3{ font-size: 1.12rem !important; }
.ss-steps-4 .ss-step-card p{ font-size: .96rem; }
.ss-night:has(.ss-steps-4){ padding-left: clamp(24px, 4vw, 56px); padding-right: clamp(24px, 4vw, 56px); }
.ss-cards-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-cards-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ss-cards-5 .ss-card,.ss-cards-4 .ss-card{ padding: clamp(20px, 2vw, 28px); }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-step-card,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-card{ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.ss-s4 .ss-step-card{ border-radius: 40px 40px 100px 40px; }
.ss-s4 .ss-ico{ background: var(--ss-sand); color: var(--ss-night); }
.ss-night > p{ max-width: 820px; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-big{ font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: #fff !important; max-width: 920px; }

/* ---------- FAQ ---------- */
.ss-faq details{
  background: #fff; border-radius: 26px; margin-bottom: 12px;
  box-shadow: 0 14px 30px -24px rgba(23,50,63,.5);
}
.ss-faq summary{
  position: relative; list-style: none; cursor: pointer;
  padding: 1.1em 3.4em 1.1em 1.5em; font-weight: 800; color: var(--ss-night); line-height: 1.35;
}
.ss-faq summary::-webkit-details-marker{ display: none; }
.ss-faq summary::after{
  content: "+"; position: absolute; right: 1.1em; top: 50%; transform: translateY(-50%);
  width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center;
  background: var(--ss-gelb-l); color: var(--ss-night); font-size: 1.1rem; transition: transform .25s ease;
}
.ss-faq details[open] summary::after{ content: "–"; background: var(--ss-gelb); }
.ss-faq details p{ padding: 0 1.5em 1.3em; margin: 0; }

/* ---------- Weitere Leistungen ---------- */
.ss-related{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: 1.4em; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-rel{
  display: flex; gap: 16px; align-items: flex-start; padding: 24px;
  background: #fff; border-radius: 34px 34px 34px 90px; color: var(--ss-text) !important;
  box-shadow: 0 18px 40px -28px rgba(23,50,63,.45);
  transition: transform .3s ease, box-shadow .3s ease;
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-rel:hover{ transform: translateY(-5px); box-shadow: var(--ss-shadow); }
.ss-rel .ss-ico{ flex: 0 0 auto; width: 50px; height: 50px; margin: 0; }
.ss-rel .ss-ico svg{ width: 24px; height: 24px; }
.ss-rel strong{ display: block; color: var(--ss-night); font-size: 1.05rem; line-height: 1.3; margin-bottom: .3em; }
.ss-rel small{ display: block; font-size: .92rem; line-height: 1.45; }
.ss-rel:nth-child(2) .ss-ico{ background: var(--ss-park-d); color: var(--ss-night); }
.ss-rel:nth-child(3) .ss-ico{ background: var(--ss-gelb); color: var(--ss-night); }
.ss-rel-sec .ss-more{ margin-top: 1.6em; }

/* ---------- Leistungs-Kacheln: Links ---------- */
.ss-tile .ss-note{ margin: 1.2em 0 0 !important; display: flex; flex-wrap: wrap; gap: .5em; }
.ss-tile:not(.ss-t3) .ss-note a{ background: rgba(23,50,63,.08); color: var(--ss-night) !important; }
.ss-tile .ss-stretch::before{ content: ""; position: absolute; inset: 0; z-index: 1; }
.ss-t3 > .ss-note{ position: static; }
.ss-tile .ss-note-2{ position: relative; z-index: 2; }
.ss-tile:hover .ss-note a.ss-stretch::after{ transform: translateX(4px); }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-more-c{ text-align: center; margin-top: 2.2em; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-more-proj{ position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 72px); }

/* ---------- Abbildungen ---------- */
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-fig{ margin: 0; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-fig img{
  width: 100%; height: auto; border-radius: 30px; background: #fff;
  box-shadow: 0 24px 46px -30px rgba(23,50,63,.5);
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-fig figcaption{ margin-top: .7em; font-size: .86rem; line-height: 1.45; color: var(--ss-text); }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-fig-wide{ margin: 2em 0; }
.ss-figs{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 32px); margin: 2em 0; }
.ss-figs-3{ grid-template-columns: repeat(3, 1fr); }

.ss-media{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4.5vw, 64px); align-items: center; margin: clamp(32px, 4vw, 56px) 0; }
.ss-media-r > .ss-fig{ order: 2; }
.ss-media-top{ align-items: start; }
.ss-media .ss-prose .ss-tag{ margin-bottom: .2em; }

/* Kennzahlen */
.ss-facts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 22px); margin: 2em 0 0; }
.ss-facts > div{ background: var(--ss-aare-l); border-radius: 30px 30px 30px 80px; padding: 22px 24px; }
.ss-facts > div:nth-child(2){ background: var(--ss-park-l); border-radius: 30px 80px 30px 30px; }
.ss-facts > div:nth-child(3){ background: var(--ss-gelb-l); border-radius: 30px 30px 80px 30px; }
.ss-facts > div:nth-child(4){ background: var(--ss-sand); border-radius: 80px 30px 30px 30px; }
.ss-facts strong{ display: block; color: var(--ss-night); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-bottom: .2em; }
.ss-facts span{ display: block; font-size: .9rem; line-height: 1.4; }
.ss-facts-2{ grid-template-columns: repeat(2, 1fr); margin: 0; }
.ss-facts-s{ grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1em 0 1.2em; }
.ss-facts-s > div{ padding: 14px 14px; border-radius: 22px !important; }
.ss-facts-s strong{ font-size: 1.35rem; }
.ss-facts-s span{ font-size: .78rem; }

/* Zitat,Merksatz,Stichworte */
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-quote{
  margin: 1.6em 0 0; padding: 1.5em 1.7em; background: #fff;
  border-radius: 34px 34px 34px 100px; color: var(--ss-night); font-size: 1.08rem; font-weight: 600; line-height: 1.55;
  box-shadow: 0 18px 40px -28px rgba(23,50,63,.45);
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-merke{ margin: 1.4em 0; padding: 1em 1.4em; background: var(--ss-gelb-l); border-radius: 24px; color: var(--ss-night); }
.ss-projects .ss-merke{ background: #fff; border-left: 5px solid var(--ss-gelb); border-radius: 0 24px 24px 0; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-keys{ font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ss-aare-d); line-height: 1.7; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-keys-n{ color: var(--ss-gelb) !important; margin: 1.2em 0 0; }

/* Schwerpunkte S1–S3 */
.ss-focus{ position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 72px); }
.ss-focus-head{ display: flex; align-items: center; gap: 18px; }
.ss-focus-head h3{ margin: 0 0 .3em !important; font-size: clamp(1.25rem, 2vw, 1.55rem) !important; }
.ss-focus-id{
  flex: 0 0 auto; width: 70px; height: 70px; display: grid; place-items: center;
  border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: var(--ss-night); color: var(--ss-gelb);
  font-weight: 800; font-size: 1.35rem;
}
.ss-focus .ss-media{ margin-top: 1.6em; }

/* Bewertung */
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-rate{
  display: inline-block; padding: .3em .85em; border-radius: 999px; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; vertical-align: middle;
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-rate-crit{ background: var(--ss-night); color: var(--ss-gelb) !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-rate-mid{ background: var(--ss-gelb-l); color: var(--ss-night) !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-rate-ok{ background: var(--ss-aare-l); color: var(--ss-aare-d) !important; }
.ss-num .ss-rate-crit{ background: var(--ss-gelb); color: var(--ss-night) !important; }

.ss-scale{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.ss-scale > div{ padding: 24px 26px; border-radius: 34px; background: #fff; }
.ss-scale b{
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; margin-bottom: .7em;
  font-size: 1.5rem; font-weight: 800;
}
.ss-scale-ok b{ background: var(--ss-aare); color: #fff; }
.ss-scale-mid b{ background: var(--ss-gelb); color: var(--ss-night); }
.ss-scale-crit b{ background: var(--ss-night); color: var(--ss-gelb); }
.ss-scale p{ margin: 0; font-size: .96rem; }

/* SWOT */
.ss-swot{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); position: relative; z-index: 1; }
.ss-swot > div{ padding: 26px; border-radius: 40px 40px 40px 110px; background: #fff; }
.ss-swot b{
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: .6em;
  border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; font-size: 1.4rem; font-weight: 800;
}
.ss-sw-s b{ background: var(--ss-aare); color: #fff; }
.ss-sw-w b{ background: var(--ss-sand-d); color: var(--ss-night); }
.ss-sw-o b{ background: var(--ss-park); color: var(--ss-night); }
.ss-sw-t b{ background: var(--ss-gelb); color: var(--ss-night); }
.ss-swot ul{ list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ss-swot li{ margin: 0 0 .45em !important; padding-left: 1.1em; position: relative; font-size: .96rem; line-height: 1.45; }
.ss-swot li::before{ content: ""; position: absolute; left: 0; top: .55em; width: .45em; height: .45em; border-radius: 50%; background: var(--ss-gelb); }

/* Zeitachse / Phasen */
.ss-phases{ --g: clamp(16px, 2.4vw, 30px); position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); margin-top: 1.6em; }
.ss-phases::before{ content: ""; position: absolute; left: 30px; top: 21px; width: calc((100% + var(--g)) * 2 / 3); border-top: 3px dotted var(--ss-gelb); }
.ss-phase{ position: relative; background: #fff; border-radius: 40px 40px 40px 100px; padding: 0 clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px); padding-top: 0; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-year{
  position: relative; z-index: 1; display: inline-block; margin: 0 0 1em; padding: .45em 1.1em; border-radius: 999px;
  background: var(--ss-gelb); color: var(--ss-night); font-weight: 800; box-shadow: 0 0 0 7px rgba(245,185,33,.22);
}
.ss-phase p{ margin: 0; font-size: .97rem; }
.ss-phases-n .ss-phase{ background: rgba(255,255,255,.08); }
.ss-phases-n h3{ color: #fff !important; }

/* ---------- Kontakt ---------- */
.ss-contact-grid{ display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(18px, 3vw, 36px); align-items: start; }
.ss-contact-card{
  position: relative; overflow: hidden; background: var(--ss-aare); color: #fff;
  border-radius: 48px 48px 48px 130px; padding: clamp(30px, 4vw, 52px);
}
.ss-contact-card::before{ content: ""; position: absolute; inset: 0; background: var(--ss-topo-cta) center/cover no-repeat; }
.ss-contact-card > *{ position: relative; }
.ss-contact-card h2{ color: #fff !important; margin-top: .3em !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-contact-card .ss-kicker{ background: rgba(255,255,255,.14); color: #fff !important; box-shadow: none; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-contact-list{ list-style: none !important; margin: 0 !important; padding: 0 !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-contact-list li,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-contact-list .ss-contact-list-item{ display: flex; gap: 14px; align-items: center; margin: 0 0 1.1em !important; }
.ss-contact-list .ss-ico{ flex: 0 0 auto; width: 48px; height: 48px; margin: 0; background: rgba(255,255,255,.16) !important; }
.ss-contact-list .ss-ico svg{ width: 22px; height: 22px; }
.ss-contact-list strong{ display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-contact-list a,.ss-contact-list span{ color: #fff !important; font-weight: 700; font-size: 1.05rem; }
.ss-form-card{ background: #fff; border-radius: 48px 130px 48px 48px; padding: clamp(30px, 4vw, 52px); box-shadow: var(--ss-shadow); }
.ss-form-card h2{ margin-top: .3em !important; }

/* Fluent Forms im Stil der Seite */
.ss-form .ff-el-group{ margin-bottom: 18px !important; }
.ss-form .ff-el-input--label label,.ss-form label{ font-weight: 700 !important; color: var(--ss-night) !important; font-size: .92rem !important; }
.ss-form .ff-el-form-control,.ss-form input[type="text"],.ss-form input[type="email"],.ss-form input[type="tel"],.ss-form textarea,.ss-form select{
  width: 100%; border: 2px solid var(--ss-sand) !important; border-radius: 18px !important; padding: .85em 1.05em !important;
  font: inherit !important; color: var(--ss-night) !important; background: var(--ss-paper) !important; box-shadow: none !important;
}
.ss-form .ff-el-form-control:focus,.ss-form textarea:focus,.ss-form input:focus{ border-color: var(--ss-aare) !important; outline: none; background: #fff !important; }
.ss-form .ff-btn-submit,.ss-form button[type="submit"]{
  background: var(--ss-gelb) !important; border: 2px solid var(--ss-gelb) !important; color: var(--ss-night) !important;
  border-radius: 999px !important; padding: .95em 1.8em !important; font-weight: 800 !important; font-size: 1rem !important;
  box-shadow: 0 14px 26px -14px rgba(245,185,33,.95) !important; cursor: pointer;
}
.ss-form .ff-btn-submit:hover,.ss-form button[type="submit"]:hover{ background: var(--ss-night) !important; border-color: var(--ss-night) !important; color: #fff !important; }
.ss-form .ff-message-success{ border-radius: 18px; background: var(--ss-park-l); border: 0; color: var(--ss-night); }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-form-fallback{ margin-bottom: .6em; }

/* ---------- Rechtliches und freie Inhalte ---------- */
.ss-legal .ss-prose{ max-width: 820px; }
.ss-legal h2{ font-size: 1.35rem !important; margin: 1.8em 0 .5em !important; }
.ss-legal h2:first-child{ margin-top: 0 !important; }
.ss-prose-wp ul{ padding-left: 1.2em; }
.ss-prose-wp img{ border-radius: 24px; }

/* ---------- Startseite: Region Bern ---------- */
.ss-home-region{ padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 96px); }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .ss-phero-grid{ grid-template-columns: 1fr; }
  .ss-phero-aside{ flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 24px; }
  .ss-phero-aside .ss-cloud{ margin-top: 0 !important; }
  .ss-blob{ width: 200px; }
  .ss-cards,.ss-cards-4,.ss-cards-5{ grid-template-columns: repeat(2, 1fr); }
  .ss-steps-4{ grid-template-columns: repeat(2, 1fr); }
  .ss-steps-4::before{ display: none; }
  .ss-swot{ grid-template-columns: repeat(2, 1fr); }
  .ss-facts{ grid-template-columns: repeat(2, 1fr); }
  .ss-related{ grid-template-columns: 1fr 1fr; }
  .ss-contact-grid{ grid-template-columns: 1fr; }
  .ss-cols-head{ position: static; }
}

/* ---------- Handy ---------- */
@media (max-width: 780px) {
  .ss-cols,.ss-compare,.ss-media,.ss-figs,.ss-figs-3,.ss-scale,.ss-related,.ss-cards,.ss-cards-2,.ss-cards-3,.ss-cards-4,.ss-cards-5,.ss-swot,.ss-phases{ grid-template-columns: 1fr; }
  .ss-media-r > .ss-fig{ order: 0; }
  .ss-steps-4{ grid-template-columns: 1fr; }
  .ss-steps-4::before{ display: block; width: auto; }
  .ss-phases::before{ left: 30px; top: 20px; bottom: 20px; width: auto; border-top: 0; border-left: 3px dotted var(--ss-gelb); }
  .ss-phase{ margin-left: 0; }
  .ss-facts-s{ grid-template-columns: repeat(3, 1fr); }
  .ss-yes,.ss-no{ border-radius: 40px 90px 40px 40px; }
  .ss-no{ border-radius: 90px 40px 40px 40px; }
  .ss-contact-card,.ss-form-card{ border-radius: 40px 40px 40px 90px; }
  .ss-blob{ width: 150px; box-shadow: 14px 16px 0 -2px var(--ss-gelb-l); }
  .ss-phero-aside .ss-cloud{ justify-content: center; }
  .ss-card:hover,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-rel:hover{ transform: none; }
  .ss-focus-head{ align-items: flex-start; }
  .ss-focus-id{ width: 56px; height: 56px; font-size: 1.1rem; }
}

/* ---------- 2.1: Titelbild,schmale Abbildung,Weg der nächsten Schritte ---------- */
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-cover{ margin: 0; width: min(420px, 100%); transform: rotate(2deg); }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-cover img{
  width: 100%; height: auto; border-radius: 34px;
  box-shadow: 22px 26px 0 -2px var(--ss-gelb-l), 0 30px 60px -30px rgba(23,50,63,.55);
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-fig-narrow{ max-width: 460px; justify-self: center; }

:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path{
  --g: clamp(14px, 2vw, 24px);
  position: relative; list-style: none !important; margin: 1.8em 0 0 !important; padding: 0 !important;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g);
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path::before{
  content: ""; position: absolute; left: 27px; top: 26px; width: calc((100% + var(--g)) * 3 / 4);
  border-top: 3px dotted var(--ss-gelb);
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path li,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-item{ position: relative; margin: 0 !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-pin{ margin-bottom: 1.1em; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path li > div,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-item > div{
  background: #fff; border-radius: 34px 34px 34px 90px; padding: clamp(20px, 2.2vw, 28px);
  box-shadow: 0 18px 40px -28px rgba(23,50,63,.45); height: calc(100% - 54px - 1.1em);
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path li:nth-child(2) > div,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-item:nth-child(2) > div{ border-radius: 34px 90px 34px 34px; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path li:nth-child(3) > div,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-item:nth-child(3) > div{ border-radius: 34px 34px 90px 34px; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path li:nth-child(4) > div,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-item:nth-child(4) > div{ border-radius: 90px 34px 34px 34px; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path h3{ font-size: 1.12rem !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path p{ margin: 0; font-size: .96rem; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path a{ color: var(--ss-aare-d) !important; font-weight: 700; border-bottom: 2px solid var(--ss-gelb); }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-now > div{ background: var(--ss-night); color: #d5e3e8; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-now h3{ color: #fff !important; }
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-now .ss-pin{ background: var(--ss-aare); color: #fff; box-shadow: 0 0 0 8px rgba(61,140,138,.22); }

@media (max-width: 1000px) {
  :is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path::before{ display: none; }
  :is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-cover{ transform: none; width: min(320px, 100%); }
}
@media (max-width: 780px) {
  :is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path{ grid-template-columns: 1fr; gap: 18px; }
  :is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path::before{ display: block; left: 26px; top: 30px; bottom: 30px; width: auto; border-top: 0; border-left: 3px dotted var(--ss-gelb); }
  :is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path li,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-item{ display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start; }
  :is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-pin{ margin: 0; }
  :is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path li > div,:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-path .ss-path-item > div{ height: auto; }
  :is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-cover{ width: min(260px, 80%); }
}
:is(.ss,.wp-block-post-content,:where(.is-preview-mode:not(:has(.site-header)):not(:has(.site-footer)))) .ss-cards-5 .ss-card h3{ font-size: 1.02rem !important; }