/* ==========================================================================
   Street Smarts – eigene Erweiterungen (über dem Webflow-CSS)
   ========================================================================== */
/* Echte Jost-Schrift für den Hero (im Webflow-CSS heisst "Jost" eigentlich Overused Grotesk) */
@font-face { font-family: "STSM Jost"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "STSM Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "STSM Jost"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/jost-latin-700-normal.woff2") format("woff2"); }

:root {
  --stsm-violet: #461429;
  --stsm-violet-light: #7c2b52;
  --stsm-pink: #e94591;
  --stsm-cream: #f5f1ec;
  --stsm-nav-logo-h: 64px;
  --stsm-nav-pad: 1.9rem;
  --stsm-ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- Navigation: anfangs transparent, beim Scrollen violett ---------- */
.navbar, .navbar .padding-global.header { background-color: transparent; border-color: transparent; transition: background-color .4s ease, border-color .4s ease; }
html.stsm-nav-compact .navbar,
.navbar:has(.w-nav-button.w--open) { background-color: var(--stsm-violet); }

/* ---------- Navigation: grosses Logo, schrumpft beim Scrollen ---------- */
.navbar .nav-content-wrapper { padding-top: var(--stsm-nav-pad); padding-bottom: var(--stsm-nav-pad); transition: padding .4s var(--stsm-ease); }
.navbar .logo-wrap { height: auto; overflow: visible; }
.stsm-logo { display: block; height: var(--stsm-nav-logo-h); width: auto; transition: height .4s var(--stsm-ease); }
.navbar .nav-component-grid { align-items: center; }
html.stsm-nav-compact { --stsm-nav-logo-h: 38px; --stsm-nav-pad: .5rem; }
@media screen and (max-width: 991px) {
  :root { --stsm-nav-logo-h: 46px; --stsm-nav-pad: .75rem; }
  html.stsm-nav-compact { --stsm-nav-logo-h: 32px; --stsm-nav-pad: .4rem; }
}

/* ---------- Hero Startseite: wechselnde Thesen ---------- */
.stsm-hero {
  position: relative;
  overflow: hidden;
  color: var(--stsm-cream);
  background: linear-gradient(125deg, #84305a 0%, #6a2346 32%, #521a35 62%, #3f1226 100%);
}
.stsm-hero::before { /* langsam wanderndes Licht, wie in den Plakaten */
  content: ""; position: absolute; inset: -30%;
  background: radial-gradient(40% 45% at 20% 15%, rgba(233, 69, 145, .22), transparent 70%);
  animation: stsm-drift 24s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes stsm-drift { from { transform: translate(0, 0); } to { transform: translate(18%, 12%); } }

.stsm-hero__inner {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(10.5rem, 21vh, 15rem); padding-bottom: 2.5rem;
  padding-left: clamp(1.5rem, 7vw, 8rem); padding-right: clamp(1.5rem, 4vw, 4rem);
}
.stsm-hero__inner > .container-large { width: 100%; max-width: none; margin: 0; }
.stsm-hero__stage { display: grid; }
.stsm-slide { grid-area: 1 / 1; align-self: center; visibility: hidden; }
.stsm-slide.is-active, .stsm-slide.is-leaving { visibility: visible; }

.stsm-slide__title {
  margin: 0;
  font-family: "STSM Jost", "Futura", "Century Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 9rem); /* Startwert, wird per JS pro These eingepasst */
  line-height: .96;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--stsm-pink);
}
.stsm-slide__title .l { display: block; overflow: hidden; padding-bottom: .04em; }
.stsm-slide__title .l > span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--stsm-ease); }
.stsm-slide__neg {
  margin: clamp(1rem, 2.2vw, 2rem) 0 0;
  font-family: "STSM Jost", "Futura", sans-serif; font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.9rem); line-height: 1.2;
  color: var(--stsm-pink);
}
.stsm-slide__res {
  display: flex; gap: .9em; align-items: flex-start;
  margin: clamp(1.5rem, 3.5vw, 3.5rem) 0 0; max-width: 34em;
  font-family: "STSM Jost", "Futura", sans-serif; font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.65rem); line-height: 1.3;
  color: var(--stsm-cream);
}
.stsm-slide__res svg { flex: none; width: 1.15em; height: 1.15em; margin-top: .1em; }
.stsm-slide__neg, .stsm-slide__res { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s var(--stsm-ease); }

/* Einblenden: Zeilen fahren hoch, dann "Daran liegt's nicht.", dann Auflösung */
.stsm-slide.is-active .l > span { transform: none; }
.stsm-slide.is-active .l:nth-child(2) > span { transition-delay: .1s; }
.stsm-slide.is-active .l:nth-child(3) > span { transition-delay: .2s; }
.stsm-slide.is-active .stsm-slide__neg { opacity: 1; transform: none; transition-delay: 1.1s; }
.stsm-slide.is-active .stsm-slide__res { opacity: 1; transform: none; transition-delay: 1.8s; }
/* Ausblenden: alles zusammen nach oben weg */
.stsm-slide.is-leaving { opacity: 0; transform: translateY(-24px); transition: opacity .6s ease, transform .6s ease; }
.stsm-slide.is-leaving .l > span { transform: none; }
.stsm-slide.is-leaving .stsm-slide__neg, .stsm-slide.is-leaving .stsm-slide__res { opacity: 1; transform: none; }

@media screen and (max-width: 767px) {
  .stsm-slide__res br { display: none; }
  .stsm-hero__inner { padding-top: 8.5rem; padding-bottom: 3rem; }
  .stsm-slide__neg { font-size: 1.6rem; }
}

/* Fortschritt / Navigation zwischen den Thesen */
.stsm-hero__dots { display: flex; gap: .5rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.stsm-hero__dot {
  appearance: none; border: 0; padding: .6rem 0; background: none; cursor: pointer;
  width: clamp(1.75rem, 4vw, 3rem);
}
.stsm-hero__dot span { display: block; height: 3px; border-radius: 3px; background: rgba(245, 241, 236, .25); overflow: hidden; }
.stsm-hero__dot span::after { content: ""; display: block; height: 100%; width: 100%; background: var(--stsm-cream); transform: scaleX(0); transform-origin: left; }
.stsm-hero__dot.is-done span::after { transform: scaleX(1); }
.stsm-hero__dot.is-active span::after { animation: stsm-progress var(--stsm-slide-ms, 9000ms) linear forwards; }
.stsm-hero.is-paused .stsm-hero__dot.is-active span::after { animation-play-state: paused; }
.stsm-hero__dot:focus-visible { outline: 2px solid var(--stsm-cream); outline-offset: 3px; }
@keyframes stsm-progress { to { transform: scaleX(1); } }
.stsm-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .stsm-hero::before { animation: none; }
  .stsm-slide__title .l > span, .stsm-slide__neg, .stsm-slide__res { transform: none !important; transition: opacity .4s ease !important; }
  .stsm-slide__title .l > span { opacity: 0; }
  .stsm-slide.is-active .l > span, .stsm-slide.is-leaving .l > span { opacity: 1; }
  .stsm-slide.is-leaving { transform: none; }
}

/* ---------- Navigationspunkte: Bubble nur beim Mouse-Over ---------- */
.navbar .nav-link-2 { background-color: transparent; border-color: transparent; transition: background-color .25s ease, border-color .25s ease; }
.navbar .nav-link-2:hover, .navbar .nav-link-2:focus-visible { background-color: #e94591; border-color: #e94591; }

/* ---------- Navigation: Logo links, Navigationspunkte rechtsbündig ---------- */
@media screen and (min-width: 992px) {
  .navbar #w-node-e9ae66d6-ecec-1e52-f05b-5f36af3f8a29-7b6b9e6f { grid-area: 1 / 1 / 2 / 2; place-self: center start; }
  .navbar .nav-menu-content { justify-content: flex-end; grid-column-gap: .25rem; column-gap: .25rem; padding-left: 170px; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar .nav-link-2 { padding-left: .8rem; padding-right: .8rem; }
}
/* Mobiles Menü in Markenfarbe statt Dunkelgrau, über die ganze Höhe */
.navbar .navbar-background { background-color: var(--stsm-violet); }
@media screen and (max-width: 991px) {
  .navbar .navbar-background-wrap, .navbar .navbar-background { min-height: 100vh; min-height: 100svh; }
}

/* ---------- Zeilenabstände: Headlines und Fliesstext etwas kompakter ---------- */
:root {
  --_typography---h1--line-height: 90%;
  --_typography---h2--line-height: 90%;
  --_typography---h3--line-height: 100%;
  --_typography---h4--line-height: 110%;
  --_typography---h5--line-height: 110%;
  --_typography---h6--line-height: 110%;
  --_typography---text-size--xhuge-line-height: 135%;
  --_typography---text-size--huge-line-height: 130%;
  --_typography---text-size--xlarge-line-height: 122%;
}

/* ---------- Karten (kein Link): Hover in Corporate-Orange statt Pink ---------- */
/* Regel: Pink ist für Links reserviert */
.business-clever-wrap:not(.wege):not(.last):hover { background-color: #f1896b; border-color: #f1896b; }
.business-clever-wrap:not(.wege):not(.last):hover .text-size-medium,
.business-clever-wrap:not(.wege):not(.last):hover .value-title-sub,
.business-clever-wrap:not(.wege):not(.last):hover .text-color-alternate { color: var(--stsm-violet); }
.business-clever-wrap { transition: background-color .3s ease, border-color .3s ease; }
.business-clever-wrap .text-size-medium, .business-clever-wrap .value-title-sub { transition: color .3s ease; }

/* Karten-Titel: fett und mit mehr Abstand zum kleinen Titel darüber */
.business-clever-item .value-title-sub { font-weight: 700; margin-top: .6rem; }

/* ---------- Karten: kleine Titel in Corporate-Orange ---------- */
.text-size-medium.kein-berater, .text-size-medium.kein-berater-copy { color: #f1896b; }
/* Etwas mehr Abstand zwischen Intro-Text und den drei Karten */
.about-content-wrapper .values-component-grid.business-clever { margin-top: 2.5rem; }

/* ---------- Changes-Dokument (Sept. 2026) ---------- */
/* Keine Wörter mitten im Wort trennen (war "break-all"); lange Wörter sauber mit Bindestrich trennen */
.value-title-sub, .value-title, .heading-style-h2, .header-title { word-break: normal; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }

/* Unterseiten-Header: Text wurde unten abgeschnitten, Headline lief bis an den Rand */
.section-home-header .header-content-wrap { bottom: 0; padding-bottom: 4rem; }
.section-home-header .header-title { padding-left: clamp(1rem, 4vw, 4rem); padding-right: clamp(1rem, 4vw, 4rem); box-sizing: border-box; }
@media screen and (max-width: 479px) {
  .section-home-header .header-title { font-size: 11vw; }
}

/* Mobile: mehr Abstand zwischen den Sektionen */
@media screen and (max-width: 767px) {
  .padding-section-large { padding-top: 6rem; padding-bottom: 6rem; }
  /* Beige Boxen: mehr Innenabstand links, rechts und oben */
  section:has(> .white-background) > .padding-global { padding-left: 2.25rem; padding-right: 2.25rem; }
  .section-about-content:has(> .white-background) .padding-section-large { padding-top: 4.5rem; }
}
@media screen and (max-width: 479px) {
  .padding-section-large { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .padding-section-large.home { padding-top: 6rem; padding-bottom: 5.5rem; }
}
/* Kontakt-Karten: lange E-Mail-Adresse passt auf dem Handy */
@media screen and (max-width: 479px) {
  .value-title-sub.align-center.kein-berater { font-size: 1.45rem; overflow-wrap: anywhere; }
}
/* Handy: Inhalts-Headlines so gross, dass auch lange Wörter (Zusammenarbeit, Fehldiagnosen) ganz auf eine Zeile passen */
@media screen and (max-width: 479px) {
  .heading-style-h2 { font-size: 8.8vw; }
}

/* ---------- Zeilenabstand-System ----------
   1. Headlines:                      90 % (siehe Typografie-Variablen oben)
   2. Einleitungs-/Fliesstext:        135 %
   3. Beschreibungen in Elementen:    122 % (Karten, Boxen, Leistungen, Testimonials) */
:root { --stsm-lh-element: 122%; }
.business-clever-wrap p,
.value-content-wrap p,
.service-content-block-3 p,
.testimonial-container p,
.pricing-wrap p,
.text-rich-text p, .text-rich-text li,
.faq-answer { line-height: var(--stsm-lh-element); }

/* ---------- Startseite, Abschnitt "Symptome" ---------- */
.stsm-symptome .values-component-grid { margin-top: 2.5rem; }
.stsm-symptome .value-number { display: none; }
.stsm-symptome .value-title { text-transform: none; color: #fde678; font-size: clamp(1.75rem, 2.4vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; }

/* Einleitungstexte: auch die "-2/-3"-Varianten aus Webflow (hatten fix 150 %) auf 135 % */
:root { --stsm-lh-intro: 135%; }
.text-size-medium-2, .text-size-medium-3, .text-size-regular-2, .text-size-small-2, .text-size-small-3 { line-height: var(--stsm-lh-intro); }

/* ---------- Startseite: "Besser ist kein Gefühl. Besser ist ein Zustand." ---------- */
/* Box exakt so hoch wie eine Zeile (vorher 110 %): keine Ü-Punkte der nächsten Animations-Kopie mehr sichtbar, engerer Zeilenabstand */
.section-home-intro .title-wrap { height: 10vw; }
@media screen and (min-width: 1280px) { .section-home-intro .title-wrap { height: 8rem; } }
@media screen and (min-width: 1440px) { .section-home-intro .title-wrap { height: 9rem; } }
.section-home-intro .heading-wrapper { grid-row-gap: 0; row-gap: 0; }
/* ganze Aussage in Corporate-Violett */
.section-home-intro .heading-item-2.text-color-secondary { color: var(--stsm-violet); }
/* Die vier Begriffe: feste orange Labels, keine Links/Hover */
.section-home-intro .stsm-tag { display: inline-flex; align-items: center; background-color: #f1896b; border: 1px solid #f1896b; border-radius: 100px; padding: .675rem 1.5rem; }
.section-home-intro .stsm-tag .nav-text { color: var(--stsm-cream); font-weight: 700; }
/* Button "Unsere Vorgehensweise": beim Hover helle Schrift */
.section-home-intro .button-wrap.ctabtn .nav-link-2:hover .button-text { color: var(--stsm-cream); }
/* Die vier Begriffe auch auf Tablet/Handy zeigen (Webflow hatte sie ausgeblendet) */
@media screen and (max-width: 991px) {
  .section-home-intro .button-wrap.home { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding-left: 1rem; padding-right: 1rem; }
  .section-home-intro .stsm-tag { padding: .55rem 1.1rem; }
  .section-home-intro .stsm-tag .nav-text { font-size: .85rem; }
}
/* Zweiteilige Aussage: "Besser ist kein Gefühl." violett, "Besser ist ein Zustand." orange */
.section-home-intro .heading-wrapper > .heading-block:nth-child(n+3) .heading-item-2 { color: #f1896b; }
/* Begriffe-Labels in Corporate-Violett (Wunsch 15.10.) */
.section-home-intro .stsm-tag { background-color: var(--stsm-violet); border-color: var(--stsm-violet); }
/* Variante A: "Besser ist kein Gefühl." ausgewaschen (Violett ~35 % auf Warmweiss), "Besser ist ein Zustand." kräftig orange */
.section-home-intro .heading-wrapper > .heading-block:nth-child(-n+2) .heading-item-2 { color: #b9a4a9; }

/* ---------- Startseite, Leistungen: Button rechts unter "Technologie & Digital" ---------- */
.service-content-grid > #w-node-_48ccfcf7-42da-d2c3-0d7f-1dcc65e46e4b-d174a8bf { justify-self: end; align-self: start; }
@media screen and (min-width: 992px) {
  .service-content-grid > #w-node-_48ccfcf7-42da-d2c3-0d7f-1dcc65e46e4b-d174a8bf { grid-column: 2 / 3; grid-row: 3 / 4; }
}

/* ---------- Regel für dunkle Karten: Titel gelb, kleiner Titel gedämpft hell, Text hell; Hover orange mit violetter Schrift ---------- */
.business-clever-wrap:not(.wege):not(.last) .value-title-sub { color: #fde678; }
.business-clever-wrap:not(.wege):not(.last) .text-size-medium.kein-berater,
.business-clever-wrap:not(.wege):not(.last) .text-size-medium.kein-berater-copy { color: rgba(245, 241, 236, .6); }
.business-clever-wrap:not(.wege):not(.last):hover .value-title-sub,
.business-clever-wrap:not(.wege):not(.last):hover .text-size-medium { color: var(--stsm-violet); }

/* Symptome-Karten: ohne Trennlinie, Hover wie oben */
.stsm-symptome .doted-line { display: none; }
.stsm-symptome .value-content-wrap { transition: background-color .3s ease, border-color .3s ease; }
.stsm-symptome .value-content-wrap .value-title, .stsm-symptome .value-content-wrap p { transition: color .3s ease; }
.stsm-symptome .value-content-wrap:hover { background-color: #f1896b; border-color: #f1896b; }
.stsm-symptome .value-content-wrap:hover .value-title,
.stsm-symptome .value-content-wrap:hover p { color: var(--stsm-violet); }
.stsm-symptome .value-content-item { grid-row-gap: 1rem; row-gap: 1rem; }

/* ---------- Buttons im Content: beim Hover über den ganzen Button sofort helle Schrift ---------- */
.main-button .button-text, a.nav-link-2 .button-text, .button-block-2 { transition: color .25s ease; }
.main-button:hover, .main-button:hover .button-text, .main-button:hover .button-text-wrap,
a.nav-link-2:hover .button-text, a.nav-link-2:hover .button-text-wrap,
.button-block-2:hover, .button-block-2:hover * { color: var(--stsm-cream) !important; }

/* ---------- Case-Karten: kein animiertes Logo in der Mitte ---------- */
.case-logo-wrap .case-logo-block { display: none; }
.case-logo-wrap .case-study-overlay { opacity: 0; }
/* Case-Karten: statisches Bild füllt die Fläche */
.video-wrapper .stsm-case-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.stsm-case-media { position: relative; overflow: hidden; }
/* Case-Karten: Kurzbeschreibung neben dem Firmennamen */
.case-study-item .stsm-case-desc { color: rgba(245, 241, 236, .6); }
.case-study-item .stsm-case-desc::before { content: "·"; margin: 0 .6em; color: rgba(245, 241, 236, .4); }
@media screen and (max-width: 767px) {
  .case-study-item:has(.stsm-case-desc) { flex-wrap: wrap; row-gap: .15rem; }
  .case-study-item .stsm-case-desc { flex-basis: 100%; font-size: .8em; line-height: 1.25; }
  .case-study-item .stsm-case-desc::before { content: none; }
}

/* ---------- Kunden & Partner: 2 x 4 Dreh-Karten, verlinkt ---------- */
.pricing-bg { pointer-events: none; }
.stsm-logo-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; width: 100%; }
.stsm-logo-card { display: block; aspect-ratio: 16 / 7; perspective: 900px; }
.stsm-logo-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.stsm-logo-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem 2rem; border-radius: 1.25rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.stsm-logo-front { background-color: #e6d9c9; }
.stsm-logo-back { background-color: #e94591; transform: rotateY(180deg); }
.stsm-logo-face img { max-width: 70%; max-height: 3.5rem; width: auto; height: auto; object-fit: contain; }
.stsm-logo-face img[src*="sirius"] { max-height: 5rem; }
.stsm-logo-face img[src*="fehlmann"] { max-height: 4.5rem; }
.stsm-logo-card:hover .stsm-logo-inner, .stsm-logo-card:focus-visible .stsm-logo-inner, .stsm-logo-card.is-flipped .stsm-logo-inner { transform: rotateY(180deg); }
.stsm-logo-card:focus-visible { outline: 2px solid #e94591; outline-offset: 4px; border-radius: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .stsm-logo-inner { transition: none; } }
@media screen and (max-width: 767px) {
  .stsm-logo-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .stsm-logo-face { padding: 1rem 1.25rem; border-radius: 1rem; }
  .stsm-logo-face img { max-height: 2.5rem; }
  .stsm-logo-face img[src*="sirius"] { max-height: 3.5rem; }
  .stsm-logo-face img[src*="fehlmann"] { max-height: 3rem; }
}

/* Case-Karten: Name und Beschreibung auf einer Zeile */
@media screen and (min-width: 768px) {
  .case-study-item:has(.stsm-case-desc) { flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
  .case-study-item .case-study-text { white-space: nowrap; }
  .case-study-item .stsm-case-desc { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* ---------- Case-Kacheln ---------- */
/* Rahmen in Corporate-Rot, Firmenname fett, keine Mac-Punkte */
.case-study-link { background-color: var(--stsm-violet); border-color: var(--stsm-violet); }
.case-study-item .case-study-text:first-child { font-weight: 700; }
.case-study-wrapper .browser-wrap { display: none; }
/* Pfeil-Bubble: hell mit rotem Pfeil, beim Hover pink mit weissem Pfeil */
.case-arrow-wrap { background-color: rgba(245, 241, 236, .92); border-color: transparent; transition: background-color .3s ease, transform .3s ease; }
.case-arrow { background: url("../images/arrow-violet.svg") center / contain no-repeat; }
.case-arrow > * { opacity: 0; }
img.case-arrow { object-position: -9999px 0; }
.case-study-link:hover .case-arrow-wrap, .case-arrow-wrap:hover { background-color: #e94591; }
.case-study-link:hover img.case-arrow, .case-arrow-wrap:hover img.case-arrow { background: none; object-position: center; }
/* Case-Kacheln: Kopfzeile etwas höher, Unterlängen (g, p) nicht abschneiden */
.case-study-content-grid { padding-top: .35rem; padding-bottom: .55rem; }
.case-study-item .case-study-text { line-height: 1.4; padding-bottom: .1em; }

/* ---------- Kein Grau: auf Hell Corporate-Rot, auf Dunkel hell; zweite Headline-Zeile orange ---------- */
.text-size-regular.text-color-secondary,
.text-size-medium.die-richtigen,
.text-size-medium.homes,
.client-testimonial, .testimonial-text,
.service-title-5.kein-berater,
.text-size-medium.approch,
.text-size-small-2.text-color-alternate,
.award-title, .award-title.unser,
.text-size-regular.aboutuss, .text-size-regular.aboutus,
.form-label { color: var(--stsm-violet); }
.heading-item.text-color-secondary, .heading-item-2.text-color-secondary,
.heading-style-h2.text-color-secondary, .text-color-secondary .gsap_split_letter { color: #f1896b; }
.footer-text, .faq-answer, .text-size-medium.kontakt.contactus { color: var(--stsm-cream); }
/* Textkörper generell nicht dunkelgrau, sondern Corporate-Rot */
body { color: var(--stsm-violet); }

/* ---------- Experten-Netzwerk-Karte ---------- */
.header-title._150 { font-weight: 700; font-size: clamp(5rem, 9vw, 9rem); line-height: .9; }
.pricing-block-2 .feature-content-wrap { grid-row-gap: .5rem; row-gap: .5rem; }
.price-feature-text { color: var(--stsm-cream); }
.text-size-medium.text-align-center.approch, .award-title, .award-title.unser, .text-size-regular.aboutuss { color: var(--stsm-violet) !important; }
.pricing-block-2 .check-icon { color: var(--stsm-cream); }

/* ---------- Kleine Titel in dunklen Karten: Corporate-Orange ---------- */
.business-clever-wrap:not(.wege):not(.last) .text-size-medium.kein-berater,
.business-clever-wrap:not(.wege):not(.last) .text-size-medium.kein-berater-copy { color: #f1896b; }
.business-clever-wrap:not(.wege):not(.last):hover .text-size-medium.kein-berater { color: var(--stsm-violet); }

/* ---------- Drei Wege der Zusammenarbeit ---------- */
.stsm-weg .business-clever-item { height: 100%; }
.stsm-price { margin: auto 0 0; padding-top: 1.25rem; font-weight: 700; color: var(--stsm-cream); transition: color .3s ease; }
.stsm-weg:hover .stsm-price { color: var(--stsm-violet); }
.stsm-wege-cta { display: flex; justify-content: flex-end; margin-top: 1.5rem; }

/* Lange Wörter in Headlines (z. B. ZUSAMMENARBEIT): Schrift verkleinern statt umbrechen */
.heading-style-h2 { overflow-wrap: normal; word-break: keep-all; }
.heading-style-h2 .gsap_split_word { white-space: nowrap; }

/* ---------- Call-to-Action: Verlauf wie im Hero, Schrift weiss ---------- */
.stsm-cta { position: relative; overflow: hidden; background: linear-gradient(125deg, #84305a 0%, #6a2346 32%, #521a35 62%, #3f1226 100%); }
.stsm-cta::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(40% 45% at 20% 15%, rgba(233, 69, 145, .22), transparent 70%); animation: stsm-drift 24s ease-in-out infinite alternate; pointer-events: none; }
.stsm-cta .cta-component, .stsm-cta .cta-wrapper { position: relative; background: transparent; }
.stsm-cta .heading-item, .stsm-cta .heading-item-2, .stsm-cta .text-color-secondary, .stsm-cta h2 { color: #f5f1ec !important; }
@media (prefers-reduced-motion: reduce) { .stsm-cta::before { animation: none; } }
.stsm-cta .cta-component { height: auto !important; }
.stsm-cta .cta-wrapper { height: clamp(560px, 90vh, 900px); }
/* CTA: Headline pink (Test), gleich viel Raum oben und unten, ganzer Kreis sichtbar */
.stsm-cta .heading-item, .stsm-cta .heading-item-2, .stsm-cta .text-color-secondary, .stsm-cta h2 { color: #e94591 !important; }
.stsm-cta .cta-wrapper { height: auto; }
.stsm-cta .cta-content-wrapper { position: relative; inset: auto; height: auto; display: flex; align-items: center; justify-content: center; padding-top: var(--stsm-cta-pad, 12rem); padding-bottom: var(--stsm-cta-pad, 12rem); }
.stsm-cta .cta-content-block { position: relative; }
.stsm-cta .cta-circle { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; }
.stsm-cta .cta-wrapper, .stsm-cta .cta-component { height: auto !important; min-height: 0 !important; }
.stsm-cta .cta-content-wrapper { position: relative !important; height: auto !important; }
.stsm-cta .cta-circle { aspect-ratio: 1 / 1; height: auto !important; }
.stsm-cta, .stsm-cta .padding-global, .stsm-cta .container-large { height: auto !important; min-height: 0 !important; }
.stsm-cta .cta-wrapper { top: 0 !important; }

/* Footer: Logo mit Claim (Wortmarke gleich gross wie vorher), keine Trennlinien */
.footer-logo.stsm-footer-claim { height: 15.75rem; width: auto; }
@media screen and (min-width: 1440px) { .footer-logo.stsm-footer-claim { height: 18.4rem; } }
@media screen and (max-width: 991px) { .footer-logo.stsm-footer-claim { height: 9.2rem; } }
@media screen and (max-width: 767px) { .footer-logo.stsm-footer-claim { height: 6.55rem; } }
@media screen and (max-width: 479px) { .footer-logo.stsm-footer-claim { height: 3.3rem; } }
footer .dividing-line { display: none; }


/* Navigation: oben Logo mit Claim (grösser), beim Scrollen kompakter Balken mit Logo ohne Claim */
:root { --stsm-nav-claim-h: 101px; --stsm-nav-pad: 1.6rem; }
.navbar .logo-wrap { position: relative; }
.stsm-logo-claim { display: block; height: var(--stsm-nav-claim-h); width: auto; transition: height .4s var(--stsm-ease), opacity .3s ease; }
.navbar .stsm-logo.stsm-logo-plain { position: absolute; left: 0; top: 0; height: calc(var(--stsm-nav-claim-h) / 1.3126); opacity: 0; transition: height .4s var(--stsm-ease), opacity .3s ease; }
html.stsm-nav-compact .stsm-logo-claim { position: absolute; left: 0; top: 0; opacity: 0; height: calc(var(--stsm-nav-logo-h) * 1.3126); }
html.stsm-nav-compact .navbar .stsm-logo.stsm-logo-plain { position: static; opacity: 1; height: var(--stsm-nav-logo-h); }
@media screen and (max-width: 991px) {
  :root { --stsm-nav-claim-h: 68px; --stsm-nav-pad: .9rem; }
}
.stsm-hero__inner { padding-top: 13rem; }
@media screen and (max-width: 991px) { .stsm-hero__inner { padding-top: 9.5rem; } }

/* Navigation-Links vertikal zum Logo zentriert; Unterseiten etwas mehr Luft unter der höheren Navigation */
@media screen and (min-width: 992px) { .navbar .nav-menu.w-nav-menu { align-self: center !important; } }
@media screen and (min-width: 992px) {
  .section-home-header .header-content-wrap { padding-top: 11.5rem; }
  .padding-top-header { padding-top: 12.5rem; }
  /* Footer: «Ansatz» auf gleicher Höhe (Grundlinie) wie «Wir machen Unternehmen» */
  .footer .footer-menu-wrap { padding-top: 8px; }
}
/* Weiss → Warmweiss (#f5f1ec) auch bei Linien und Slider-Punkten */
.faq-line { background-color: #f5f1ec; }
.w-slider-dot.w-active { background-color: #f5f1ec; }
.w-slider-dot { background-color: rgba(245, 241, 236, .4); }

/* Footer-Menü: Linien in Warmweiss */
.footer .underline-footer-link { background-color: rgba(245, 241, 236, .15); }
.footer .underline-footer-line { background-color: #f5f1ec; }

/* Navigation immer zuoberst (CTA-Inhalt hatte denselben z-index und schob sich darüber) */
.navbar { z-index: 1000 !important; }
.stsm-cta .cta-content-wrapper { z-index: 2 !important; }

/* Lead-In-Header für Unterseiten: Aufbau wie Startseite, aber kompakt */
.stsm-lead__inner {
  position: relative;
  padding-top: 13rem; padding-bottom: clamp(4rem, 9vw, 7.5rem);
  padding-left: clamp(1.5rem, 7vw, 8rem); padding-right: clamp(1.5rem, 4vw, 4rem);
}
.stsm-lead__title {
  margin: 0;
  font-family: "STSM Jost", "Futura", "Century Gothic", sans-serif; font-weight: 700;
  font-size: clamp(3rem, 9.5vw, 10rem); line-height: .96; letter-spacing: -.005em;
  text-transform: uppercase; color: var(--stsm-pink);
}
.stsm-lead__title .l { display: block; overflow: hidden; padding-bottom: .04em; }
.stsm-lead__title .l > span { display: inline-block; animation: stsm-lead-up .9s var(--stsm-ease) both; }
.stsm-lead__title .l:nth-child(2) > span { animation-delay: .1s; }
.stsm-lead__text {
  display: flex; gap: .9em; align-items: flex-start;
  margin: clamp(1.75rem, 3.5vw, 3.5rem) 0 0; max-width: 34em;
  font-family: "STSM Jost", "Futura", sans-serif; font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.65rem); line-height: 1.3;
  color: var(--stsm-cream);
  animation: stsm-lead-fade .8s ease .9s both;
}
.stsm-lead__text svg { flex: none; width: 1.15em; height: 1.15em; margin-top: .1em; }
@keyframes stsm-lead-up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes stsm-lead-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media screen and (max-width: 991px) { .stsm-lead__inner { padding-top: 9.5rem; } }
@media screen and (max-width: 767px) {
  .stsm-lead__title { font-size: 11vw; }
  .stsm-lead__text br { display: none; }
}
@media (prefers-reduced-motion: reduce) { .stsm-lead__title .l > span, .stsm-lead__text { animation: none; } }

/* Aktive Seite: Bubble in der Navigation bleibt stehen */
.navbar .nav-link-2.stsm-current { background-color: #e94591; border-color: #e94591; }

/* Ansatz «Das System»: Kacheln wie auf der Startseite (kleiner Titel orange + ein Satz) */
.stsm-sys-grid { grid-template-columns: repeat(3, 1fr); margin-top: 2.5rem; }
.stsm-sys .business-clever-item { text-align: left; }
.stsm-sys .sub-card { margin-top: .6rem; }
.stsm-sys-last { background-image: linear-gradient(135deg, #e9937a 0%, #f0b77a 50%, #fde678 100%); border-color: transparent; }
.stsm-sys-last .text-size-medium { color: var(--stsm-violet); }
.stsm-sys-last .stsm-sys-big { margin-top: .4rem; color: var(--stsm-violet); font-weight: 700; font-size: clamp(2rem, 3.2vw, 3rem); line-height: .9; }
.service-title-5.kein-berater { text-transform: none; }
.section-about-intro .dividing-line { display: none; }
@media screen and (max-width: 991px) { .stsm-sys-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 767px) { .stsm-sys-grid { grid-template-columns: 1fr; } }

/* Ansatz «Die Welt ist nicht linear»: erster Satz abgeschwächt, zweiter Satz (ab «Dein») orange – wie Startseite */
.intro-content-wrap[data-w-id="2bb1d4a6-a7b4-eab8-18e6-09939fc42b93"] .heading-item { color: #b9a4a9; }
.intro-content-wrap[data-w-id="2bb1d4a6-a7b4-eab8-18e6-09939fc42b93"] .heading-block:nth-of-type(3) > .title-wrap:nth-child(2) .heading-item,
.intro-content-wrap[data-w-id="2bb1d4a6-a7b4-eab8-18e6-09939fc42b93"] .heading-item.text-color-secondary { color: #f1896b; }
/* Ansatz-Kacheln: Ergebnis-Kachel kompakter */
.stsm-sys-last .stsm-sys-big { margin: .5rem 0 .6rem !important; }
.stsm-sys-last .business-clever-item > * { margin-bottom: 0; }
.stsm-sys-last .business-clever-item { gap: 0; justify-content: flex-start; }
.stsm-sys-last .sub-card { margin-top: 0; }

/* Ansatz-Kacheln: alle nebeneinander, Skizzenpfeile von Kachel zu Kachel */
.stsm-sys-grid { gap: 1.5rem; }
.stsm-sys { position: relative; overflow: visible; }
.stsm-sys-arrow { position: absolute; z-index: 3; top: .7rem; right: -2.85rem; width: 4.2rem; color: #e94591; pointer-events: none; transform: rotate(-4deg); }
.stsm-sys-arrow svg { display: block; width: 100%; height: auto; overflow: visible; }
.stsm-sys-last .stsm-sys-big { margin-bottom: 0 !important; }
@media screen and (min-width: 1200px) {
  .stsm-sys-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .stsm-sys .business-clever-item { padding: 1.6rem 1.35rem 1.9rem; }
  .stsm-sys .sub-card { font-size: 1rem; }
  .stsm-sys-last .stsm-sys-big { font-size: clamp(1.7rem, 2.3vw, 2.5rem); line-height: .95; }
}
@media screen and (max-width: 1199px) and (min-width: 768px) {
  .stsm-sys-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .stsm-sys:nth-child(3) .stsm-sys-arrow { display: none; }
}
@media screen and (max-width: 767px) {
  .stsm-sys-arrow { top: auto; right: auto; bottom: -2.6rem; left: 50%; width: 3rem; transform: translateX(-50%) rotate(90deg); }
}
.stsm-sys-last .stsm-sys-big { overflow-wrap: normal !important; word-break: normal; }

/* Ansatz «Fehldiagnosen»: Kacheln wie Startseite – Aussage gelb, «Daran liegt’s nicht.» pink fett, Auflösung hellbeige */
.stsm-fd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.stsm-fd .value-content-item { grid-row-gap: .75rem; row-gap: .75rem; }
.stsm-fd .value-title { font-size: clamp(1.6rem, 2.1vw, 2.3rem); }
.stsm-fd-neg { margin: .4rem 0 0; color: #e94591; font-weight: 700; font-size: 1.3rem; line-height: 1.22; transition: color .3s ease; }
.stsm-fd .value-content-wrap:hover .stsm-fd-neg { color: var(--stsm-violet); }
@media screen and (max-width: 991px) { .stsm-fd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media screen and (max-width: 767px) { .stsm-fd-grid { grid-template-columns: 1fr !important; } }

/* Ansatz «Wie wir arbeiten»: Prinzipien im Stil der Leistungen auf der Startseite */
.stsm-prin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.stsm-prin { display: flex; flex-direction: column; gap: 1.5rem; }
.stsm-prin .service-title-5 { margin: 0; font-size: clamp(1.9rem, 2.6vw, 3rem); line-height: .9; }
.stsm-prin-icon { width: 6.5rem; height: 6.5rem; }
@media screen and (max-width: 991px) { .stsm-prin-grid { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 767px) { .stsm-prin-grid { grid-template-columns: 1fr; } }

/* Ansatz «Der echte Unterschied»: Aufzählung hellbeige und grösser, Hover wie die anderen Kacheln */
.stsm-diff .check-icon { color: #f5f1ec; width: 1.6rem; height: 1.6rem; flex: none; transition: color .3s ease; }
.stsm-diff .check-icon svg { width: 100%; height: 100%; }
.stsm-diff .price-feature-text { color: #f5f1ec; font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.22; transition: color .3s ease; }
.stsm-diff .feature-item { align-items: center; gap: .9rem; }
.stsm-diff .beratung { display: flex; flex-direction: column; gap: 1rem; }
.stsm-diff .business-clever-wrap:hover .check-icon,
.stsm-diff .business-clever-wrap:hover .price-feature-text { color: var(--stsm-violet); }
.stsm-diff .price-feature-text { font-size: clamp(1.2rem, 1.75vw, 1.7rem); }
.stsm-diff .business-clever-wrap { position: relative; overflow: visible; }
.stsm-diff-vs { position: absolute; z-index: 3; top: 50%; right: -3.3rem; width: 5.8rem; color: #e94591; pointer-events: none; transform: translateY(-50%) rotate(-6deg); }
.stsm-diff-vs svg { display: block; width: 100%; height: auto; overflow: visible; }
@media screen and (max-width: 767px) {
  .stsm-diff-vs { top: auto; right: auto; left: 50%; bottom: -2.9rem; width: 4.6rem; transform: translateX(-50%) rotate(-6deg); }
}

.stsm-diff .beratung { gap: .5rem; }

/* Kacheln: keine Hintergrundgrafik (wirkte wie ein Fleck) */
.value-content-wrap .value-bg { display: none !important; }

/* Leistungen «Was wir konkret tun»: Leitfrage pink + fett, Aufzählung grösser, Button unten rechts unter «Technologie» */
.service-content-block-3 .text-size-medium.strategie { color: #e94591; font-weight: 700; }
.service-content-block-3 .beratung .text-size-small-2 { font-size: 1.05rem; line-height: 1.22; color: var(--stsm-violet); }
.service-content-block-3 .tick-icon { color: var(--stsm-violet); }
@media screen and (min-width: 992px) {
  .service-content-grid > .service-content-item:last-child { grid-column: 2 / 3 !important; grid-row: auto !important; justify-self: end !important; align-self: start !important; margin-top: .5rem; }
}
/* nie Schwarz: Slider-Texte in Corporate Rot */
.slide-text { color: var(--stsm-violet); }

/* Leistungen: Beweis-Streifen mit Cases (dunkle Kacheln wie überall, Hover orange) */
.stsm-proof-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; gap: 2rem; }
.stsm-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.stsm-proof-card { display: flex; flex-direction: column; background: var(--stsm-violet); border: 1px solid var(--stsm-violet); border-radius: 1.25rem; overflow: hidden; text-decoration: none; transition: background-color .3s ease, border-color .3s ease; }
.stsm-proof-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.stsm-proof-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--stsm-ease); }
.stsm-proof-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.5rem 1.7rem; }
.stsm-proof-label { color: #f1896b; font-size: 1rem; line-height: 1.22; }
.stsm-proof-name { color: #fde678; font-weight: 700; font-size: clamp(1.4rem, 1.8vw, 1.9rem); line-height: 1; }
.stsm-proof-desc { color: #f5f1ec; font-size: 1rem; line-height: 1.22; }
.stsm-proof-card:hover { background: #f1896b; border-color: #f1896b; }
.stsm-proof-card:hover .stsm-proof-label, .stsm-proof-card:hover .stsm-proof-name, .stsm-proof-card:hover .stsm-proof-desc { color: var(--stsm-violet); }
.stsm-proof-card:hover .stsm-proof-img img { transform: scale(1.04); }
@media screen and (max-width: 991px) { .stsm-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stsm-proof-top { grid-template-columns: 1fr; } }
@media screen and (max-width: 767px) { .stsm-proof-grid { grid-template-columns: 1fr; } }

/* Unter einem Spruch weniger Luft bis zur nächsten Sektion */
.section-about-intro:not(.approach) + section .padding-section-large { padding-top: 3rem; }
@media screen and (max-width: 767px) { .section-about-intro:not(.approach) + section .padding-section-large { padding-top: 2rem; } }

.stsm-proof-card { border: 0; }

/* Keine Trennlinien zwischen Sektionen */
.dividing-line { display: none !important; }

/* Content-Headlines (alle Seiten) rund 20 % kleiner */
@media screen and (min-width: 992px) { .heading-style-h2 { font-size: 8rem !important; } }
@media screen and (max-width: 991px) and (min-width: 768px) { .heading-style-h2 { font-size: 8.5rem !important; } }
@media screen and (max-width: 767px) { .heading-style-h2 { font-size: 7.4vw !important; } }

/* Stimmen: nur eine Stimme – Pfeile und Punkte ausblenden */
.stsm-voice-single .w-slider-arrow-left, .stsm-voice-single .w-slider-arrow-right, .stsm-voice-single .w-slider-nav { display: none !important; }

/* ===== Case-Detailseiten (neuer Aufbau) ===== */
.stsm-lead__eyebrow { margin: 0 0 1.25rem; color: #f1896b; font-family: "STSM Jost", "Futura", sans-serif; font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.6rem); letter-spacing: .04em; text-transform: uppercase; animation: stsm-lead-fade .8s ease .1s both; }
.stsm-case-lead .stsm-lead__title { font-size: clamp(2.6rem, 7.2vw, 7.5rem); }
/* Eckdaten */
.stsm-facts { background: var(--stsm-violet); }
.stsm-facts__list { margin: 0; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1.5rem 3rem; padding: 2rem 0 2.25rem; }
.stsm-facts__item dt { color: #f1896b; font-size: .95rem; line-height: 1.22; margin-bottom: .35rem; }
.stsm-facts__item dd { margin: 0; color: #f5f1ec; font-size: 1.15rem; line-height: 1.22; font-weight: 500; }
@media screen and (max-width: 767px) { .stsm-facts__list { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 0; } }
/* Ausgangslage: Panel ohne Scroll-Animation sichtbar */
.stsm-case-start > .white-background, .stsm-case-more > .white-background { transform: none !important; opacity: 1 !important; }
.stsm-case-start .values-component-grid { margin-top: 2.5rem; }
/* Spruch (statisch) */
.stsm-quote .heading-item { color: #b9a4a9; }
.stsm-quote .heading-item.text-color-secondary { color: #f1896b; }
.stsm-quote .heading-item > .heading-item { display: block; }
/* Umgesetzt: grosse Zahl statt Icon */
.stsm-done__num { margin: 0; font-weight: 700; font-size: clamp(4rem, 7vw, 6.5rem); line-height: .9; letter-spacing: -.02em; color: #f1896b; }
/* Weitere Cases: drei Kacheln */
.stsm-proof-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media screen and (max-width: 991px) { .stsm-proof-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 767px) { .stsm-proof-grid--3 { grid-template-columns: 1fr; } }

/* Case-Seiten: Begleittext neben Titel unten ausgerichtet (wie übrige Seiten) */
.stsm-top { align-items: end; }
.stsm-top > .right-content { align-self: end; }
.stsm-prin-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media screen and (max-width: 767px) { .stsm-prin-grid--2 { grid-template-columns: 1fr; } }
.stsm-facts__list { grid-template-columns: 1.2fr 2.2fr 1.2fr 1fr; }
@media screen and (max-width: 991px) { .stsm-facts__list { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 767px) { .stsm-facts__list { grid-template-columns: 1fr; } }

/* Case-Hero: Button zur Kunden-Webseite unten rechts */
.stsm-case-lead .stsm-lead__inner { position: relative; }
.stsm-lead__link { position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(4rem, 9vw, 7.5rem); display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.5rem; border: 1px solid rgba(245, 241, 236, .35); border-radius: 999px; color: #f5f1ec; font-size: 1rem; line-height: 1; text-decoration: none; transition: background-color .25s ease, border-color .25s ease; animation: stsm-lead-fade .8s ease 1.1s both; }
.stsm-lead__link:hover, .stsm-lead__link:focus-visible { background: #e94591; border-color: #e94591; color: #f5f1ec; }
@media screen and (max-width: 767px) { .stsm-lead__link { position: static; margin-top: 2rem; } }
.stsm-facts__list { grid-template-columns: 1.2fr 2.2fr 1fr; }
@media screen and (max-width: 991px) { .stsm-facts__list { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 767px) { .stsm-facts__list { grid-template-columns: 1fr; } }

/* Webseiten-Button: Skizzenpfeil wie im Prozess, nach oben rechts */
.stsm-link-arrow { display: inline-block; width: 2rem; color: #e94591; transform: rotate(-38deg) translateY(-2px); transition: color .25s ease; }
.stsm-link-arrow svg { display: block; width: 100%; height: auto; overflow: visible; }
.stsm-lead__link { gap: .75rem; }
.stsm-lead__link:hover .stsm-link-arrow, .stsm-lead__link:focus-visible .stsm-link-arrow { color: #f5f1ec; }

.stsm-link-arrow { transform: scaleY(-1) rotate(45deg); }

.stsm-lead__link { right: clamp(1.5rem, 7vw, 8rem); }


/* Case: Wirkung – dunkle Kacheln wie «Haltung/System/Ergebnis» auf der Startseite */
.stsm-impact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 2.5rem; }
.stsm-impact .business-clever-item { text-align: left; align-items: flex-start; }
.stsm-impact .value-title-sub { margin-top: .5rem; text-align: left; }
.stsm-impact .sub-card { margin-top: .6rem; }
@media screen and (max-width: 991px) { .stsm-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media screen and (max-width: 767px) { .stsm-impact-grid { grid-template-columns: 1fr !important; } }

/* Über uns: Name, Team, Werte */
.stsm-name-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.stsm-name .stsm-sys-big { font-size: clamp(3rem, 5vw, 5.5rem) !important; line-height: .9; }
.stsm-prin-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stsm-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.stsm-team__card { background: #461429; color: #f5f1ec; border-radius: 1.25rem; overflow: hidden; display: flex; flex-direction: column; }
.stsm-team__pic { aspect-ratio: 4 / 5; background: #e8dfd6; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stsm-team__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stsm-team__ini { font-size: clamp(4rem, 7vw, 7rem); font-weight: 700; line-height: .9; color: #461429; opacity: .25; letter-spacing: .02em; }
.stsm-team__body { padding: 1.75rem 1.75rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.stsm-team__name { margin: 0; font-size: clamp(1.9rem, 2.6vw, 3rem); line-height: .9; text-transform: uppercase; color: #fde678; }
.stsm-team__roles { margin: 0; color: #f1896b; font-size: 1.05rem; line-height: 1.22; }
.stsm-team__card .service-line { background-color: #f5f1ec; opacity: .3; }
.stsm-team__text { margin: 0; line-height: 1.22; color: #f5f1ec !important; }
@media screen and (max-width: 991px) { .stsm-prin-grid--4 { grid-template-columns: 1fr 1fr; } .stsm-team { grid-template-columns: 1fr 1fr; } }
@media screen and (max-width: 767px) { .stsm-name-grid, .stsm-prin-grid--4, .stsm-team { grid-template-columns: 1fr !important; } }

/* Umlaute und Unterlängen nicht abschneiden: Maske grösser, Zeilenabstand unverändert */
.gsap_split_letter-mask { padding: .14em 0 .2em !important; margin: -.14em 0 -.2em !important; }
.stsm-lead__title .l, .stsm-slide__title .l { padding-top: .16em; margin-top: -.16em; padding-bottom: .16em; margin-bottom: -.12em; }

/* Gespräch starten: Hero mit Buchung rechts, Fakten, Formular, FAQ */
.stsm-contact-lead .stsm-lead__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.stsm-contact-lead .stsm-lead__title { font-size: clamp(3rem, 6.4vw, 7.5rem); }
.stsm-contact-lead__main { padding-top: clamp(0rem, 3vw, 3rem); }
.stsm-contact-book { background: #f5f1ec; color: #461429; border-radius: 1.25rem; padding: clamp(1.25rem, 2vw, 2rem); animation: stsm-lead-fade .8s ease .5s both; }
.stsm-contact-book__eyebrow { margin: 0 0 .4rem; color: #461429; font-weight: 700; font-size: clamp(1.4rem, 2vw, 2rem); line-height: .9; text-transform: uppercase; }
.stsm-contact-book__text { margin: 0 0 1.25rem; color: #461429; font-size: 1.05rem; line-height: 1.22; }
.stsm-contact-book .booking-embed iframe { height: 640px !important; border-radius: .75rem !important; }
.stsm-contact-book .booking-embed > div { min-height: 300px !important; background: #fff !important; }
.stsm-contact-book .booking-embed p { margin: .75rem 0 0 !important; }
.stsm-contact-book .booking-embed p a { color: #e94591 !important; }
.stsm-facts__list.stsm-facts__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stsm-facts__item dd a { color: #e94591; text-decoration: none; }
.stsm-facts__item dd a:hover { text-decoration: underline; }
.stsm-contact-form { margin-top: 2.5rem; background: #fff; border-radius: 1.25rem; padding: clamp(1.5rem, 3vw, 3rem); max-width: 56rem; margin-left: auto; }
.stsm-contact-form .form-label { color: #461429; }
.stsm-contact-form .form-input { color: #461429; border-color: rgba(70, 20, 41, .3); }
.stsm-faq { margin-top: 2.5rem; display: grid; gap: .75rem; }
.stsm-faq__item { background: #461429; color: #f5f1ec; border-radius: 1.25rem; padding: 0 clamp(1.25rem, 2.5vw, 2.25rem); }
.stsm-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.05; color: #fde678; }
.stsm-faq__item summary::-webkit-details-marker { display: none; }
.stsm-faq__item summary:hover { color: #f1896b; }
.stsm-faq__plus { position: relative; flex: none; width: 1.1rem; height: 1.1rem; }
.stsm-faq__plus::before, .stsm-faq__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .3s ease; }
.stsm-faq__plus::after { transform: rotate(90deg); }
.stsm-faq__item[open] .stsm-faq__plus::after { transform: rotate(0); }
.stsm-faq__item p { margin: 0; padding: 0 0 1.5rem; max-width: 46em; font-size: 1.1rem; line-height: 1.22; color: #f5f1ec; }
@media screen and (max-width: 991px) {
  .stsm-contact-lead .stsm-lead__inner { grid-template-columns: 1fr; }
  .stsm-facts__list.stsm-facts__list--4 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 767px) { .stsm-facts__list.stsm-facts__list--4 { grid-template-columns: 1fr; } .stsm-contact-lead .stsm-lead__title { font-size: 11vw; } }
.stsm-contact-form { background: transparent; padding: 0; }
.stsm-contact-form .contact-form-wrapper { border-radius: 1.25rem; }
.stsm-contact-form input[type="submit"] { background: #461429 !important; color: #f5f1ec !important; border: 0 !important; transition: background-color .3s ease; }
.stsm-contact-form input[type="submit"]:hover { background: #f1896b !important; }
.stsm-contact-lead .stsm-lead__title .l:nth-child(3) > span { animation-delay: .2s; }
.stsm-contact-form input[type="submit"] { mix-blend-mode: normal !important; }
.stsm-contact-form input[type="submit"]:hover { background: #e94591 !important; }

/* FAQ: Hover und offen in Pink */
.stsm-faq__item summary:hover, .stsm-faq__item[open] summary { color: #e94591; }
/* Footer-Menü: Hover und aktive Seite – Text, Linie und Pfeil in Pink */
.footer .menu-link-block .menu-text, .footer .menu-link-block .arrow-link-2 { transition: color .3s ease; }
.footer .menu-link-block .underline-footer-line { transition: background-color .3s ease; }
.footer .menu-link-block:hover .menu-text, .footer .menu-link-block:hover .arrow-link-2,
.footer .menu-link-block.stsm-current .menu-text, .footer .menu-link-block.stsm-current .arrow-link-2 { color: #e94591 !important; }
.footer .menu-link-block:hover .underline-footer-line, .footer .menu-link-block.stsm-current .underline-footer-line,
.footer .menu-link-block:hover .underline-footer-link, .footer .menu-link-block.stsm-current .underline-footer-link { background-color: #e94591 !important; }

/* Impressum und Datenschutz: kein Hero, direkt Titel und Text */
.stsm-legal-page .main-wrapper { background: #f5f1ec; }
.stsm-legal__inner { padding-top: clamp(9rem, 14vw, 13rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.stsm-legal__body { margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid rgba(70, 20, 41, .2); }
.stsm-legal__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 3rem; padding: 1.75rem 0; border-bottom: 1px solid rgba(70, 20, 41, .2); }
.stsm-legal__h { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height: .9; font-weight: 700; text-transform: uppercase; color: #461429; }
.stsm-legal__text p { margin: 0 0 .9rem; font-size: 1.1rem; line-height: 1.35; color: #461429; max-width: 44em; }
.stsm-legal__text p:last-child { margin-bottom: 0; }
.stsm-legal__text a { color: #e94591; text-decoration: none; }
.stsm-legal__text a:hover { text-decoration: underline; }
.stsm-todo { background: #fde678; color: #461429; padding: 0 .25em; border-radius: .2em; }
@media screen and (max-width: 767px) { .stsm-legal__row { grid-template-columns: 1fr; } }
/* Footer: Impressum und Datenschutz klein unter der Navigation */
.stsm-legal-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.5rem; }
.stsm-legal-links a { color: #e94591; font-size: .95rem; line-height: 1.22; text-decoration: none; }
.stsm-legal-links a:hover, .stsm-legal-links a.stsm-current { text-decoration: underline; text-underline-offset: .2em; }

/* Cookie-Hinweis */
.stsm-cookie { position: fixed; z-index: 2000; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); width: min(26rem, calc(100vw - 2rem));
  background: #461429; color: #f5f1ec; border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 1rem 3rem rgba(46, 13, 27, .35);
  opacity: 0; transform: translateY(1rem); transition: opacity .3s ease, transform .3s ease; }
.stsm-cookie.is-open { opacity: 1; transform: none; }
.stsm-cookie__title { margin: 0 0 .5rem; font-weight: 700; font-size: 1.4rem; line-height: .9; text-transform: uppercase; color: #fde678; }
.stsm-cookie__text { margin: 0; font-size: 1rem; line-height: 1.22; color: #f5f1ec; }
.stsm-cookie__text a { color: #e94591; text-decoration: none; }
.stsm-cookie__text a:hover { text-decoration: underline; }
.stsm-cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.25rem; }
.stsm-cookie__btn { appearance: none; border: 1px solid #f5f1ec; background: transparent; color: #f5f1ec; border-radius: 999px; padding: .75rem 1rem;
  font: inherit; font-size: .9rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.stsm-cookie__btn:hover, .stsm-cookie__btn:focus-visible { background: #e94591; border-color: #e94591; color: #f5f1ec; outline: none; }
.stsm-legal-links .stsm-cookie-open { cursor: pointer; }
.stsm-cookie .stsm-cookie__btn { border: 1px solid rgba(245, 241, 236, .7) !important; color: #f5f1ec !important; background-color: transparent; }
.stsm-cookie .stsm-cookie__btn:hover, .stsm-cookie .stsm-cookie__btn:focus-visible { background-color: #e94591 !important; border-color: #e94591 !important; }

/* Team: LinkedIn-Link */
.stsm-team__link { align-self: flex-start; margin-top: .25rem; color: #e94591; font-size: 1rem; line-height: 1.22; font-weight: 600; text-decoration: none; }
.stsm-team__link:hover { text-decoration: underline; text-underline-offset: .2em; }
/* 404 */
.stsm-404 .stsm-lead__inner { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.stsm-404 .stsm-lead__eyebrow { margin: 0 0 1rem; color: #f1896b; font-size: 1.1rem; line-height: 1.22; }
.stsm-404__links { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 2.25rem; animation: stsm-lead-fade .8s ease 1.1s both; }
.stsm-404__links a { display: inline-block; padding: .85rem 1.6rem; border-radius: 999px; border: 1px solid rgba(245, 241, 236, .7); color: #f5f1ec; text-decoration: none; font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; transition: background-color .3s ease, border-color .3s ease; }
.stsm-404__links a:hover { background: #e94591; border-color: #e94591; }
.stsm-team__body { flex: 1; } .stsm-team__link { margin-top: auto; padding-top: .5rem; }

/* Team: LinkedIn als Icon */
.stsm-team__link { display: inline-flex; width: 1.75rem; height: 1.75rem; transition: transform .3s ease; }
.stsm-team__link svg { width: 100%; height: 100%; display: block; }
.stsm-team__link:hover { text-decoration: none; transform: translateY(-2px); }

/* Kundenlogos: Grösse im Verhältnis zur Kachel, damit sie auf allen Geräten gleich wirken wie auf Desktop */
.stsm-logo-face { padding: 0 !important; }
.stsm-logo-face img { max-height: 26% !important; max-width: 62% !important; }
.stsm-logo-face img[src*="sirius"] { max-height: 37% !important; }
.stsm-logo-face img[src*="fehlmann"] { max-height: 33% !important; }
@media screen and (max-width: 991px) { .stsm-logo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; } }

/* Stimmen-Slider Tablet/Mobile: bei «Zurück» Pfeil links und nach links zeigend */
@media screen and (max-width: 991px) {
  .w-slider-arrow-left .slide-block { flex-direction: row-reverse; }
  .w-slider-arrow-left .slide-arrow svg { transform: rotate(180deg); }
}

/* Tablet/Mobile: Abstand Titel–Text bei «Drei Wege der Zusammenarbeit» wie bei «Stimmen» */
@media screen and (max-width: 991px) {
  .top-grid:has(+ .intro-description-block.drei-wege) { margin-bottom: 0 !important; row-gap: 0 !important; grid-row-gap: 0 !important; }
  .intro-description-block.drei-wege { margin-top: 24px !important; }
}

/* Tablet/Mobile: Copyright und LinkedIn-Icon links ausgerichtet */
@media screen and (max-width: 991px) {
  .footer .footer-grid.home { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 1.5rem; }
  .footer .footer-grid.home > * { justify-self: start !important; align-self: flex-start !important; margin-left: 0 !important; text-align: left !important; width: auto !important; }
  .footer .footer-grid.home .footer-block, .footer .footer-grid.home .footer-text { text-align: left !important; justify-content: flex-start !important; }
  .footer .footer-grid.home .social-media-block { justify-content: flex-start !important; }
}

/* Tablet/Mobile: Titel und Beschreibung untereinander, wie bei den übrigen Abschnitten */
@media screen and (max-width: 991px) {
  .stsm-top > .content-item:first-child { grid-column: 1 / -1 !important; grid-row: 1 / 2 !important; }
  .stsm-top > .right-content { grid-column: 1 / -1 !important; grid-row: 2 / 3 !important; justify-self: start !important; }
}

/* Tablet/Mobile: Leitfragen in den Leistungs-Kacheln ohne festen Umbruch, volle Breite */
@media screen and (max-width: 991px) {
  .text-size-medium.strategie br { display: none; }
  .text-size-medium.strategie { max-width: none !important; width: auto !important; grid-column: 1 / -1 !important; }
}

/* Tablet quer (992–1279px): Titel und Kacheln dürfen nicht über den Rand laufen */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .heading-style-h2 { font-size: clamp(5rem, 10vw, 8rem) !important; }
  .w-layout-grid:has(> .stsm-weg) { grid-template-columns: 1fr !important; }
  .stsm-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Tablet: Impressum/Datenschutz Rubrik über dem Text */
@media screen and (max-width: 991px) { .stsm-legal__row { grid-template-columns: 1fr; } }
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .service-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .service-content-grid > * { grid-column: auto !important; grid-row: auto !important; grid-area: auto !important; }
}

/* Tablet/Mobile: Einleitungs- und Beschreibungstexte mit 135 % wie auf Desktop (Webflow setzt sonst 150 %) */
@media screen and (max-width: 991px) {
  .text-size-medium, .text-size-medium-2 { line-height: 1.35; }
  .text-size-medium.text-color-alternate, .text-size-medium-2.text-color-alternate, .text-size-medium.kein-berater, .text-size-medium.strategie,
  .business-clever-item p, .stsm-prin p, .stsm-fd-neg, .stsm-price, .stsm-team__text { line-height: 1.22; }
  .top-grid .right-content p, .intro-description-block p { line-height: 1.35 !important; }
}

/* Mobile: Content-Headlines kräftiger – etwas grösser und Laufweite proportional wie auf Desktop */
@media screen and (max-width: 767px) {
  .heading-style-h2 { font-size: 10vw !important; letter-spacing: .0125em !important; }
}
.heading-style-h2 { letter-spacing: .0125em; }

/* Tablet/Mobile: Kachel-Titel (z. B. «Was sich verändert hat») passen in die Kachel, lange Wörter werden getrennt */
@media screen and (max-width: 1279px) {
  .stsm-impact .value-title-sub, .stsm-name .stsm-sys-big { font-size: clamp(1.6rem, 3.6vw, 2.6rem) !important; line-height: .95; -webkit-hyphens: manual !important; hyphens: manual !important; }
}
@media screen and (max-width: 767px) {
  .stsm-impact .value-title-sub, .stsm-name .stsm-sys-big { font-size: clamp(1.6rem, 7.5vw, 2.2rem) !important; }
}
/* Titel in Kacheln: nur an weichen Trennstellen trennen, nie mitten im Wort */
.value-title, .value-title-sub, .service-title-5, .stsm-legal__h, .stsm-team__name { -webkit-hyphens: manual !important; hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; }

/* Einheitliche Ränder: Kacheln und Boxen immer bündig mit dem Seitenraster (links = rechts) */
.stsm-prin-grid, .stsm-prin-grid--2, .stsm-prin-grid--4, .stsm-team, .stsm-impact-grid, .stsm-fd-grid { min-width: 0; }
.stsm-prin-grid > *, .stsm-team > *, .stsm-impact-grid > *, .stsm-fd-grid > * { min-width: 0; }
@media screen and (max-width: 767px) {
  .stsm-prin-grid, .stsm-prin-grid--2, .stsm-prin-grid--4, .stsm-team, .stsm-impact-grid, .stsm-name-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media screen and (max-width: 991px) {
  .stsm-lead__inner { padding-left: 40px !important; padding-right: 40px !important; }
  .pricing-wrap.die-richtigen { width: 100% !important; max-width: none !important; padding-right: 0 !important; }
}
@media screen and (max-width: 767px) {
  .stsm-lead__inner { padding-left: 20px !important; padding-right: 20px !important; }
}
@media screen and (max-width: 991px) {
  .top-grid > .pricing-wrap.die-richtigen { grid-column: 1 / -1 !important; padding-left: 0 !important; }
  .pricing-block-2.die-richtigen { width: 100% !important; }
}

/* Fünfter Case in der gestapelten Liste und 5er-Raster */
.case-study-block._05 { width: 92%; margin-left: 8%; top: 6rem; }
.stsm-proof-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media screen and (max-width: 1279px) { .stsm-proof-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 991px) { .stsm-proof-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 767px) { .stsm-proof-grid--5 { grid-template-columns: 1fr; } }

/* Cookie-Hinweis rechts unten */
.stsm-cookie { left: auto !important; right: clamp(1rem, 3vw, 2rem) !important; }
/* Formular-Meldungen im Markenlook statt Webflow-Grün/Rot */
.stsm-contact-form .w-form-done { background: #461429 !important; color: #f5f1ec !important; border-radius: 1rem; padding: 2rem !important; }
.stsm-contact-form .w-form-done div { color: #f5f1ec !important; font-size: 1.15rem; line-height: 1.35; }
.stsm-contact-form .w-form-fail { background: #f1896b !important; color: #461429 !important; border-radius: 1rem; padding: 1.25rem 1.5rem !important; }
.stsm-contact-form .w-form-fail div { color: #461429 !important; }

/* Keine helle Linie ganz oben: Anker «#top» ohne Höhe, Seitengrund in Corporate Rot */
.main-wrapper > .top#top { height: 0 !important; min-height: 0 !important; overflow: hidden; }
html { background-color: #461429; }

/* Startseite «Besser ist ein Zustand»: Button näher an den Text (Tablet/Mobile), nächste Sektion bleibt an ihrem Platz */
@media screen and (max-width: 991px) { .section-home-intro .button-wrap.ctabtn { position: relative; top: -52px; } }
@media screen and (max-width: 767px) { .section-home-intro .button-wrap.ctabtn { top: -44px; } }

/* Burger-Menü ohne Kreis und Hintergrund, Linien in Beige */
.menu-button .background-glass.menu-button { background-color: transparent !important; border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
.menu-button .menu-line { background-color: #f5f1ec !important; }

/* Grosse Headlines: Zeilenabstand gleich, egal ob eine Zeile umbricht (Ränder für Umlaute dürfen nicht zusammenfallen) */
.stsm-lead__title, .stsm-slide__title { display: flex !important; flex-direction: column; align-items: flex-start; }
.stsm-lead__title .l, .stsm-slide__title .l { padding-top: .16em !important; margin-top: -.16em !important; padding-bottom: .16em !important; margin-bottom: -.16em !important; }
/* Mobile-Menü: nur ein Text pro Eintrag (die zweite Kopie für den Hover-Effekt blitzte bei Umlauten durch) */
@media screen and (max-width: 991px) { .w-nav-menu .nav-link-block .nav-text + .nav-text { display: none !important; } }