/* ==========================================================================
   site-shell.css — globale Bauteile auf dem bestehenden Corporate-Gerüst
   Angelegt 2026-09-17, Blueprint Phase 0 (§5 Header/Footer, §6/§7 Mega-Menüs).

   Regeln:
   - Nur bestehende Tokens (css/_contract.css, css/styles.css :root). Keine
     neuen Farben, Schriften, Radien. Quelle: _docs/DESIGN_SYSTEM.md.
   - Wird auf JEDER Seite direkt nach styles.css geladen (build.py BASE_CSS).
   - Markup-Vertrag siehe _src/build.py nav_html() und _src/layout.html.
   - Umschaltpunkt Leiste/Menü-Knopf: 1023.98px (seit 03.10.2026, Runde 40; vorher 1359.98px).
     styles.css schaltet weiter bei 1359px um – der Block «Reiterleiste 1024–1359» unten nimmt das zurück.
     Gleicher Wert in js/main.js (matchMedia) und js/site-shell.js.
   ========================================================================== */

/* --- Belegmarke (Blueprint §37 Loop 3, einziger erlaubter Platzhalter) ----- */
.open-evidence {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--saa-radius-sm, 8px);
  /* Bewusst ausserhalb der Palette: die Marke darf nie wie Inhalt aussehen und ist vor Go-live weg. */
  background: #fff4cc;
  color: #6b4e00 !important;
  -webkit-text-fill-color: #6b4e00 !important;
  font-size: 13px;
  font-weight: 600;
}
.open-evidence::before { content: "OPEN_EVIDENCE · "; }

/* --- Kopf: Menüpunkte -------------------------------------------------------
   R6 stylt `.site-nav-primary a` (Grossbuchstaben, 12px, Unterstrich). Das
   bleibt für den Hauptlink; das Mega-Menü darunter setzt eigene Regeln mit
   höherer Spezifität. */
.site-nav-item {
  align-items: center;
  display: inline-flex;
  position: relative;
}

.site-nav-item .site-nav-toggle {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--saa-text-muted);
  cursor: pointer;
  display: inline-flex;
  margin: 0 0 0 -2px;
  padding: 10px 0 12px;   /* wie `body .site-nav-primary a` (styles.css) */
}
.site-nav-item .site-nav-toggle .material-symbols-outlined {
  font-size: 18px;
  transition: transform 160ms ease;
}
.site-nav-item.is-open .site-nav-toggle .material-symbols-outlined { transform: rotate(180deg); }
.site-nav-item .site-nav-toggle:focus-visible {
  border-radius: var(--saa-radius-sm, 8px);
  outline: 2px solid var(--saa-red);
  outline-offset: 2px;
}

/* --- Kopf: Mega-Menü (Desktop, Leiste sichtbar) --------------------------- */
.site-nav-primary .site-mega {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: var(--saa-radius-card, 16px);
  box-shadow: var(--saa-card-shadow-hover, 0 16px 40px rgba(7, 17, 28, .12));
  left: 50%;
  min-width: 260px;
  opacity: 0;
  padding: 22px 26px 24px;
  pointer-events: none;
  position: absolute;
  top: calc(100% - 6px);
  transform: translate(-50%, 6px);
  transition: opacity 140ms ease, transform 140ms ease;
  visibility: hidden;
  white-space: normal;
  z-index: 90;
}
.site-nav-primary .site-mega--wide { min-width: 760px; }
/* Tastaturfokus öffnet per JS (site-shell.js, focusin) – kein :focus-within, sonst
   liesse Escape das Menü nicht schliessen, solange der Fokus im Menüpunkt bleibt. */
.site-nav-item.is-open > .site-mega,
.site-nav-item:hover > .site-mega {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
  visibility: visible;
}
/* Unsichtbare Brücke zwischen Leiste und Menü, damit die Maus nicht «abreisst». */
.site-nav-item.has-menu::after {
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  right: 0;
  top: 100%;
}

.site-nav-primary .site-mega__inner {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(200px, 1fr);
}
.site-nav-primary .site-mega--cols-2 .site-mega__inner { grid-template-columns: repeat(2, minmax(200px, max-content)); }
/* 03.10.2026: «Kooperationspartner werden» brach in der 200px-Spalte um. Zweispaltige Menüs
   wachsen jetzt mit dem längsten Eintrag; Menüeinträge bleiben einzeilig. */
@media (min-width: 1024px) {
  /* eine Klasse mehr als die allgemeine Regel «.site-mega__col a { white-space: normal !important }» weiter unten */
  html body .site-nav-primary .site-mega--cols-2 .site-mega__col a { white-space: nowrap !important; }
  /* Das Panel hatte eine feste Breite (482px) – es wächst jetzt mit den Spalten. */
  html body .site-nav-primary .site-mega--cols-2:not(#____never____) { width: max-content !important; }
  html body .site-nav-primary .site-mega--cols-2 .site-mega__inner:not(#____never____) { grid-template-columns: repeat(2, minmax(200px, max-content)) !important; }
}
.site-nav-primary .site-mega--cols-3 .site-mega__inner { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
/* Vier Spalten (Lösungen seit 18.09.2026: 27 Use Cases in sechs Gruppen + Bausteine + Produkte).
   Leicht nach rechts verschoben, damit das Menü unter dem zweiten Reiter nicht links aus dem Fenster läuft. */
.site-nav-primary .site-mega--cols-4 { min-width: 920px; }
.site-nav-primary .site-mega--cols-4 .site-mega__inner { grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 24px; }
.site-nav-item.is-open > .site-mega--cols-4,
.site-nav-item:hover > .site-mega--cols-4 { transform: translate(calc(-50% + 60px), 0); }
.site-nav-primary .site-mega--cols-4 { transform: translate(calc(-50% + 60px), 6px); }
.site-nav-primary .site-mega__col { display: flex; flex-direction: column; min-width: 0; }
.site-nav-primary .site-mega__title {
  color: var(--saa-red);
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
/* R6 setzt `body .site-nav-primary a` mit !important (12px, Grossbuchstaben, 850).
   Für Menü-Links darum ebenfalls !important mit höherer Spezifität. */
html body .site-nav-primary .site-mega__col a {
  border: 0 !important;
  border-radius: var(--saa-radius-sm, 8px);
  color: var(--saa-text) !important;
  flex: 0 0 auto !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  margin: 0 -8px;
  padding: 7px 8px !important;
  text-transform: none !important;
  white-space: normal !important;
}
html body .site-nav-primary .site-mega__col a:hover,
html body .site-nav-primary .site-mega__col a:focus-visible {
  background: var(--saa-surface-soft);
  color: var(--saa-red) !important;
}
.site-nav-primary .site-mega__col--cta {
  border-top: 1px solid var(--saa-border);
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 16px;
}
html body .site-nav-primary .site-mega__col--cta a.site-mega__cta {
  align-self: flex-start;
  background: var(--saa-cta-secondary-bg, #07111c);
  border-radius: var(--saa-radius-control, 999px);
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0;
  padding: 11px 20px !important;
}
html body .site-nav-primary .site-mega__col--cta a.site-mega__cta:hover { background: var(--saa-cta-secondary-bg-hover, #0b1a2a); color: #fff !important; }

/* --- Kopf: Sekundärlink (Blueprint §5.1, optional) ------------------------- */
.site-header__secondary {
  color: var(--saa-text);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  white-space: nowrap;
}
.site-header__secondary:hover { color: var(--saa-red); }
@media (max-width: 1499.98px) { .site-header__secondary { display: none; } }

/* --- Reiterleiste 1024–1359px (Joshua 03.10.2026, Runde 40: «Header mit Reitern muss auf dem Desktop fix
   offen sein»). Vorher kam die Leiste erst ab 1360px; ein 1280er-Laptop sah nur den Menü-Knopf.
   styles.css (gesperrt) blendet die Leiste bis 1359px per Einfach-ID-Hack aus und zeigt den Knopf –
   hier mit einer ID-Stufe mehr zurückgenommen. Damit elf Reiter passen, werden Schrift, Abstände,
   Pfeile und Logo in diesem Band fliessend kleiner; der rote Kopf-Knopf weicht unter 1280px (er steht
   in jedem Hero). */
@media (min-width: 1024px) and (max-width: 1359.98px) {
  html body .site-nav-primary:not(#____never____):not(#____sw____) {
    display: flex !important;
    gap: clamp(9px, calc(0.95vw - 1px), 16px) !important;
    position: static !important;
    flex-direction: row !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  html body .site-header .saa-mobile-nav-toggle:not(#____never____):not(#____sw____),
  html body nav .saa-mobile-nav-toggle:not(#____never____):not(#____sw____) { display: none !important; }
  html body .site-nav-primary a.site-nav-link:not(#____never____):not(#____sw____) {
    font-size: clamp(10.5px, calc(0.42vw + 6px), 12px) !important;
    letter-spacing: 0 !important;
  }
  .site-nav-item .site-nav-toggle { margin-left: -4px; }
  .site-nav-item .site-nav-toggle .material-symbols-outlined { font-size: 16px; }
  html body:not(#____never____):not(#____sw____) .site-logo:not(#____x____) { width: clamp(132px, 12.5vw, 188px) !important; max-width: 188px !important; height: auto !important; flex: 0 0 auto !important; }
  html body:not(#____never____):not(#____sw____) .site-logo img:not(#____x____) { width: 100% !important; max-width: 100% !important; height: auto !important; }
  body .site-header__inner { gap: clamp(12px, 1.4vw, 24px) !important; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  html body:not(#____never____):not(#____sw____) .site-header__actions .site-header__cta:not(#____x____) { display: none !important; }
}

/* --- Kopf: Menü-Knopf-Modus (<= 1023.98px, wie main.js) ---------
   Das Panel ist eine senkrechte Liste; Untermenüs klappen per Knopf auf. */
@media (max-width: 1023.98px) {
  nav [data-mobile-nav-panel] .site-nav-item {
    align-items: center;
    border-bottom: 1px solid var(--saa-border);
    display: flex;
    flex-wrap: wrap;
    position: static;
  }
  html body nav [data-mobile-nav-panel] .site-nav-item > a.site-nav-link {
    border-bottom: 0 !important;
    flex: 1 1 auto !important;
  }
  nav [data-mobile-nav-panel] .site-nav-item .site-nav-toggle {
    color: inherit;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    padding: 8px 10px;
  }
  /* Desktop-Positionierung des Mega-Menüs vollständig zurücknehmen (auch :hover/.is-open-Varianten). */
  nav [data-mobile-nav-panel] .site-nav-item > .site-mega {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: none;
    flex-basis: 100%;
    left: auto;
    min-width: 0;
    opacity: 1;
    padding: 0 0 12px;
    pointer-events: auto;
    position: static;
    transform: none;
    transition: none;
    visibility: visible;
  }
  nav [data-mobile-nav-panel] .site-nav-item.is-open > .site-mega { display: block; }
  nav [data-mobile-nav-panel] .site-mega .site-mega__inner { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  nav [data-mobile-nav-panel] .site-mega__title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 6px 0 2px;
    opacity: .7;
    text-transform: uppercase;
  }
  /* styles.css setzt `html body nav.is-mobile-nav-open .site-nav-primary a:not(#____never____)`
     mit !important (ID-Stufe) – darum hier zwei ID-Negationen. */
  html body nav [data-mobile-nav-panel] .site-mega__col a:not(#____never____):not(#____sw____) {
    border-bottom: 0 !important;
    display: block !important;
    line-height: 1.35 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    margin: 0;
    min-height: 44px;
    padding: 11px 0 !important;
    text-transform: none !important;
  }
  html body nav [data-mobile-nav-panel] .site-mega__col--cta { border-top: 0; margin-top: 4px; padding-top: 0; }
  html body nav [data-mobile-nav-panel] .site-mega__col--cta a.site-mega__cta:not(#____never____):not(#____sw____) {
    display: inline-block !important;
    background: var(--saa-cta-secondary-bg, #07111c) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 600 !important;
    margin-top: 6px;
    padding: 11px 20px !important;
  }
}
@media (max-width: 1024px) {
  nav [data-mobile-nav-panel] .site-nav-item { border-bottom-color: rgba(239, 241, 243, 0.14); }
  nav [data-mobile-nav-panel] .site-nav-item .site-nav-toggle { color: rgba(239, 241, 243, 0.92); }
}

/* --- Fuss: sechs Bereiche (Sparring 18.09.2026) ----------------------------
   Marke + fünf Listen (Beratung & Lösungen, Labs, Branchen, Wissen, Unternehmen & Partner);
   «Recht» steht in der Fusszeile. Wissen und Academy haben keinen Reiter mehr und leben hier. */
.saa-footer.sw-footer .saa-footer__inner {
  gap: 36px 28px;
  grid-template-columns: minmax(200px, 1.2fr) repeat(5, minmax(0, 1fr));
}
@media (max-width: 1360px) {
  .saa-footer.sw-footer .saa-footer__inner { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .saa-footer.sw-footer .saa-footer__brand { grid-column: 1 / -1; }
}
.saa-footer.sw-footer .saa-footer__brand > a { display: inline-block; margin-top: 6px; }
@media (max-width: 1100px) {
  .saa-footer.sw-footer .saa-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .saa-footer.sw-footer .saa-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .saa-footer.sw-footer .saa-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
  .saa-footer.sw-footer .saa-footer__inner { grid-template-columns: 1fr !important; }
}

/* --- Produktstatus (Blueprint §10.2: Konzept · Pilot · Beta · Produktiv) ---
   Ein Badge je Produkt, überall gleich. Farben aus den Tokens, kein Ampelsystem. */
.sw-status {
  align-items: center;
  border: 1px solid var(--saa-border);
  border-radius: var(--saa-radius-control, 999px);
  color: var(--saa-text-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 6px 11px;
  text-transform: uppercase;
  white-space: nowrap;
}
.sw-status::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 7px;
  width: 7px;
}
.sw-status--produktiv { border-color: var(--saa-red); color: var(--saa-red); }
.sw-status--beta { color: var(--saa-text); }
.page-section--dark .sw-status,
.bg-graphite .sw-status { border-color: var(--saa-card-border-dark, rgba(239, 241, 243, .16)); color: rgba(239, 241, 243, .86); }
.page-section--dark .sw-status--produktiv,
.bg-graphite .sw-status--produktiv { border-color: #ff302a; color: #ff302a; }

/* --- Inhaltsbausteine (Phase 1–9) --------------------------------------
   Erweiterungen der R6-Bausteine aus labs-partner.css, nur mit Tokens. */

/* Kartenraster mit 4 bzw. 2 Spalten (Use Cases, Produkte, Layer-USPs) */
.partner-triad.sw-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.partner-triad.sw-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partner-triad.sw-grid-4 article:last-child,
.partner-triad.sw-grid-2 article:last-child { border-color: var(--saa-border); }
.partner-triad article .sw-status { margin-bottom: 12px; }
.partner-triad article .sw-card__meta {
  color: var(--saa-text-muted);
  display: block;
  font-size: 13px;
  margin: -6px 0 10px;
}
@media (max-width: 1024px) {
  .partner-triad.sw-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .partner-triad.sw-grid-4, .partner-triad.sw-grid-2 { grid-template-columns: 1fr; }
}

/* Tabelle (Vergleiche, Entscheidungshilfen – Blueprint §33.3) */
.sw-table-wrap { margin-top: clamp(24px, 3vw, 36px); overflow-x: auto; }
.sw-table {
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  min-width: 560px;
  width: 100%;
}
.sw-table th, .sw-table td {
  border-bottom: 1px solid var(--saa-border);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}
.sw-table th {
  color: var(--saa-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sw-table td:first-child { font-weight: 500; }
/* Mobil: Zeilen als Karten, kein waagrechtes Scrollen (Layout-Vertrag) */
@media (max-width: 640px) {
  .sw-table { min-width: 0; }
  .sw-table thead { display: none; }
  .sw-table tr { border-bottom: 1px solid var(--saa-border); display: block; padding: 10px 0; }
  .sw-table td { border: 0; display: block; padding: 4px 0; }
  .sw-table td[data-label]:not([data-label=""])::before {
    color: var(--saa-text-muted);
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .page-section--dark .sw-table tr { border-bottom-color: var(--saa-card-border-dark, rgba(239, 241, 243, .16)); }
}
.page-section--dark .sw-table th, .page-section--dark .sw-table td {
  border-bottom-color: var(--saa-card-border-dark, rgba(239, 241, 243, .16));
  color: rgba(239, 241, 243, .9);
}

/* Architektur-Layer (Blueprint §15): waagrechte Bänder, oben Anwendungen, unten Betrieb */
.sw-layers {
  display: grid;
  gap: 10px;
  margin-top: clamp(28px, 3.2vw, 42px);
}
.sw-layers__row {
  align-items: center;
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: var(--saa-radius-card, 16px);
  display: grid;
  gap: 14px 24px;
  grid-template-columns: minmax(180px, 220px) 1fr;
  padding: 16px 20px;
}
.sw-layers__row--core { border-color: rgba(217, 30, 24, .38); }
.sw-layers__row--platform { background: var(--saa-surface-soft); }
.sw-layers__name { font-size: 15px; font-weight: 600; margin: 0; }
.sw-layers__name small { color: var(--saa-text-muted); display: block; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
html body main .sw-layers__items:not(#____never____):not(#____sw____) { margin: 0; font-size: 15px !important; line-height: 1.55 !important; color: var(--saa-text); align-self: center; }
.sw-layers__arrow { color: var(--saa-text-muted); font-size: 12px; letter-spacing: .06em; margin: 0; text-align: center; text-transform: uppercase; }
.page-section--dark .sw-layers__row { background: var(--saa-card-bg-dark, #0c1a27); border-color: var(--saa-card-border-dark, rgba(239, 241, 243, .16)); }
.page-section--dark .sw-layers__row--platform { background: rgba(239, 241, 243, .06); }
.page-section--dark .sw-layers__items { color: rgba(239, 241, 243, .9); }
.page-section--dark .sw-layers__name, .page-section--dark .sw-layers__arrow { color: rgba(239, 241, 243, .9); }
@media (max-width: 640px) {
  .sw-layers__row { grid-template-columns: 1fr; }
}

/* Shared Business Core (Blueprint §18/§19): Kern in der Mitte, Module aussen */
.sw-core {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(28px, 3.2vw, 42px);
}
.sw-core__module, .sw-core__center {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: var(--saa-radius-card, 16px);
  padding: 16px 18px;
}
.sw-core__module h3, .sw-core__center h3 { font-size: 16px; margin: 0 0 4px; }
.sw-core__module p, .sw-core__center p { color: var(--saa-text-muted); margin: 0; }  /* Grösse/Zeilenhöhe aus styles.css (16px/1.62) */
.sw-core__center {
  border-color: var(--saa-red);
  grid-column: 2;
  grid-row: 2;
  text-align: center;
}
.sw-core__center ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; margin: 10px 0 0; padding: 0; }
.sw-core__center li { border: 1px solid var(--saa-border); border-radius: var(--saa-radius-control, 999px); font-size: 12px; padding: 4px 9px; }
.page-section--dark .sw-core__module, .page-section--dark .sw-core__center { background: var(--saa-card-bg-dark, #0c1a27); border-color: var(--saa-card-border-dark, rgba(239, 241, 243, .16)); }
.page-section--dark .sw-core__center { border-color: #ff302a; }
.page-section--dark .sw-core__module p, .page-section--dark .sw-core__center p { color: rgba(239, 241, 243, .78); }
@media (max-width: 640px) {
  .sw-core { grid-template-columns: 1fr; }
  .sw-core__center { grid-column: 1; grid-row: 1; }
}

/* Artikel-Kopf im Wissen (Autor, Datum – Blueprint §30) */
.sw-byline { color: var(--saa-text-muted); font-size: 13px; margin: 10px 0 0; }
.sw-byline strong { font-weight: 600; }

/* Kurzantwort-Box (Blueprint §33.3 «direkte Antwort») */
.sw-answer {
  background: var(--saa-surface-soft);
  border-left: 3px solid var(--saa-red);
  border-radius: 0 var(--saa-radius-card, 16px) var(--saa-radius-card, 16px) 0;
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  max-width: var(--saig-measure, 58ch);
  padding: 16px 20px;
}
.sw-answer p { margin: 0; }

/* --- Mega-Menü: Gruppen in einer Spalte (Use-Case-Erweiterung 17.09.2026, Spezifikation §6.1) -------------
   Desktop: <span class="site-mega__title"> sichtbar, der Akkordeon-Knopf ist display:none (nicht im a11y-Baum).
   Menü-Knopf-Modus: umgekehrt – der Knopf trägt den Titel und klappt die Gruppe auf/zu. */
.site-nav-primary .site-mega__group + .site-mega__group { margin-top: 14px; }
.site-nav-primary .site-mega__group--plain { border-top: 1px solid var(--saa-border); padding-top: 8px; }
.site-nav-primary .site-mega__group-toggle { display: none; }
.site-nav-primary .site-mega__group-links { display: flex; flex-direction: column; }

@media (max-width: 1023.98px) {
  nav [data-mobile-nav-panel] .site-mega__group > .site-mega__title { display: none; }
  html body nav [data-mobile-nav-panel] button.site-mega__group-toggle {
    align-items: center;
    appearance: none;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    justify-content: space-between;
    letter-spacing: 0.06em;
    margin: 4px 0 0;
    min-height: 44px;
    opacity: .85;
    padding: 8px 0;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
  }
  html body nav [data-mobile-nav-panel] button.site-mega__group-toggle::after {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    font-size: 20px;
    line-height: 1;
    text-transform: none;
    transition: transform 140ms ease;
  }
  html body nav [data-mobile-nav-panel] button.site-mega__group-toggle[aria-expanded="false"]::after { transform: rotate(-90deg); }
  html body nav [data-mobile-nav-panel] button.site-mega__group-toggle:focus-visible { outline: 2px solid var(--saa-red); outline-offset: 2px; }
  nav [data-mobile-nav-panel] .site-mega__group.is-collapsed .site-mega__group-links { display: none; }
  nav [data-mobile-nav-panel] .site-mega__group + .site-mega__group { margin-top: 0; }
  nav [data-mobile-nav-panel] .site-mega__group--plain { border-top: 0; padding-top: 0; }
}

/* --- Systemkette (Use-Case-Detailseite §8.7) --------------------------------------------------------- */
.sw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding: 0;
}
.sw-chips li {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 999px;
  color: var(--saa-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  padding: 8px 14px;
}
.page-section--dark .sw-chips li {
  background: transparent;
  border-color: var(--saa-card-border-dark, rgba(239, 241, 243, .16));
  color: rgba(239, 241, 243, .9);
}

/* --- Use-Case-Hub: Branchen-Tags auf Karten und clientseitiger Filter (§7.3/§7.4) ------------------- */
.partner-triad article .sw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.sw-tag {
  border: 1px solid var(--saa-border);
  border-radius: 999px;
  color: var(--saa-text-muted);
  font-size: 12px;
  line-height: 1.2;
  padding: 3px 9px;
}
.sw-uc-grid article[hidden] { display: none; }
.partner-triad article h3, .site-mega__col a { hyphens: auto; overflow-wrap: anywhere; }
.sw-filter { margin-top: clamp(20px, 2.4vw, 30px); }
.sw-filter__row { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.sw-filter__label {
  color: var(--saa-text-muted);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  min-width: 64px;
  text-transform: uppercase;
}
.sw-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
html body .sw-filter__chip {
  appearance: none;
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 999px;
  color: var(--saa-text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 40px;
  padding: 8px 14px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
html body .sw-filter__chip:hover { border-color: var(--saa-text); }
html body .sw-filter__chip:focus-visible { outline: 2px solid var(--saa-red); outline-offset: 2px; }
html body .sw-filter__chip.is-active {
  background: var(--saa-cta-secondary-bg, #07111c);
  border-color: var(--saa-cta-secondary-bg, #07111c);
  color: #fff;
}
.sw-filter__status { color: var(--saa-text-muted); font-size: 14px; margin: 4px 0 0; }
.sw-filter__empty { color: var(--saa-text-muted); margin-top: 24px; text-align: center; }

/* --- Potenzialanalyse: Hinweis auf den Herkunfts-Use-Case (§17) ------------------------------------- */
.sw-prefill {
  background: var(--saa-surface-soft);
  border-left: 3px solid var(--saa-red);
  border-radius: 0 var(--saa-radius-sm, 8px) var(--saa-radius-sm, 8px) 0;
  font-size: 15px;
  margin: 0 0 18px;
  padding: 10px 14px;
}
.sw-prefill[hidden] { display: none; }

/* =====================================================================================================
   Feedback Joshua 18.09.2026 – sechs Punkte (Karten-Link-Ausrichtung, Pill-Buttons, Seitenrand,
   Interaktion). Gilt site-weit, nur Tokens, keine neuen Farben.
   ===================================================================================================== */

/* 1) Karten-Links immer auf einer Linie am unteren Kartenrand: die Karte wird Flex-Spalte, der Link
      rückt mit margin-top:auto nach unten. Gilt für alle R6-/Kartenraster. */
.partner-triad article,
.partner-delivery article,
.partner-models article,
.lp-card {
  display: flex;
  flex-direction: column;
}
.partner-triad article > .partner-ways__link,
.partner-delivery article > .partner-ways__link,
.partner-models article > .partner-ways__link,
.lp-card > .partner-ways__link {
  margin-top: auto;
  padding-top: 20px;
}
.partner-triad article > p:last-of-type,
.partner-delivery article > p:last-of-type { margin-bottom: 0; }
.partner-triad article > ul { margin-bottom: 14px; }

/* 3) Pill-Links (labs-criteria): keine Unterstreichung, Pfeil als Button-Signal, Hover füllt in Rot.
      Nur Pills mit Link werden zum Button; reine Text-Pills bleiben ruhig. */
html body .labs-criteria li:has(a) {
  color: var(--saa-text);
  padding: 0;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
html body .labs-criteria li a {
  align-items: center;
  border-radius: 999px;
  color: inherit;
  display: inline-flex;
  font-weight: 500;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px 9px 18px;
  text-decoration: none !important;
}
html body .labs-criteria li a::after {
  content: "arrow_forward";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s ease;
}
@media (hover: hover) {
  html body .labs-criteria li:has(a):hover {
    background: var(--saa-red);
    border-color: var(--saa-red);
    color: #fff;
    transform: translateY(-1px);
  }
  html body .labs-criteria li:has(a):hover a::after { transform: translateX(3px); }
}
html body .labs-criteria li:has(a:focus-visible) { border-color: var(--saa-red); }
html body .labs-criteria li a:focus-visible { outline-offset: 0; border-radius: 999px; }

/* 5) Seitenrand: Die Website nutzt eine breitere Spur und einen schmaleren Rand als der R6-Vertrag
      (1280 / clamp 12–48px). Bei 1440px: Rand 40px statt 80px. */
:root {
  --saig-shell: 1360px;
  --saig-gutter: clamp(12px, 3vw, 32px);
}

/* 6) Interaktion, dezent und einheitlich: Pfeile wandern, Karten heben sich, Zeilen und Chips
      reagieren, Bilder zoomen minimal. Bewegung nur mit Hover-Geräten und ohne reduced-motion. */
.partner-ways__link .material-symbols-outlined,
.hero-scene__secondary .material-symbols-outlined { transition: transform .2s ease; }
.partner-ways__link { transition: color .2s ease; }
.sw-chips li, .sw-tag, .sw-filter__chip, .site-mega__col a,
.pp-journey article, .sw-table tbody tr, .lp-figure img, .sw-core article {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lp-figure { overflow: hidden; }
@media (hover: hover) {
  .partner-ways__link:hover { text-decoration: none; }
  .partner-ways__link:hover .material-symbols-outlined,
  .hero-scene__secondary:hover .material-symbols-outlined { transform: translateX(4px); }
  .page-section--dark .partner-triad article:hover,
  .page-section--dark .partner-delivery article:hover {
    border-color: rgba(255, 84, 78, .55);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    transform: translateY(-2px);
  }
  .partner-delivery article:hover {
    border-color: rgba(217, 30, 24, .55);
    box-shadow: 0 12px 30px rgba(30, 41, 59, .09);
    transform: translateY(-2px);
  }
  .sw-chips li:hover { border-color: var(--saa-red); color: var(--saa-red); }
  .page-section--dark .sw-chips li:hover { border-color: #ff544e; color: #fff; }
  .sw-tag:hover { border-color: var(--saa-text); color: var(--saa-text); }
  .sw-table tbody tr:hover td { background: var(--saa-surface-soft); }
  .page-section--dark .sw-table tbody tr:hover td { background: rgba(255, 255, 255, .05); }
  .pp-journey article:hover h3 { color: var(--saa-red); }
  .page-section--dark .pp-journey article:hover h3 { color: #ff544e; }
  .pp-journey article h3 { transition: color .2s ease; }
  .lp-split:hover .lp-figure img { transform: scale(1.02); }
  .sw-core article:hover { border-color: var(--saa-red); }
}
@media (prefers-reduced-motion: reduce) {
  .partner-triad article, .partner-delivery article, .partner-models article, .lp-card,
  .labs-criteria li, .partner-ways__link .material-symbols-outlined, .hero-scene__secondary .material-symbols-outlined,
  .sw-chips li, .sw-tag, .sw-filter__chip, .site-mega__col a, .pp-journey article, .sw-table tbody tr, .lp-figure img, .sw-core article {
    transition: none !important;
    transform: none !important;
  }
}

/* 2) Zuordnung Use Case ↔ Baustein ↔ Produkt als Matrix (Hub), statt Textliste. Ab 900px: Tabelle mit
      Punkten (dunkel = Baustein, rot = Produkt); darunter: eine Karte je Use Case mit Chips. */
.sw-matrix-wrap { margin-top: clamp(24px, 3vw, 36px); overflow-x: auto; }
.sw-matrix { border-collapse: separate; border-spacing: 0; font-size: 14px; width: 100%; }
.sw-matrix th, .sw-matrix td { border-bottom: 1px solid var(--saa-border); padding: 10px 8px; }
.sw-matrix thead th {
  color: var(--saa-text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding-bottom: 12px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: bottom;
}
.sw-matrix thead th.sw-matrix__uc { text-align: left; }
.sw-matrix thead th span { display: inline-block; max-width: 6.5em; line-height: 1.25; }
.sw-matrix th.sw-matrix__group { border-bottom: 2px solid var(--saa-border); color: var(--saa-text); font-size: 12px; padding-bottom: 6px; }
.sw-matrix th.sw-matrix__group--produkt { color: var(--saa-red); }
.sw-matrix tbody th { font-weight: 500; text-align: left; white-space: nowrap; }
.sw-matrix tbody th a { color: inherit; text-decoration: none; }
.sw-matrix tbody th small { color: var(--saa-text-muted); display: block; font-size: 12px; font-weight: 400; }
.sw-matrix td { text-align: center; }
.sw-matrix td.is-on::before, .sw-matrix td.is-product::before {
  background: var(--saa-text);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 12px;
  width: 12px;
}
.sw-matrix td.is-product::before { background: var(--saa-red); }
.sw-matrix td.sw-matrix__sep, .sw-matrix th.sw-matrix__sep { border-left: 1px solid var(--saa-border); }
.page-section--dark .sw-matrix th, .page-section--dark .sw-matrix td { border-color: var(--saa-card-border-dark, rgba(239, 241, 243, .16)); }
.page-section--dark .sw-matrix thead th, .page-section--dark .sw-matrix tbody th small { color: rgba(239, 241, 243, .7); }
.page-section--dark .sw-matrix th.sw-matrix__group { color: #fff; }
.page-section--dark .sw-matrix th.sw-matrix__group--produkt { color: #ff544e; }
.page-section--dark .sw-matrix td.is-on::before { background: rgba(239, 241, 243, .85); }
.page-section--dark .sw-matrix td.is-product::before { background: #ff544e; }
.sw-matrix tbody tr { transition: background-color .2s ease; }
@media (hover: hover) {
  .sw-matrix tbody tr:hover th, .sw-matrix tbody tr:hover td { background: var(--saa-surface-soft); }
  .page-section--dark .sw-matrix tbody tr:hover th, .page-section--dark .sw-matrix tbody tr:hover td { background: rgba(255, 255, 255, .05); }
  .sw-matrix tbody th a:hover { color: var(--saa-red); }
  .page-section--dark .sw-matrix tbody th a:hover { color: #ff544e; }
}
.sw-matrix-legend { color: var(--saa-text-muted); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; margin: 14px 0 0; }
.sw-matrix-legend span::before { border-radius: 50%; content: ""; display: inline-block; height: 10px; margin-right: 8px; width: 10px; background: var(--saa-text); }
.sw-matrix-legend span.is-product::before { background: var(--saa-red); }
.page-section--dark .sw-matrix-legend { color: rgba(239, 241, 243, .7); }
.page-section--dark .sw-matrix-legend span::before { background: rgba(239, 241, 243, .85); }
.page-section--dark .sw-matrix-legend span.is-product::before { background: #ff544e; }

/* 4) Team-Platzhalter: Karten ohne Personen, bis Bilder und Angaben freigegeben sind. */

/* Nur für Screenreader (Matrix-Zellen tragen den Namen des markierten Bausteins/Produkts). */
.sr-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }

/* Feedback Joshua 18.09. (2): Text-Buttons («Mehr», «Use Case ansehen», «Alle Use Cases» …) im selben Pill-Stil
   wie die Pill-Links – Rahmen, Pfeil, beim Hover rote Füllung; nie unterstrichen. Gilt site-weit für
   .partner-ways__link, auch im Zugänglichkeits-Fokus. */
html body .partner-ways__link,
html body .partner-ways__link:hover,
html body .partner-ways__link:focus-visible {
  align-items: center;
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 999px;
  color: var(--saa-text);
  -webkit-text-fill-color: var(--saa-text);
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  gap: 8px;
  line-height: 1.2;
  min-height: 44px;
  padding: 9px 16px 9px 18px;
  text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  width: fit-content;
}
html body .partner-ways__link .material-symbols-outlined { color: var(--saa-red) !important; -webkit-text-fill-color: var(--saa-red) !important; font-size: 18px; }
html body .page-section--dark .partner-ways__link:not(article *) .material-symbols-outlined,
html body .bg-graphite .partner-ways__link:not(article *) .material-symbols-outlined { color: #ff544e !important; -webkit-text-fill-color: #ff544e !important; }
html body .partner-ways__link:hover .material-symbols-outlined { color: #fff !important; -webkit-text-fill-color: #fff !important; }
/* In dunklen Sektionen nur die frei stehenden Buttons hell umranden – Karten bleiben weiss. */
html body .page-section--dark .partner-ways__link:not(article *),
html body .bg-graphite .partner-ways__link:not(article *) {
  background: transparent;
  border-color: var(--saa-card-border-dark, rgba(239, 241, 243, .3));
  color: #fff;
  -webkit-text-fill-color: #fff;
}
@media (hover: hover) {
  html body .partner-ways__link:hover,
  html body .page-section--dark .partner-ways__link:not(article *):hover,
  html body .bg-graphite .partner-ways__link:not(article *):hover {
    background: var(--saa-red);
    border-color: var(--saa-red);
    color: #fff;
    -webkit-text-fill-color: #fff;
    transform: translateY(-1px);
  }
}
html body .partner-ways__link:focus-visible { border-color: var(--saa-red); outline-offset: 2px; }
/* Karten: der Link steht als Pill am unteren Rand, darum kein zusätzlicher Innenabstand nach oben nötig. */
.partner-triad article > .partner-ways__link,
.partner-delivery article > .partner-ways__link,
.partner-models article > .partner-ways__link,
.lp-card > .partner-ways__link { padding-top: 9px; margin-top: auto; }
.partner-triad article > p:not(:last-child),
.partner-delivery article > p:not(:last-child) { margin-bottom: 18px; }

/* =====================================================================================================
   Feedback Joshua 18.09. (3): Typografie-Regeln – Hero-Titel darf nie abgeschnitten werden, Hero ohne
   Radius, keine Kurzzeilen (2–4 Wörter) in Überschriften und Absätzen.
   ===================================================================================================== */

/* Hero-Titel: jede Zeile bricht um (R6 setzt nowrap für die Typewriter-Zeile), Zeilen stehen als Block,
   Grösse skaliert mit dem Fenster und der Textbereich ist breit genug für die langen Titel. */
html body:not(#saig-x) main .hero-scene .hero-scene__title .hero-title-line:not(#____never____):not(#____sw____) {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  text-wrap: balance;
  white-space: normal !important;
}
html body:not(#saig-x) main .hero-scene .hero-scene__title .hero-title-line + .hero-title-line::before { content: none !important; }
html body:not(#saig-x) main .hero-scene .hero-scene__title:not(#____never____):not(#____sw____) {
  font-size: clamp(30px, 3.6vw, 56px) !important;
  line-height: 1.08 !important;
  max-width: 100% !important;
}
html body:not(#saig-x) main .hero-scene .hero-scene__content:not(#____never____):not(#____sw____) { max-width: min(860px, 100%) !important; }

/* Hero-Bild: keine Kartenecken – das Hero ist eine Vollfläche. */
html body:not(#saig-x) main .hero-scene .hero-scene__media:not(#____never____):not(#____sw____),
html body:not(#saig-x) main .hero-scene .hero-scene__media img:not(#____never____):not(#____sw____) { border-radius: 0 !important; }

/* Zeilenumbruch-Regel (site-weit): Überschriften ausgewogen (keine Einzelwort-Zeile), Absätze und Listen
   mit «pretty» (Browser vermeidet Hurenkinder/kurze Schlusszeilen). Karten-Absätze nutzen die volle Breite. */
h1, h2, h3, h4, .lp-head h2, .hero-scene__copy { text-wrap: balance; }
p, li, dd, .sw-answer p, .sw-table td { text-wrap: pretty; }
.partner-triad article p, .partner-delivery article p, .lp-card p, .pp-journey article p { max-width: none; }

/* Überlauf-Schutz (Prüfung 18.09. aller 73 Seiten): saa-bind-Gruppen dürfen umbrechen (nowrap liess Text bei 1440px aus der Spur laufen), Inhaltsbilder nie breiter als ihre Spalte. */
html body .saa-bind, html body .saa-bind-kern { white-space: normal !important; }
html body main img:not(.site-logo__img):not(#____never____) { max-width: 100%; height: auto; }

/* =====================================================================================================
   Kontaktformular (Variante 2 «Kontext-Schalter», optimiert; Freigabe Joshua 18.09.2026).
   Grundbausteine (contact-field, contact-mode, contact-submit) kommen aus styles.css; hier nur die Ergänzungen:
   Kacheln mit Nutzen-Satz, Optional-Kennzeichnung, Chips, Validierung, Fehlerzusammenfassung, Seitenspalte.
   ===================================================================================================== */
.sw-form .contact-workflow-grid { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); }
.sw-form .contact-mode__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html body .sw-form .contact-mode__label.sw-form__mode:not(#____never____) { align-items: flex-start; min-height: 64px; padding: 12px 14px; }
.sw-form .contact-mode__label.sw-form__mode .contact-mode__marker { margin-top: 3px; }
.sw-form__mode-text { display: block; min-width: 0; }
.sw-form__mode-text strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sw-form__mode-text small { color: var(--saa-text-muted); display: block; font-size: 13px; font-weight: 400; line-height: 1.4; margin-top: 2px; text-transform: none; letter-spacing: 0; }
.sw-form__opt { color: var(--saa-text-muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.sw-form__label, .sw-form__set-title { color: #07111c; display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; padding-left: 15px; text-transform: uppercase; margin: 0 0 8px; }
.sw-form__set-title { color: var(--saa-text-muted); font-size: 12px; letter-spacing: .08em; margin: 6px 0 10px; }
.sw-form__wrap { position: relative; }
.sw-form__wrap .sw-form__valid { color: #1c7c3d; display: none; font-size: 20px; pointer-events: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.sw-form__field[data-valid] .sw-form__wrap .sw-form__valid { display: block; }
.sw-form__field[data-valid] .sw-form__wrap input { padding-right: 40px; }
.sw-form__help { color: var(--saa-text-muted); display: block; font-size: 13px; margin-top: 6px; padding-left: 15px; }
.sw-form__error { color: var(--saa-red); display: none; font-size: 13px; gap: 6px; align-items: flex-start; margin-top: 6px; padding-left: 15px; }
.sw-form__error .material-symbols-outlined { font-size: 16px; margin-top: 2px; }
.sw-form__field[data-error] .sw-form__error, .sw-form__consent[data-error] .sw-form__error { display: flex; }
.sw-form__consent .sw-form__error { padding-left: 0; }
html body .sw-form input[aria-invalid="true"]:not(#____never____), html body .sw-form textarea[aria-invalid="true"]:not(#____never____) { border-color: var(--saa-red) !important; }
.sw-form__summary { background: #fff4f4; border: 1px solid rgba(217, 30, 24, .35); border-radius: 8px; font-size: 14px; margin: 0 0 16px; padding: 12px 14px; }
.sw-form__summary[hidden] { display: none; }
.sw-form__summary ul { margin: 6px 0 0; padding-left: 18px; }
.sw-form__summary a { color: var(--saa-red); font-weight: 600; }
.sw-form__note { text-align: center; }
.sw-form__note span { display: none; } .sw-form__note span:not(.is-off) { display: inline; }
/* Seitenspalte (18.09.): nur das Bild, so hoch wie das Formular; es läuft beim Scrollen mit (sticky), damit Logo und Figur
   sichtbar bleiben, statt auf 1500px Höhe zerschnitten zu werden. */
.sw-form__side { display: block; align-self: stretch; min-height: 0; }
html body main .sw-form__side > img:not(#____never____) { position: sticky; top: 104px; width: 100%; height: min(calc(100vh - 132px), 100%) !important; min-height: 520px; max-width: none; object-fit: cover; object-position: center top; display: block; border-radius: var(--saa-radius-card, 16px); }
@media (max-width: 1024px) { .sw-form .contact-workflow-grid { grid-template-columns: 1fr; } .sw-form__side { display: none; } }
@media (max-width: 640px) { .sw-form .contact-mode__options { grid-template-columns: 1fr; } }

html body .sw-form .sw-form__set-title:not(#____never____) { color: var(--saa-text-muted); font-size: 12px !important; line-height: 1.4 !important; font-weight: 600; letter-spacing: .08em; margin: 6px 0 10px; text-transform: uppercase; }
html body .sw-form__consent .sw-form__error:not(#____never____):not(#____sw____) { color: var(--saa-red) !important; -webkit-text-fill-color: var(--saa-red) !important; font-weight: 400 !important; }

/* --- Galerie: echte Oberflächen und Beispielmotive (AP2, 18.09.2026) ---- */
.sw-gallery { display: grid; gap: 22px; margin-top: 36px; }
.sw-gallery--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sw-gallery--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-gallery--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sw-gallery__item { margin: 0; border: 1px solid var(--saa-line, #dfe6ee); border-radius: 16px; overflow: hidden; background: #fff; }
.sw-gallery__item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sw-gallery__item figcaption { padding: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--saa-text-muted, #445160); }
.page-section--dark .sw-gallery__item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.page-section--dark .sw-gallery__item figcaption { color: rgba(239,241,243,.8); }
@media (max-width: 900px) { .sw-gallery--cols-3, .sw-gallery--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sw-gallery { grid-template-columns: 1fr !important; } }
/* Keine Lücke im Bildraster (Joshua 03.10.2026, Runde 40). render.gallery_cols() wählt die Spaltenzahl
   nach der Bildzahl; hier die Reste: ein Einzelbild steht zentriert statt halb breit, und wo das Raster
   auf zwei Spalten fällt, steht ein übrig bleibendes letztes Bild mittig statt links mit Loch daneben.
   Drei Bilder auf dem Tablet: das erste gross über die ganze Breite, zwei darunter. */
.sw-gallery--cols-1 { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin-inline: auto; }
.sw-gallery--cols-2 > .sw-gallery__item:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 11px); }
@media (max-width: 900px) {
  .sw-gallery--cols-3 > .sw-gallery__item:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .sw-gallery--cols-3 > .sw-gallery__item:last-child:nth-child(odd):not(:nth-child(3)):not(:first-child),
  .sw-gallery--cols-4 > .sw-gallery__item:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 11px); }
}
@media (max-width: 560px) { .sw-gallery__item { grid-column: auto !important; width: auto !important; } }
.sw-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #07111c; }
.sw-gallery--vertical { max-width: 720px; margin-inline: auto; }
.sw-gallery--vertical .sw-video video { aspect-ratio: 9 / 16; }

/* --- Bildkarten (Startseite: Drei Wege, Branchen) – AP3 18.09.2026 ---------- */
.sw-imgcards .sw-imgcard { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; }
.sw-imgcard__media { margin: 0; }
.sw-imgcard__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sw-imgcard__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; }
.sw-imgcard__body h3 { margin: 0; }
.sw-imgcard__body p { margin: 0; flex: 1; }
.sw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .sw-imgcards.sw-grid-3, .sw-imgcards.sw-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .sw-imgcards.sw-grid-3, .sw-imgcards.sw-grid-4 { grid-template-columns: 1fr !important; } }
/* Fan-Laufband im Raster: Überschrift zentriert (card-fan.css), Lead hell */
html body .saa-benefits-fan-section .home-benefits-section__heading p { color: rgba(239,241,243,.8); }
/* Formular auf der Startseite: Abstand wie die übrigen Sektionen */
.home-page-sw .contact-form-shell { padding-block: clamp(64px, 8vw, 112px); }

/* --- Demo-Kennzeichnung (18.09.2026): Demodaten statt OPEN_EVIDENCE, vor Go-live ersetzen ---- */
.sw-demo {
  display: inline-block; vertical-align: middle; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid #c9a227; background: #fff8dc; color: #6b4e00 !important; -webkit-text-fill-color: #6b4e00 !important;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.6;
}
.page-section--dark .sw-demo { background: rgba(255,248,220,.12); border-color: rgba(201,162,39,.7); color: #f2d675 !important; -webkit-text-fill-color: #f2d675 !important; }

/* Kartentitel dürfen trennen: styles.css erzwingt hyphens:none auf Überschriften; lange Einzelwörter
   («Angebotsautomatisierung») liefen bei 1440px aus der 4er-Karte. Doppel-ID-Negation wie Hausmuster. */
html body main .partner-triad article h3:not(#____never____):not(#____sw____),
html body main .sw-imgcard__body h3:not(#____never____):not(#____sw____),
html body main .sw-gallery__item figcaption:not(#____never____):not(#____sw____) {
  hyphens: auto !important; -webkit-hyphens: auto !important; overflow-wrap: anywhere !important;
}

/* QA 18.09.2026: Tippziele und Ausrichtung */
html body .saa-benefits-fan-section .saig-fan__dot:not(#____never____) { padding: 14px !important; }   /* Tippziel 31px, Punkt bleibt 3px */
html body .saa-benefits-fan-section .home-benefits-section__heading:not(#____never____) { text-align: left; }   /* wie alle anderen Sektionen */

/* ===== Neugestaltung 18.09.2026 (Joshua): Logo-Wall, Ökosystem-Ebenen, Branchenkacheln ===== */

/* --- Logo-Wall (Referenzen): einheitliche Kacheln, Marke zentriert, Name/Branche darunter --- */
.sw-logos-wrap { margin-top: clamp(28px, 3.4vw, 44px); display: grid; gap: 40px; }
html body main .sw-logos__group-title:not(#____never____):not(#____sw____) { font-size: 12px !important; line-height: 1.4 !important; font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--saa-text-muted, #5b6672) !important; -webkit-text-fill-color: var(--saa-text-muted, #5b6672) !important; margin: 0 0 14px; }
.page-section--dark .sw-logos__group-title { color: rgba(239,241,243,.7); }
.sw-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sw-logos__tile {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--saa-border, #dfe6ee); border-radius: 16px; overflow: hidden;
  transition: transform .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out;
}
.sw-logos__mark { display: grid; place-items: center; min-height: 128px; padding: 22px 26px; background: #f6f8fa; border-bottom: 1px solid var(--saa-border, #dfe6ee); }
.sw-logos__mark img { max-width: 160px; max-height: 56px; width: auto; height: auto; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.sw-logos__wordmark { font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: -.01em; color: #1f2a37; text-align: center; line-height: 1.2; }
.sw-logos__meta { display: flex; flex-direction: column; gap: 3px; padding: 12px 18px 14px; }
.sw-logos__meta strong { font-size: 15px; font-weight: 600; color: var(--saa-ink, #191c1e); }
.sw-logos__meta span { font-size: 13px; color: var(--saa-text-muted, #5b6672); }
.sw-logos__cta { display: inline-flex; align-items: center; gap: 6px; margin: 0 18px 16px; font-size: 13px; font-weight: 600; color: var(--saa-red); }
.sw-logos__cta .material-symbols-outlined { font-size: 18px; color: var(--saa-red); -webkit-text-fill-color: var(--saa-red); }
@media (hover: hover) {
  .sw-logos__tile:hover { transform: translateY(-3px); border-color: var(--saa-red); box-shadow: 0 14px 30px rgba(7,17,28,.10); }
  .sw-logos__tile:hover .sw-logos__mark img { filter: none; opacity: 1; }
}
.page-section--dark .sw-logos__tile { background: var(--saa-card-bg-dark, #0c1a27); border-color: rgba(239,241,243,.16); }
.page-section--dark .sw-logos__mark { background: rgba(255,255,255,.04); border-color: rgba(239,241,243,.12); }
.page-section--dark .sw-logos__wordmark { color: #f4f6f8; }
.page-section--dark .sw-logos__meta strong { color: #f4f6f8; }
.page-section--dark .sw-logos__meta span { color: rgba(239,241,243,.72); }
@media (max-width: 1024px) { .sw-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sw-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sw-logos__mark { min-height: 96px; padding: 16px; } }
@media (max-width: 400px) { .sw-logos { grid-template-columns: 1fr; } }

/* --- Ökosystem: Module oben, Verbindung, Core-Band, Plattform-Fuss --- */
.sw-eco { margin-top: clamp(28px, 3.4vw, 44px); }
.sw-eco__modules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sw-eco__module { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; background: #fff; border: 1px solid var(--saa-border, #dfe6ee); border-radius: 14px; }
.sw-eco__module strong { font-size: 16px; font-weight: 600; color: var(--saa-ink, #191c1e); }
.sw-eco__module span { font-size: 14px; color: var(--saa-text-muted, #5b6672); }
.sw-eco__module::after { content: ""; display: none; position: absolute; left: 50%; bottom: -15px; width: 1.5px; height: 14px; background: var(--saa-border, #cfd6de); }
.sw-eco__module:nth-last-child(-n+4)::after { display: block; }   /* nur die letzte Reihe verbindet nach unten */
.sw-eco__link { height: 22px; margin: 0 12%; border-left: 1.5px solid var(--saa-border, #cfd6de); border-right: 1.5px solid var(--saa-border, #cfd6de); border-bottom: 1.5px solid var(--saa-border, #cfd6de); border-radius: 0 0 14px 14px; position: relative; }
.sw-eco__link::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 1.5px; height: 16px; background: var(--saa-border, #cfd6de); }
.sw-eco__core { margin-top: 16px; padding: 22px 26px; border: 1.5px solid var(--saa-red); border-radius: 16px; background: #fff; display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 16px 28px; align-items: center; }
.sw-eco__core-head { display: flex; flex-direction: column; gap: 3px; }
.sw-eco__core-head strong { font-size: 18px; font-weight: 600; color: var(--saa-ink, #191c1e); }
.sw-eco__core-head span { font-size: 14px; color: var(--saa-text-muted, #5b6672); }
.sw-eco__entities { list-style: none; margin: 0; padding: 0; }
.sw-eco__entities li { color: var(--saa-text); font-size: 15px; line-height: 1.55; }
.sw-eco__base { margin-top: 10px; padding: 12px 18px; border-radius: 12px; background: #eef1f4; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--saa-text-muted, #5b6672); }
.page-section--dark .sw-eco__module, .page-section--dark .sw-eco__core { background: var(--saa-card-bg-dark, #0c1a27); border-color: rgba(239,241,243,.16); }
.page-section--dark .sw-eco__core { border-color: #ff302a; }
.page-section--dark .sw-eco__module strong, .page-section--dark .sw-eco__core-head strong { color: #f4f6f8; }
.page-section--dark .sw-eco__module span, .page-section--dark .sw-eco__core-head span, .page-section--dark .sw-eco__base { color: rgba(239,241,243,.72); }
.page-section--dark .sw-eco__base { background: rgba(255,255,255,.05); }
.page-section--dark .sw-eco__entities li { color: rgba(239,241,243,.9); }
.page-section--dark .sw-eco__module::after, .page-section--dark .sw-eco__link, .page-section--dark .sw-eco__link::after { border-color: rgba(239,241,243,.25); background-color: transparent; }
.page-section--dark .sw-eco__module::after, .page-section--dark .sw-eco__link::after { background: rgba(239,241,243,.25); }
@media (max-width: 1024px) { .sw-eco__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sw-eco__core { grid-template-columns: 1fr; } .sw-eco__module::after { display: none; } .sw-eco__module:nth-last-child(-n+2)::after { display: block; } }
@media (max-width: 560px) { .sw-eco__modules { grid-template-columns: 1fr; } .sw-eco__module::after, .sw-eco__link { display: none; } .sw-eco__core { margin-top: 14px; } }
/* Altes 3x3-Raster bleibt für Rückwärtskompatibilität ungenutzt */

/* --- Branchenkacheln: Bild, ein Problemsatz, Chip-Reihen --- */
.sw-branche__row { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sw-branche__label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--saa-text-muted, #5b6672); }
.sw-chips--compact { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-triad .sw-chips--compact, .sw-chips--compact { margin: 0 !important; padding: 0 !important; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-triad .sw-chips--compact li, .sw-chips--compact li { border: 1px solid var(--saa-border, #dfe6ee); border-radius: 999px; padding: 4px 10px !important; margin: 0 !important; font-size: 13px; line-height: 1.4; color: var(--saa-ink, #191c1e); background: #fff; position: static; }
.pp-triad .sw-chips--compact li::before { display: none; content: none; }
.pp-triad .sw-chips--compact li.is-product, .sw-chips--compact li.is-product { border-color: var(--saa-red); color: var(--saa-red); }
.sw-branche .sw-imgcard__body p { flex: 0 0 auto; }
.sw-branche .partner-ways__link { margin-top: auto; align-self: flex-start; }
.sw-branche .sw-imgcard__body { gap: 12px; }
.sw-branche .sw-imgcard__body > .sw-branche__row:last-of-type { margin-bottom: 6px; }

/* --- Referenzen, zweite Fassung: farbige Markenkacheln, dicht, mit einem Satz zur Zusammenarbeit --- */
.sw-brands-wrap { margin-top: clamp(28px, 3.4vw, 44px); }
.sw-brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sw-brand { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--saa-border, #dfe6ee); border-radius: 16px; overflow: hidden; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.sw-brand__mark {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 26px 22px 22px;
  background: linear-gradient(145deg, hsl(var(--brand-h) 62% 30%), hsl(var(--brand-h) 55% 44%));
  color: #fff;
}
.sw-brand__mark img { max-width: 170px; max-height: 60px; width: auto; height: auto; filter: brightness(0) invert(1); }
.sw-brand__mono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.sw-brand__wordmark { font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-align: center; line-height: 1.25; }
.sw-brand__tag { position: absolute; top: 12px; right: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); }
.sw-brand__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.sw-brand__head { display: flex; flex-direction: column; gap: 2px; }
.sw-brand__head strong { font-size: 16px; font-weight: 600; color: var(--saa-ink, #191c1e); }
.sw-brand__head span { font-size: 13px; color: var(--saa-text-muted, #5b6672); }
html body main .sw-brand__body p:not(#____never____):not(#____sw____) { font-size: 14.5px !important; line-height: 1.55 !important; margin: 0; color: var(--saa-text-muted, #4a5560); }
@media (hover: hover) { .sw-brand:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(7,17,28,.12); } }
.page-section--dark .sw-brand { background: var(--saa-card-bg-dark, #0c1a27); border-color: rgba(239,241,243,.16); }
.page-section--dark .sw-brand__head strong { color: #f4f6f8; }
.page-section--dark .sw-brand__head span, .page-section--dark html body main .sw-brand__body p { color: rgba(239,241,243,.75); }
@media (max-width: 1024px) { .sw-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .sw-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sw-brand__mark { min-height: 120px; padding: 18px 14px; } }
@media (max-width: 400px) { .sw-brands { grid-template-columns: 1fr; } }
/* Sechste Branchenkachel (Einstieg): dunkler Grund, Button statt Chips */
.sw-branche--cta { border-color: var(--saa-red) !important; }
.sw-branche--cta .sw-imgcard__body { gap: 14px; }
.sw-branche--cta .lp-btn { margin-top: auto; align-self: flex-start; }

/* ===== Runde 5 (18.09.2026): kein Leerplatz im Raster, Zeilenlisten, Formularelemente ===== */

/* --- Letzte Reihe zentrieren: Raster mit doppelter Spaltenzahl, Karten spannen 2 --- */
.partner-triad[class*="sw-fill-3-"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.partner-triad[class*="sw-fill-3-"] > * { grid-column: span 2; }
.partner-triad.sw-fill-3-1 > *:last-child { grid-column: 3 / span 2; }
.partner-triad.sw-fill-3-2 > *:nth-last-child(2) { grid-column: 2 / span 2; }
.partner-triad.sw-fill-3-2 > *:last-child { grid-column: 4 / span 2; }
.partner-triad.sw-grid-4[class*="sw-fill-4-"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.partner-triad.sw-grid-4[class*="sw-fill-4-"] > * { grid-column: span 2; }
.partner-triad.sw-fill-4-1 > *:last-child { grid-column: 4 / span 2; }
.partner-triad.sw-fill-4-2 > *:nth-last-child(2) { grid-column: 3 / span 2; }
.partner-triad.sw-fill-4-2 > *:last-child { grid-column: 5 / span 2; }
.partner-triad.sw-fill-4-3 > *:nth-last-child(3) { grid-column: 2 / span 2; }
.partner-triad.sw-fill-4-3 > *:nth-last-child(2) { grid-column: 4 / span 2; }
.partner-triad.sw-fill-4-3 > *:last-child { grid-column: 6 / span 2; }
.partner-triad.sw-grid-2.sw-fill-2-1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.partner-triad.sw-grid-2.sw-fill-2-1 > * { grid-column: span 2; }
.partner-triad.sw-grid-2.sw-fill-2-1 > *:last-child { grid-column: 2 / span 2; }
/* Weniger Karten als Spalten: schmaler, zentriert */
.partner-triad.sw-fill-narrow-1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
.partner-triad.sw-fill-narrow-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; }
@media (max-width: 1024px) {
  .partner-triad[class*="sw-fill-"] { grid-template-columns: minmax(0, 1fr) !important; max-width: none; }
  .partner-triad.sw-grid-4[class*="sw-fill-"], .partner-triad.sw-imgcards[class*="sw-fill-"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .partner-triad[class*="sw-fill-"] > * { grid-column: auto !important; }
}
@media (max-width: 640px) { .partner-triad[class*="sw-fill-"] { grid-template-columns: minmax(0, 1fr) !important; } }

/* --- Zeilenliste (ersetzt labs-criteria-Pills) --- */
.sw-list { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.sw-list--single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.sw-list li { margin: 0; }
.sw-list__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 14px 18px; background: #fff; border: 1px solid var(--saa-border, #dfe6ee); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
a.sw-list__row .material-symbols-outlined { color: var(--saa-red); -webkit-text-fill-color: var(--saa-red); font-size: 20px; flex: none; transition: transform .2s; }
.sw-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-list__text strong { font-size: 16px; font-weight: 600; color: var(--saa-ink, #191c1e); line-height: 1.35; }
.sw-list__text span { font-size: 14.5px; line-height: 1.5; color: var(--saa-text-muted, #4a5560); }
.sw-list__text > span:only-child { font-size: 15.5px; color: var(--saa-ink, #191c1e); }
@media (hover: hover) { a.sw-list__row:hover { border-color: var(--saa-red); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(7,17,28,.08); } a.sw-list__row:hover .material-symbols-outlined { transform: translateX(4px); } }
.page-section--dark .sw-list__row { background: var(--saa-card-bg-dark, #0c1a27); border-color: rgba(239,241,243,.16); }
.page-section--dark .sw-list__text strong, .page-section--dark .sw-list__text > span:only-child { color: #f4f6f8; }
.page-section--dark .sw-list__text span { color: rgba(239,241,243,.75); }
@media (max-width: 760px) { .sw-list { grid-template-columns: minmax(0, 1fr); } }

/* --- Kontaktformular: Elemente (Kern mit vier Anliegen bleibt) --- */
.sw-form .contact-workflow-grid { align-items: stretch; }
html body .sw-form .contact-form-panel:not(#____never____) { padding: clamp(24px, 3vw, 40px); }
html body .sw-form .contact-field:not(#____never____), html body .sw-form .contact-field-grid:not(#____never____) { margin: 0 0 18px; }
html body .sw-form .contact-field-grid--two:not(#____never____) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
html body .sw-form .contact-field-grid--two .contact-field:not(#____never____) { margin: 0; }
html body .sw-form .contact-field > label:not(#____never____), html body .sw-form .sw-form__label:not(#____never____) {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #07111c; padding: 0; margin: 0 0 6px; line-height: 1.4;
}
html body .sw-form .sw-form__opt:not(#____never____) { font-weight: 400; color: var(--saa-text-muted, #5b6672); }
html body .sw-form input:not([type="checkbox"]):not([type="radio"]):not(#____never____),
html body .sw-form select:not(#____never____),
html body .sw-form textarea:not(#____never____) {
  width: 100% !important; min-height: 52px !important; height: auto !important; padding: 12px 16px !important; font-size: 16px !important; line-height: 1.4 !important; color: #07111c; background: #fff;
  border: 1.5px solid #d6dde5 !important; border-radius: 12px !important; box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
html body .sw-form select:not(#____never____) { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2307111c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
html body .sw-form textarea:not(#____never____) { min-height: 140px !important; resize: vertical; }
html body .sw-form input:focus:not(#____never____), html body .sw-form select:focus:not(#____never____), html body .sw-form textarea:focus:not(#____never____) { outline: none; border-color: var(--saa-red) !important; box-shadow: 0 0 0 3px rgba(217, 30, 24, .14); }
html body .sw-form .sw-form__help:not(#____never____), html body .sw-form .sw-form__error:not(#____never____) { padding-left: 2px; }
html body .sw-form .contact-mode:not(#____never____) { margin: 0 0 22px; padding: 0; border: 0; }
html body .sw-form .contact-mode legend:not(#____never____) { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #07111c; margin: 0 0 10px; padding: 0; }
html body .sw-form .contact-mode__label.sw-form__mode:not(#____never____) { min-height: 76px; padding: 16px 18px; border: 1.5px solid #d6dde5; border-radius: 14px; background: #fff; gap: 12px; transition: border-color .15s, background .15s, box-shadow .15s; }
html body .sw-form .contact-mode__input:checked + .contact-mode__label.sw-form__mode:not(#____never____) { border-color: var(--saa-red); background: #fff6f5; box-shadow: 0 0 0 3px rgba(217, 30, 24, .12); }
html body .sw-form .sw-form__set-title:not(#____never____) { font-size: 14px !important; font-weight: 600; letter-spacing: 0; text-transform: none; color: #07111c; margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid #e6ebf0; }
html body .sw-form .sw-filter__chip:not(#____never____) { min-height: 42px; padding: 0 16px; border: 1.5px solid #d6dde5; border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 500; color: #07111c; }
html body .sw-form .sw-filter__chip.is-active:not(#____never____) { background: var(--saa-red); border-color: var(--saa-red); color: #fff; -webkit-text-fill-color: #fff; box-shadow: none; }
html body .sw-form .sw-form__chips:not(#____never____) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
html body .sw-form .sw-form__consent:not(#____never____) { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 18px; font-size: 14.5px; line-height: 1.5; }
html body .sw-form .sw-form__consent input[type="checkbox"]:not(#____never____) { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--saa-red); }
html body .sw-form .contact-submit:not(#____never____):not(#____sw____) { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; width: auto !important; max-width: 100%; min-height: 54px !important; padding: 0 28px !important; border-radius: 999px !important; font-size: 16px !important; font-weight: 600; box-shadow: none !important; }
html body .sw-form .sw-form__note:not(#____never____) { text-align: left; margin: 12px 0 0; font-size: 14px; color: var(--saa-text-muted, #5b6672); }
html body .sw-form .sw-form__summary:not(#____never____) { border-radius: 12px; }
@media (max-width: 640px) { html body .sw-form .contact-field-grid--two:not(#____never____) { grid-template-columns: minmax(0, 1fr); } html body .sw-form .contact-submit:not(#____never____):not(#____sw____) { width: 100% !important; } }

/* Zeilenliste mit ungerader Anzahl: letzte Zeile über beide Spalten */
.sw-list:not(.sw-list--single) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Formular: Restfixes (Grid nicht strecken, Knopf nicht dehnen, Notiz klein, Consent bündig) */
html body .sw-form .contact-workflow-grid:not(#____never____):not(#____sw____) { align-items: stretch !important; }  /* 18.09.: Bild rechts auf Formularhöhe */
html body .sw-form .contact-form-panel:not(#____never____):not(#____sw____) { align-self: start; }
html body .sw-form .contact-submit:not(#____never____):not(#____sw____) { align-self: flex-start !important; }
html body main .sw-form .sw-form__note:not(#____never____):not(#____sw____) { font-size: 14px !important; line-height: 1.5 !important; text-align: left !important; }
html body .sw-form .sw-form__consent:not(#____never____):not(#____sw____) { align-items: center !important; font-size: 14.5px !important; }
html body .sw-form .sw-form__consent input[type="checkbox"]:not(#____never____):not(#____sw____) { margin: 0 !important; }


/* =====================================================================================================
   Runde 6 (18.09.2026, Joshua): Use-Case-Hub neu, Matrix interaktiv, keine Chip-Reihen mehr, Formularbild
   ===================================================================================================== */

/* --- Regel: keine Chip-Reihen. Branchenkacheln listen jede Angabe auf einer eigenen Zeile. --- */
.pp-triad .sw-branche__list, .sw-branche__list { margin: 0 !important; padding: 0 !important; list-style: none; display: grid; gap: 4px; }
.pp-triad .sw-branche__list li, .sw-branche__list li { position: relative; margin: 0 !important; padding: 0 0 0 18px !important; font-size: 14.5px; line-height: 1.45; color: var(--saa-ink, #191c1e); }
.pp-triad .sw-branche__list li::before, .sw-branche__list li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--saa-text-muted, #5b6672); display: block;
}
.pp-triad .sw-branche__list li.is-product::before, .sw-branche__list li.is-product::before { background: var(--saa-red); }
.sw-branche__row { gap: 8px; }
.sw-branche .sw-imgcard__body > .sw-branche__row + .sw-branche__row { margin-top: 4px; }

/* --- Use-Case-Hub: Bereichsnavigation links (feststehend), Bereiche mit Bildkarten rechts --- */
.sw-uchub { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: clamp(28px, 3.4vw, 44px); }
.sw-uchub__sticky { position: sticky; top: 96px; }
.sw-uchub__rail-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--saa-text-muted); margin: 0 0 10px; }
.sw-uchub__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; border-left: 2px solid var(--saa-border, #dfe6ee); }
.sw-uchub__nav li { margin: 0; }
.sw-uchub__nav a { display: block; padding: 10px 14px; margin-left: -2px; border-left: 2px solid transparent; color: inherit; text-decoration: none; transition: border-color .2s, background-color .2s; }
.sw-uchub__nav a strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--saa-ink, #191c1e); }
.sw-uchub__nav a span { display: block; font-size: 13px; color: var(--saa-text-muted); margin-top: 2px; }
.sw-uchub__nav a.is-active { border-left-color: var(--saa-red); background: rgba(217, 30, 24, .04); }
.sw-uchub__nav a.is-active strong { color: var(--saa-red); }
@media (hover: hover) { .sw-uchub__nav a:hover { border-left-color: var(--saa-text); } }
.sw-uchub__nav a:focus-visible { outline: 2px solid var(--saa-red); outline-offset: 2px; }
html body main .sw-uchub__select:not(#____never____) { display: none !important; }
.sw-uchub__rail-cta { margin-top: 22px; padding: 18px; border: 1px solid var(--saa-border, #dfe6ee); border-radius: 14px; background: #fff; }
html body main .sw-uchub__rail-cta p:not(#____never____):not(#____sw____) { font-size: 14.5px !important; line-height: 1.5 !important; margin: 0 0 12px; color: var(--saa-text-muted); }
.sw-uchub__rail-cta .lp-btn { width: 100%; justify-content: center; }
.sw-uchub__group + .sw-uchub__group { margin-top: clamp(44px, 5vw, 72px); padding-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--saa-border, #dfe6ee); }
.sw-uchub__group { scroll-margin-top: 96px; }
.sw-uchub__group-head { max-width: 720px; margin-bottom: 20px; }
html body main .sw-uchub__eyebrow:not(#____never____) { display: inline-flex; align-items: center; gap: 10px; color: #d91e18 !important; -webkit-text-fill-color: #d91e18; font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1; text-transform: uppercase; margin-bottom: 8px; }
.sw-uchub__eyebrow::before { content: ""; display: block; width: 44px; height: 1px; background: rgba(217, 30, 24, .35); }
html body main .sw-uchub__group-head h3:not(#____never____):not(#____sw____) { font-size: clamp(24px, 2.4vw, 30px) !important; line-height: 1.2 !important; margin: 6px 0 10px; font-weight: 500; }
html body main .sw-uchub__group-head p:not(#____never____):not(#____sw____) { margin: 0; color: var(--saa-text-muted); }
.sw-uchub .sw-imgcards { margin-top: 0; }
.sw-uchub .sw-imgcard__body p { font-size: 15px; }
@media (max-width: 1024px) {
  .sw-uchub { grid-template-columns: 1fr; gap: 24px; }
  .sw-uchub__sticky { position: static; }
  .sw-uchub__nav, .sw-uchub__rail-title { display: none; }
  html body main .sw-uchub__select:not(#____never____) { display: grid !important; gap: 6px; }
  .sw-uchub__select span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--saa-text-muted); }
  .sw-uchub__select select { min-height: 48px; border: 1px solid var(--saa-border, #dfe6ee); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 15px; background: #fff; }
  .sw-uchub__rail-cta { display: none; }
  .sw-uchub .sw-imgcards.sw-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) { .sw-uchub .sw-imgcards.sw-grid-2 { grid-template-columns: 1fr !important; } }

/* --- Matrix: volle Breite, feste Spalten, Fadenkreuz beim Überfahren, Filter über den Spaltenkopf --- */
.sw-matrix-wrap { position: relative; }
.sw-matrix { table-layout: fixed; min-width: 1100px; }
.sw-matrix thead th.sw-matrix__uc, .sw-matrix tbody th { width: 200px; position: sticky; left: 0; z-index: 2; background: var(--saa-surface); }
.page-section--dark .sw-matrix thead th.sw-matrix__uc, .page-section--dark .sw-matrix tbody th { background: #07111c; }
.sw-matrix thead th span { max-width: none; }
html body .sw-matrix__col:not(#____never____) { appearance: none; -webkit-appearance: none; background: transparent !important; border: 0 !important; border-radius: 8px; box-shadow: none !important; color: rgba(239, 241, 243, .82) !important; cursor: pointer; font: inherit; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0; line-height: 1.25 !important; min-height: 0 !important; padding: 6px 3px !important; text-transform: uppercase; white-space: normal !important; width: 100%; transition: background-color .2s, color .2s; hyphens: auto; overflow-wrap: anywhere; }
html body .sw-matrix thead th .sw-matrix__col span { display: block; max-width: none; overflow-wrap: anywhere; hyphens: auto; }
@media (hover: hover) { html body .sw-matrix__col:not(#____never____):hover { background: rgba(255,255,255,.08) !important; color: #fff !important; } }
html body .sw-matrix__col:focus-visible { outline: 2px solid #ff544e; outline-offset: 1px; }
html body .sw-matrix__col:not(#____never____)[aria-pressed="true"] { background: #ff302a !important; color: #fff !important; }
.sw-matrix tbody th a { display: block; }
.sw-matrix tbody tr:hover th a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sw-matrix td.is-col { background: rgba(255,255,255,.06); }
.sw-matrix thead th.is-col .sw-matrix__col:not(#____never____) { background: rgba(255,255,255,.1) !important; color: #fff !important; }
.sw-matrix td.is-on.is-col::before, .sw-matrix tbody tr:hover td.is-on::before { transform: scale(1.35); }
.sw-matrix td::before { transition: transform .15s ease-out; }
.sw-matrix tbody tr[hidden] { display: none; }
.sw-matrix-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 14px; }
.sw-matrix-foot .sw-matrix-legend { margin: 0; }
html body main .sw-matrix-status:not(#____never____):not(#____sw____) { font-size: 13px !important; line-height: 1.5 !important; margin: 0; color: rgba(239, 241, 243, .7); }
html body .sw-matrix-reset { min-height: 36px; padding: 6px 16px; font-size: 13px; }
html body .sw-matrix-reset[hidden] { display: none; }
@media (max-width: 1024px) {
  .sw-matrix-wrap { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
  .sw-matrix thead th.sw-matrix__uc, .sw-matrix tbody th { width: 170px; }
  .sw-matrix tbody th { white-space: normal; }
}

/* --- Potenzialanalyse «Vertrauen» (R7-Übernahme): sechs Kurzkästchen → zweispaltige Zeilenliste mit Häkchen (Regel 18.09.: keine Kurztext-Kästchen in Reihen) --- */
html body.potenzialanalyse-page .pa-trust-grid:not(#____never____) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: clamp(20px, 2.4vw, 30px); }
html body.potenzialanalyse-page .pa-trust-grid span:not(#____never____) { display: flex; align-items: flex-start; gap: 12px; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--saa-border, #dfe6ee) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 4px !important; font-size: 16px; line-height: 1.5; }
html body.potenzialanalyse-page .pa-trust-grid span:not(#____never____)::before { content: "check"; font-family: "Material Symbols Outlined"; font-size: 20px; line-height: 1.2; color: var(--saa-red); flex: none; }
@media (max-width: 640px) { html body.potenzialanalyse-page .pa-trust-grid:not(#____never____) { grid-template-columns: 1fr; } }


/* --- Use-Case-Hub, Runde 7 (Joshua: «zu generisch, zu listenhaft, muss einladen»): Rail mit Icons, O-Ton je Bereich,
       erste Karte je Bereich breit mit Vorher/Nachher, Bildkarten mit Bewegung beim Überfahren --- */
.sw-uchub__nav a { display: flex; align-items: center; gap: 12px; }
.sw-uchub__nav a > .material-symbols-outlined { font-size: 22px; color: var(--saa-text-muted); flex: none; transition: color .2s; }
.sw-uchub__nav a.is-active > .material-symbols-outlined { color: var(--saa-red); }
.sw-uchub__nav-text { display: block; min-width: 0; }
html body main .sw-uchub__hook:not(#____never____):not(#____sw____) { margin: 16px 0 0; padding: 12px 18px; border-left: 3px solid var(--saa-red); background: rgba(217, 30, 24, .035); border-radius: 0 12px 12px 0; font-size: 16px; line-height: 1.55; font-style: italic; color: var(--saa-ink, #191c1e); max-width: 640px; }
.sw-uchub__group-head { margin-bottom: 24px; }
.sw-uchub__group-head + .sw-ucfeat { margin-bottom: 20px; }
html body:not(#____never____) main .sw-ucfeat:not(#____sw____), .partner-triad .sw-ucfeat, .sw-ucfeat { display: grid !important; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); padding: 0 !important; overflow: hidden; border: 1px solid var(--saa-border, #dfe6ee); border-radius: 16px; background: #fff; }
.sw-ucfeat .sw-imgcard__media { margin: 0; height: 100%; }
.sw-ucfeat .sw-imgcard__media img { display: block; width: 100%; height: 100%; min-height: 300px; aspect-ratio: auto; object-fit: cover; }
.sw-ucfeat .sw-imgcard__body { display: flex; flex-direction: column; gap: 12px; padding: 28px 30px 30px; }
.sw-ucfeat .sw-imgcard__body > .sw-card__meta { margin: 0; color: var(--saa-red); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
html body main .sw-ucfeat .sw-imgcard__body h3:not(#____never____):not(#____sw____) { font-size: clamp(24px, 2.4vw, 30px) !important; line-height: 1.2 !important; margin: 0; }
.sw-ucfeat .sw-imgcard__body > p { flex: 0 0 auto; }
.sw-ucfeat__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 8px; }
.sw-ucfeat__ba > div { border: 1px solid var(--saa-border, #dfe6ee); border-radius: 12px; padding: 12px 14px; background: var(--saa-surface-soft, #f1f5f9); }
.sw-ucfeat__ba > .sw-ucfeat__ba-after { background: #fff; border-color: rgba(217, 30, 24, .45); }
.sw-ucfeat__ba-label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--saa-text-muted); margin-bottom: 4px; }
.sw-ucfeat__ba-after .sw-ucfeat__ba-label { color: var(--saa-red); }
html body main .sw-ucfeat__ba p:not(#____never____):not(#____sw____) { margin: 0; font-size: 14.5px !important; line-height: 1.5 !important; }
.sw-ucfeat .lp-btn { align-self: flex-start; margin-top: auto; }
.sw-uchub .sw-imgcards .sw-imgcard { transition: transform .25s ease-out, box-shadow .25s ease-out, border-color .25s; }
.sw-uchub .sw-imgcard__media { overflow: hidden; }
.sw-uchub .sw-imgcard__media img { transition: transform .5s ease-out; }
@media (hover: hover) {
  .sw-uchub .sw-imgcards .sw-imgcard:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(7, 17, 28, .10); border-color: rgba(217, 30, 24, .4); }
  .sw-uchub .sw-imgcards .sw-imgcard:hover .sw-imgcard__media img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .sw-uchub .sw-imgcards .sw-imgcard, .sw-uchub .sw-imgcard__media img { transition: none; } }
@media (max-width: 900px) {
  .partner-triad .sw-ucfeat, .sw-ucfeat { grid-template-columns: 1fr; }
  .sw-ucfeat .sw-imgcard__media img { min-height: 0; aspect-ratio: 16 / 9; }
  .sw-ucfeat .sw-imgcard__body { padding: 22px 24px 26px; }
}
@media (max-width: 560px) { .sw-ucfeat__ba { grid-template-columns: 1fr; } }


/* --- Referenzkarten, dritte Fassung (19.09., Joshua: ohne Markenbild, mehr Erläuterung, Link auf Detailseite) --- */
.sw-refs-wrap { margin-top: clamp(28px, 3.4vw, 44px); }
.sw-refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sw-ref { position: relative; display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--saa-border, #dfe6ee); border-radius: 16px; padding: 24px 22px 22px; overflow: hidden; transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s; }
.sw-ref::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, hsl(var(--brand-h) 62% 36%), hsl(var(--brand-h) 55% 50%)); }
.sw-ref__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sw-ref__head strong { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--saa-ink, #191c1e); }
.sw-ref__tag { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--saa-border, #dfe6ee); color: var(--saa-text-muted); }
.sw-ref__tag--kunde { border-color: rgba(217, 30, 24, .5); color: var(--saa-red); }
.sw-ref__branche { font-size: 13px; color: var(--saa-text-muted); margin-top: -4px; }
html body main .sw-ref > p:not(#____never____):not(#____sw____) { font-size: 15px !important; line-height: 1.6 !important; margin: 0; color: var(--saa-ink, #191c1e); }
html body main .sw-ref > p.sw-ref__leistungen:not(#____never____):not(#____sw____) { font-size: 13.5px !important; color: var(--saa-text-muted); margin-top: auto; padding-top: 6px; }
.sw-ref__leistungen span { font-weight: 600; color: var(--saa-ink, #191c1e); }
.sw-ref .partner-ways__link { align-self: flex-start; margin-top: 4px; }
@media (hover: hover) { .sw-ref:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(7,17,28,.10); border-color: rgba(217, 30, 24, .4); } }
.page-section--dark .sw-ref { background: var(--saa-card-bg-dark, #0c1a27); border-color: rgba(239,241,243,.16); }
.page-section--dark .sw-ref__head strong, .page-section--dark html body main .sw-ref > p { color: #f4f6f8; }
@media (max-width: 1100px) { .sw-refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sw-refs { grid-template-columns: 1fr; gap: 12px; } }

/* 19.09. (Joshua): Gruppentitel in den Menüs rot hervorheben – styles.css färbt alle Header-Spans per !important dunkel */
html .site-header .site-nav-primary .site-mega__title:not(#____never____) { color: var(--saa-red) !important; -webkit-text-fill-color: var(--saa-red); }


/* --- Runde 9 (19.09., Startseite neu): Videospot im Split, Kopfzeile mobil ohne CTA, Reiter «Startseite» ------------ */
html body main .lp-split__media .sw-video-inline:not(#____never____) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: #07111c; }
/* Menü-Knopf-Modus: CTA-Knopf aus der Kopfzeile, Logo bekommt den Platz; der CTA steht als letzter Menüeintrag */
@media (max-width: 1023.98px) {
  html body:not(#____never____):not(#____sw____) .site-header__actions .site-header__cta:not(#____x____) { display: none !important; }
  html body:not(#____never____):not(#____sw____) .site-logo:not(#____x____) { width: clamp(180px, 46vw, 300px) !important; max-width: 300px !important; min-width: 0 !important; flex: 0 0 auto !important;
    /* 03.10. (Joshua: «Mobileansicht ist das Labs abgeschnitten»): styles.css setzt den Link unter
       680px auf height/max-height 40px mit overflow:hidden. Das Bild darin wächst mit 46vw bis 48px –
       ab rund 400px Breite schnitt der Kasten den Fuss von «LABS» ab. Der Link folgt jetzt dem Bild. */
    height: auto !important; max-height: none !important; overflow: visible !important; }
  html body:not(#____never____):not(#____sw____) .site-logo img:not(#____x____) { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 48px !important; }
  nav [data-mobile-nav-panel] .site-nav-item--cta { border-bottom: 0; padding: 14px 16px 18px; }
  nav [data-mobile-nav-panel] .site-nav-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--saa-red); font-weight: 600; text-decoration: none; }
  /* mobile-refine.css färbt jeden Panel-Link dunkel bzw. bei Hover rot (!important, Doppel-ID) – der rote Knopf braucht weisse Schrift in allen Zuständen */
  html body:not(#____never____):not(#____sw____):not(#____x____) nav [data-mobile-nav-panel] a.site-nav-cta,
  html body:not(#____never____):not(#____sw____):not(#____x____) nav [data-mobile-nav-panel] a.site-nav-cta:hover,
  html body:not(#____never____):not(#____sw____):not(#____x____) nav [data-mobile-nav-panel] a.site-nav-cta:focus-visible { color: #fff !important; -webkit-text-fill-color: #fff !important; background: var(--saa-red) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 48px !important; padding: 0 18px !important; border-radius: 999px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15px !important; font-weight: 600 !important; text-align: center !important; border: 0 !important; }
  html body:not(#____never____):not(#____sw____):not(#____x____) nav [data-mobile-nav-panel] a.site-nav-cta:hover { background: #b8140f !important; }
}
@media (min-width: 1024px) { .site-nav-item--cta { display: none !important; } }


/* --- Runde 10 (19.09.): keine unterstrichenen Text-Knöpfe/Links (Joshua: «komplett entfernen aus der gesamten Web-App») --- */
html body:not(#____never____):not(#____sw____) main a:not(#____x____),
html body:not(#____never____):not(#____sw____) main a:not(#____x____):hover,
html body:not(#____never____):not(#____sw____) main a:not(#____x____):focus-visible,
html body:not(#____never____):not(#____sw____) footer a:not(#____x____),
html body:not(#____never____):not(#____sw____) footer a:not(#____x____):hover { text-decoration: none !important; }
/* Links in Tabellen und Fliesstext bleiben erkennbar: rot und halbfett statt unterstrichen */
html body main .sw-table td a:not(#____never____), html body main .sw-table th a:not(#____never____),
html body main .lp-crosslink a:not(#____never____), html body main .pp-cta__contacts a:not(#____never____), html body main .pp-claim__link:not(#____never____) { color: var(--saa-red) !important; font-weight: 600; }
.page-section--dark .sw-table td a:not(#____never____) { color: #ff6a64 !important; }

/* Startseite: Produktliste ohne Kästen (zwei Spalten, roter Punkt, Name + Satz) */
html body main .sw-prodlist:not(#____never____) { list-style: none; margin: 18px 0 20px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
html body main .sw-prodlist li:not(#____never____) { margin: 0 !important; padding: 0 !important; }
html body main .sw-prodlist a:not(#____never____) { display: block; position: relative; padding-left: 16px; color: inherit; }
.sw-prodlist a::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--saa-red); }
.sw-prodlist strong { display: block; font-size: 15.5px; font-weight: 600; color: #f4f6f8; line-height: 1.3; }
.sw-prodlist span { display: block; font-size: 13.5px; line-height: 1.45; color: rgba(239,241,243,.72); }
@media (hover: hover) { .sw-prodlist a:hover strong { color: #ff6a64; } }
@media (max-width: 640px) { html body main .sw-prodlist:not(#____never____) { grid-template-columns: 1fr; } }

/* Referenzen: breite Bildkarten (sw-ucfeat-Muster), zwei je Reihe */
.sw-refs.sw-imgcards { margin-top: clamp(24px, 3vw, 36px); }
html body:not(#____never____) main .sw-refcard:not(#____sw____) { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
.sw-refcard .sw-imgcard__media { position: relative; min-height: 240px; }
html body:not(#____never____) main .sw-refcard .sw-imgcard__media img:not(#____sw____) { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.sw-refcard .sw-imgcard__body { padding: 22px 24px 24px; gap: 8px; }
html body main .sw-refcard .sw-imgcard__body h3:not(#____never____):not(#____sw____) { font-size: 22px !important; line-height: 1.25 !important; }
html body main .sw-refcard p.sw-refcard__leistungen:not(#____never____):not(#____sw____) { font-size: 13.5px !important; line-height: 1.5 !important; color: var(--saa-text-muted); margin-top: auto; }
.sw-refcard__leistungen span { font-weight: 600; color: var(--saa-ink, #191c1e); }
.page-section--dark .sw-refcard { background: var(--saa-card-bg-dark, #0c1a27); border-color: rgba(239,241,243,.16); }
.page-section--dark .sw-refcard h3, .page-section--dark .sw-refcard__leistungen span { color: #f4f6f8; }
@media (max-width: 1100px) { .sw-refs.sw-grid-2 { grid-template-columns: 1fr; } html body:not(#____never____) main .sw-refcard:not(#____sw____) { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); } }
@media (max-width: 640px) { html body:not(#____never____) main .sw-refcard:not(#____sw____) { grid-template-columns: 1fr; } .sw-refcard .sw-imgcard__media { min-height: 0; } html body:not(#____never____) main .sw-refcard .sw-imgcard__media img:not(#____sw____) { position: static; height: auto !important; aspect-ratio: 16 / 9; } }

/* --- Runde 11 (20.09.): Startseite, drei Angebotsbereiche – Kernaussage (fett) sitzt direkt über der Beschreibung --- */
#angebot .sw-imgcard__body p:first-of-type { flex: 0 0 auto; }
#angebot .sw-imgcard__body p:first-of-type strong { font-weight: 600; color: var(--saa-ink, #191c1e); }

/* Runde 12: Startseite, Branchen-Auffangzeile («Ihre Branche ist nicht dabei?») – volle Breite, abgesetzt */
.sw-list--catchall { margin-top: 14px; max-width: none; }
.sw-list--catchall .sw-list__row { border-style: dashed; background: transparent; }
@media (hover: hover) { .sw-list--catchall a.sw-list__row:hover { background: #fff; border-style: solid; } }


/* =====================================================================================================
   Rückmeldung Joshua 23.09.2026 – Zeilenregel (Punkte 1, 11, 14, 19, 23 und die neue Regel 30):
   «Keine Zeilenumbrüche bei ein bis vier Wörtern; kurze Titel und Claims gehören auf eine Zeile.»

   Drei Bausteine, in dieser Reihenfolge wirksam:
   (a) Die Textspalte im Hero war auf 720px / 56vw festgenagelt (styles.css) – zu schmal für die
       Titel. Sie wird auf 900px / 64vw verbreitert; das Bild bleibt rechts sichtbar.
   (b) Keine Silbentrennung mehr im Hero-Titel – «Wissensma-nagement» (Punkt 14) entsteht genau daraus.
   (c) js/site-shell.js misst jede Hero-Zeile und jede Überschrift mit höchstens fünf Wörtern und verkleinert
       sie so weit, dass sie auf eine Zeile passt – höchstens auf 72 Prozent. Reicht das nicht, bleibt die
       ursprüngliche Grösse. Unter 720px Fensterbreite greift der Mechanismus nicht.
   ===================================================================================================== */
@media (min-width: 981px) {
  html body:not(#saig-x) main > .hero-scene > .hero-scene__content:not(#____never____):not(#____sw____) {
    max-width: min(900px, 64vw) !important;
    width: min(900px, 64vw) !important;
  }
}
html body:not(#saig-x) main .hero-scene .hero-scene__title .hero-title-line:not(#____never____):not(#____sw____) {
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  overflow-wrap: break-word !important;
}

/* Punkt 3: Ankreuzfeld und Text der Datenschutz-Zustimmung stehen mittig zueinander. Die Beschriftung ist
   ein Inline-Element; ihr Rahmen ist die Schriftbox (17px), nicht die Zeilenbox (21px) – dadurch sass der
   Text rund drei Pixel zu tief. Als Block gesetzt, stimmt die Mitte. */
html body .sw-form .sw-form__consent:not(#____never____):not(#____sw____),
html body .contact-consent:not(#____never____):not(#____sw____) { display: flex !important; align-items: center !important; }
html body .sw-form .sw-form__consent > span:not(#____never____),
html body .contact-consent > span:not(#____never____) { display: block; }

/* Punkt 28: Das Bild steht links, damit der Roboter auf das Formular blickt. */
@media (min-width: 981px) {
  html body .sw-form .contact-workflow-grid:not(#____never____) > .sw-form__side { order: -1; }
}


/* =====================================================================================================
   Rückmeldung Joshua 23.09.2026 – ein Baustein für alle Ablauf- und Aufzählungs-Sections
   (Punkte 10, 12, 13, 26, 27; Grundlage für Punkt 29 «wiederkehrende Elemente zusammenführen»).

   Vorher: vier Spalten nebeneinander. Bei vier Spalten bleiben rund 230px je Spalte – Titel brachen
   nach ein bis zwei Wörtern um («Termin oder / Aufgabe vorbereiten»), Fliesstext lief mit vier bis
   fünf Wörtern pro Zeile, und bei fünf oder sechs Schritten blieb eine angebrochene Reihe stehen.

   Jetzt: eine senkrechte Spur. Jeder Schritt bekommt die volle Inhaltsbreite, der Titel steht auf
   einer Zeile, der Text läuft mit zehn bis dreizehn Wörtern pro Zeile. Die Reihenfolge trägt die
   Spur (keine Nummernkreise, keine «Phase 01»-Etiketten), und sie funktioniert bei drei wie bei
   acht Schritten gleich. Dieselbe Darstellung gilt für .partner-fit (Vorteile-Zeilen), weil das
   inhaltlich derselbe Fall ist: Titel plus ein Absatz in einer Reihenfolge.
   ===================================================================================================== */
html body .partner-journey:not(#____never____):not(#____sw____),
html body .partner-fit:not(#____never____):not(#____sw____) {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  margin-top: clamp(28px, 3vw, 42px) !important;
  max-width: 1080px !important;
  position: relative !important;
}
html body .partner-journey > article:not(#____never____):not(#____sw____),
html body .partner-fit > article:not(#____never____):not(#____sw____) {
  /* .partner-fit stellte Titel und Text nebeneinander; die Titelspalte war zu schmal
     («Die / Weiterentwicklung / mitpraegen»). Titel steht jetzt ueber dem Absatz. */
  display: block !important;
  grid-template-columns: none !important;
  border: 0 !important;
  border-left: 2px solid var(--saa-border) !important;
  border-radius: 0 !important;
  margin: 0 0 0 7px !important;
  padding: 0 0 clamp(26px, 3vw, 36px) clamp(26px, 2.6vw, 40px) !important;
  position: relative !important;
  background: none !important;
  box-shadow: none !important;
}
html body .partner-journey > article:last-child:not(#____never____):not(#____sw____),
html body .partner-fit > article:last-child:not(#____never____):not(#____sw____) {
  border-left-color: transparent !important;
  padding-bottom: 0 !important;
}
/* Punkt auf der Spur */
html body .partner-journey > article::before,
html body .partner-fit > article::before {
  background: var(--saa-surface) !important;
  border: 3px solid var(--saa-red) !important;
  border-radius: 50% !important;
  content: "" !important;
  height: 14px !important;
  width: 14px !important;
  left: -8px !important;
  right: auto !important;
  top: 1px !important;
  position: absolute !important;
}
/* Der rote Abschnitt der Spur wächst beim Scrollen mit (labs-partner.js setzt .is-reached). */
html body .partner-journey > article::after,
html body .partner-fit > article::after {
  background: var(--saa-red) !important;
  bottom: 0 !important;
  content: "" !important;
  height: auto !important;
  left: -2px !important;
  right: auto !important;
  top: 0 !important;
  width: 2px !important;
  position: absolute !important;
  transform: scaleY(0) !important;
  transform-origin: center top !important;
  transition: transform .5s ease !important;
}
html body .partner-journey > article.is-reached::after,
html body .partner-fit > article.is-reached::after { transform: scaleY(1) !important; }
html body .partner-journey > article:last-child::after,
html body .partner-fit > article:last-child::after { content: none !important; }
html body .partner-journey h3:not(#____never____),
html body .partner-fit h3:not(#____never____) {
  font-size: clamp(19px, 1.55vw, 23px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: -4px 0 8px !important;
  max-width: none !important;
}
html body .partner-journey p:not(#____never____),
html body .partner-fit p:not(#____never____) {
  margin: 0 !important;
  max-width: 78ch !important;
}
html body .partner-journey p + p:not(#____never____),
html body .partner-fit p + p:not(#____never____) { margin-top: 10px !important; }
/* Auf dunklen Bändern trägt die Spur eine helle Grundfarbe. */
html body .page-section--dark .partner-journey > article:not(#____never____):not(#____sw____),
html body .page-section--dark .partner-fit > article:not(#____never____):not(#____sw____),
html body .partner-process-section.page-section--dark .partner-journey > article:not(#____never____):not(#____sw____) {
  border-left-color: rgba(255, 255, 255, .18) !important;
}
html body .page-section--dark .partner-journey > article:last-child:not(#____never____):not(#____sw____),
html body .page-section--dark .partner-fit > article:last-child:not(#____never____):not(#____sw____),
html body .partner-process-section.page-section--dark .partner-journey > article:last-child:not(#____never____):not(#____sw____) {
  border-left-color: transparent !important;
}
html body .page-section--dark .partner-journey > article::before,
html body .page-section--dark .partner-fit > article::before,
html body .partner-process-section.page-section--dark .partner-journey > article::before {
  background: #0b1420 !important;
}
@media (max-width: 700px) {
  html body .partner-journey > article:not(#____never____):not(#____sw____),
  html body .partner-fit > article:not(#____never____):not(#____sw____) {
    padding-left: 22px !important;
  }
}

/* Punkt 26: Die Entscheidungs-Kette unter dem Ablauf stand dunkelgrau auf dunklem Grund und war
   praktisch unlesbar. */
html body .page-section--dark .pp-chain .partner-chain__term:not(#____never____):not(#____sw____),
html body .partner-process-section.page-section--dark .partner-chain__term:not(#____never____):not(#____sw____) {
  color: #eef3f8 !important;
  -webkit-text-fill-color: #eef3f8 !important;
}


/* =====================================================================================================
   Punkt 8 (Rückmeldung Joshua 23.09.2026): Beispielbewertung auf der Potenzialanalyse.
   Die alte Karte nutzte .pa-scorecard__row – und genau diese Klasse steht in styles.css in der Liste
   «helle Chips in dunklen Bändern». Dadurch bekam jede Zeile einen erzwungenen weissen Kasten, der
   breiter war als die Karte; die Werte standen halb ausserhalb. Der neue Baustein trägt eigene Klassen.
   ===================================================================================================== */
html body .sw-score:not(#____never____):not(#____sw____) {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(4, 11, 19, .3);
  padding: clamp(20px, 2.2vw, 30px);
  max-width: 100%;
}
html body .sw-score .sw-score__note:not(#____never____):not(#____sw____) {
  color: #5c6875 !important;
  -webkit-text-fill-color: #5c6875 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin: 0 0 16px !important;
}
html body .sw-score .sw-score__list:not(#____never____) { margin: 0; }
html body .sw-score .sw-score__row:not(#____never____),
html body .sw-score .sw-score__result:not(#____never____) {
  align-items: baseline;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
html body .sw-score .sw-score__row:not(#____never____) {
  border-top: 1px solid rgba(7, 17, 28, .12);
  padding: 13px 0;
}
html body .sw-score .sw-score__row:first-of-type:not(#____never____) { border-top: 0; padding-top: 0; }
html body .sw-score .sw-score__result:not(#____never____) {
  border-top: 2px solid var(--saa-red);
  margin-top: 16px;
  padding-top: 16px;
}
html body.potenzialanalyse-page main .pa-scorecard-section .sw-score:not(#____never____):not(#____sw____) :is(dt, dd, span, strong, p) {
  -webkit-text-fill-color: currentColor !important;
}
html body.potenzialanalyse-page main .pa-scorecard-section .sw-score:not(#____never____):not(#____sw____) :is(dt, span) {
  color: #41505f !important;
  -webkit-text-fill-color: #41505f !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
html body.potenzialanalyse-page main .pa-scorecard-section .sw-score:not(#____never____):not(#____sw____) :is(dd, strong) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  font-weight: 600 !important;
  margin: 0 !important;
  text-align: right !important;
}
html body.potenzialanalyse-page main .pa-scorecard-section .sw-score .sw-score__note:not(#____never____):not(#____sw____) {
  color: #5c6875 !important;
  -webkit-text-fill-color: #5c6875 !important;
}


/* =====================================================================================================
   Punkte 9 und 18 (Rückmeldung Joshua 23.09.2026).

   Punkt 18 war eine Frage: Die FAQ steht mittig, die Sektion darüber linksbündig – was empfehlen wir?
   Antwort: Die FAQ bleibt mittig. Unsymmetrisch wirkte nicht die Mitte, sondern dass zwei Blöcke, die
   zusammen den Seitenabschluss bilden, verschiedene Achsen hatten. «Verwandte Seiten» und FAQ stehen
   jetzt in derselben zentrierten Spalte von 860px; alle inhaltlichen Sektionen darüber bleiben
   linksbündig. So ist die Mitte eine Entscheidung und kein Zufall.

   Punkt 9: Die FAQ der Potenzialanalyse sass zusätzlich in einer weissen Fläche, die Referenz
   (KI-Beratung) nicht. Spalte und Kopf waren schon gleich – die Fläche fällt weg.
   ===================================================================================================== */
html body .sw-closing .saig-shell > .lp-head:not(#____never____):not(#____sw____),
html body .sw-closing .saig-shell > .sw-list:not(#____never____):not(#____sw____) {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 860px !important;
  width: 100% !important;
}
html body .sw-closing .saig-shell > .lp-head:not(#____never____):not(#____sw____) { text-align: center !important; }
html body .sw-closing .saig-shell > .lp-head .saa-signal-label:not(#____never____):not(#____sw____) { justify-content: center !important; }
html body .sw-closing .saig-shell > .lp-head .saa-signal-label::before { display: none !important; }
html body .sw-closing .saig-shell > .lp-head > p:not(#____never____):not(#____sw____) {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Punkt 9: keine weisse Fläche hinter der FAQ auf der Potenzialanalyse. */
html body .pa-section.pa-faq > .pa-container:not(#____never____):not(#____sw____) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}


/* =====================================================================================================
   Punkte 20, 21, 22 und die neue Regel 30 (Rückmeldung Joshua 23.09.2026):
   «Bilder mit Figuren oder Personen müssen vollständig sichtbar sein.»

   Das Bildraster schnitt jedes Motiv auf 16:9 zu. Bei den Hochformaten der Markenfigur hiess das:
   Eleona und Simon standen ohne Kopf in der Karte. sw-gallery--whole zeigt das ganze Motiv in einem
   Rahmen mit festem Format (Vorgabe 4:5, über --sw-ratio je Raster einstellbar).

   Punkt 22: Die Videos standen als nackte Player im Raster – Bedienleiste über dem Bild, Hochformate
   mit schwarzen Balken. Jetzt zeigt jede Kachel das vollständige Standbild mit einem Abspielknopf;
   der Klick lädt und startet das Video (js/site-shell.js).
   ===================================================================================================== */
.sw-gallery--whole .sw-gallery__item img,
.sw-gallery--whole .sw-gallery__item video {
  aspect-ratio: var(--sw-ratio, 4 / 5) !important;
  height: auto !important;
  object-fit: contain !important;
  width: 100% !important;
  background: rgba(7, 17, 28, .05);
}
.page-section--dark .sw-gallery--whole .sw-gallery__item img,
.page-section--dark .sw-gallery--whole .sw-gallery__item video { background: rgba(255, 255, 255, .05); }

.sw-video__trigger {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: block;
  padding: 0;
  position: relative;
  width: 100%;
}
.sw-video__play {
  align-items: center;
  background: var(--saa-red);
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(4, 11, 19, .45);
  color: #fff;
  display: flex;
  height: 62px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, box-shadow .25s ease;
  width: 62px;
}
.sw-video__play .material-symbols-outlined { font-size: 34px; line-height: 1; }
.sw-video__trigger:hover .sw-video__play { transform: translate(-50%, -50%) scale(1.08); }
.sw-video__trigger:focus-visible { outline: 3px solid var(--saa-red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sw-video__play { transition: none; } }
/* Runde 40: derselbe rote Knopf über Videos mit Bedienleiste (js/site-shell.js legt .sw-video-wrap an). */
.sw-video-wrap { display: block; position: relative; }
.sw-video__overlay { appearance: none; background: transparent; border: 0; cursor: pointer; inset: 0 0 56px 0; padding: 0; position: absolute; z-index: 2; }
.sw-video-wrap.is-playing .sw-video__overlay { display: none; }
.sw-video__overlay:hover .sw-video__play { transform: translate(-50%, -50%) scale(1.08); }
.sw-video__overlay:focus-visible { outline: 3px solid var(--saa-red); outline-offset: -3px; border-radius: 16px; }
/* styles.css färbt Symbol-Icons dunkel (!important) – im roten Kreis bleibt das Dreieck weiss. */
html body main .sw-video__play .material-symbols-outlined:not(#____never____):not(#____sw____) { color: #fff !important; -webkit-text-fill-color: #fff !important; }


/* Videogruppen (Rückmeldung Joshua 24.09.2026): Untertitel über jeder Formatgruppe, damit die
   Hochformate und die Quadrate jeweils in einem Rahmen stehen, den sie ganz ausfüllen. */
.sw-videogroups { margin-top: 30px; }
.sw-videogroups .sw-gallery { margin-top: 14px; }
.sw-videogroups .sw-gallery + .sw-videogroup__label { margin-top: 38px; }
.sw-videogroup__label {
  font-size: 14px;
  letter-spacing: .01em;
  margin: 0;
  opacity: .78;
}
@media (max-width: 900px) { .sw-videogroups .sw-gallery--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* =====================================================================================================
   Punkt 29 (Rückmeldung Joshua 23.09.2026): «Wiederkehrende Elemente zusammenführen.»

   Jede Unterseite endet mit denselben drei Blöcken: verwandte Seiten, häufige Fragen, nächster Schritt.
   Sie standen in drei verschiedenen Breiten und mit einem Bandwechsel dazwischen, obwohl sie zusammen
   einen einzigen Abschluss bilden. Ab jetzt teilen sie sich eine Spalte von 860px und einen Rhythmus –
   ein Baustein, den jede Seite gleich verwendet. Das ist die Fortsetzung der Antwort auf Punkt 18.
   ===================================================================================================== */
html body .partner-cta-section .lp-cta__panel:not(#____never____):not(#____sw____) {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 860px !important;
  width: 100% !important;
}
html body .partner-cta-section .lp-cta__panel > :is(h2, p):not(#____never____):not(#____sw____) {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 860px !important;
}
/* Kein Bandwechsel zwischen den Abschlussblöcken: Verwandte Seiten, FAQ und CTA gehören zusammen. */
html body .sw-closing + .beratung-faq-section:not(#____never____):not(#____sw____) { padding-top: clamp(28px, 3vw, 44px) !important; }
html body .beratung-faq-section + .partner-cta-section:not(#____never____):not(#____sw____) { padding-top: clamp(34px, 3.6vw, 52px) !important; }

/* Regel 30: Referenzkarten schnitten das Bild auf die Kartenhöhe zu – bei Karten mit Personen fehlten
   die Köpfe. Das Motiv steht jetzt als eigener 16:9-Ausschnitt in der Spalte, senkrecht mittig. */
html body .sw-ucfeat .sw-imgcard__media img:not(#____never____):not(#____sw____) {
  /* Der Rahmen ist hochkant, die Motive sind querformatig – ein zentrierter Zuschnitt schneidet
     genau dort, wo die Gesichter sind. Der Ausschnitt sitzt darum im oberen Drittel. */
  object-position: 50% 28% !important;
}


/* Gemeinsamer Standard-Baustein (Punkt 29): ein Ablauf, der auf allen Use-Case-Seiten derselbe ist,
   steht ruhiger als ein eigenes Kapitel – heller Grund, kompakte Zeilen, Verweis auf die Langfassung. */
html body .sw-standard:not(#____never____):not(#____sw____) {
  background: var(--saa-surface-soft, #f1f5f9);
  padding-block: clamp(46px, 5vw, 72px) !important;
}
html body .sw-standard .lp-head:not(#____never____):not(#____sw____) { max-width: 780px; }
html body .sw-standard .sw-list__row:not(#____never____):not(#____sw____) { padding-block: 12px; }
.sw-standard__more { margin: 26px 0 0; }

/* Regel 30: Die Titel im Vorteile-Laufband sind zwei bis drei Woerter lang; bei 28px zerfielen sie in
   der 230px schmalen Karte in Zeilen aus je einem Wort. */
html body .saig-fan-card .saig-fan-card__title:not(#____never____):not(#____sw____) {
  font-size: clamp(19px, 1.45vw, 23px) !important;
  line-height: 1.22 !important;
}


/* Startseite, Angebot: Die drei Karten teilen sich dieselben Zeilen, damit Kernaussage,
   Beschreibung und Link auf gleicher Höhe beginnen, auch wenn der fette Vorspann
   unterschiedlich viele Zeilen braucht (Joshua 24.09.). Nur wo alle drei Karten
   nebeneinander stehen — gestapelt gibt es nichts auszurichten. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1025px) {
    html body #angebot .sw-imgcards:not(#____never____):not(#____sw____) {
      grid-template-rows: auto auto auto 1fr auto !important;
      row-gap: 0 !important;
    }
    html body #angebot .sw-imgcards .sw-imgcard:not(#____never____):not(#____sw____) {
      display: grid !important;
      grid-template-rows: subgrid !important;
      grid-row: span 5 !important;
      row-gap: 0 !important;
    }
    html body #angebot .sw-imgcards .sw-imgcard__body:not(#____never____):not(#____sw____) {
      display: grid !important;
      grid-template-rows: subgrid !important;
      grid-row: span 4 !important;
      row-gap: 10px !important;
    }
  }
}


/* ---------------------------------------------------------------- Logowand der Referenzen
   (30.09.2026). Die Kundenlogos sind nicht auf denselben Untergrund gebaut: drei sind weisse
   Marken auf transparentem Grund, eines ist schwarz, zwei kommen als JPEG mit weissem Grund
   und eines bringt einen eigenen dunklen Kasten mit. Ein einheitlicher Bandhintergrund würde
   je nach Wahl drei oder vier Logos unsichtbar machen. Darum trägt jede Kachel den Grund,
   für den ihr Logo gebaut ist - bei gleicher Grösse, gleichem Radius und gleichem Innenrand,
   damit die Reihe trotzdem ruhig bleibt. */
.sw-logowall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.sw-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 108px;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid var(--saa-border);
}
.sw-logo img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.sw-logo--hell { background: #fff; }
.sw-logo--dunkel { background: #15181c; border-color: rgba(255, 255, 255, .14); }
.sw-logo--wort { background: var(--saa-surface-soft); }
.sw-logo__wort {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  text-align: center;
  color: var(--saa-text-muted);
}
@media (max-width: 560px) {
  .sw-logowall { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .sw-logo { min-height: 88px; padding: 16px; }
  .sw-logo img { max-height: 48px; }
}

/* Quadratische und fast quadratische Marken stehen bei 64px verloren in der Kachel
   (ProfQuality ist 1024x1024). Sie bekommen mehr Höhe. */
.sw-logo--quadrat { padding: 8px 12px; }
.sw-logo--quadrat img { max-height: 96px; }
@media (max-width: 560px) {
  .sw-logo--quadrat img { max-height: 64px; }
}

/* Logowand, zweite Fassung (01.10.2026). Die Logos sind jetzt einfarbig und flächengleich
   aufbereitet (_src/tools/logos_aufbereiten.py), darum trägt die ganze Wand einen
   Untergrund statt einer Kachelfarbe je Logo. */
.sw-logo { background: var(--saa-surface); }
.sw-logo img { max-height: 72px; }
.sw-logo--quadrat img { max-height: 72px; }
.sw-logo--quadrat { padding: 20px 24px; }

/* Referenzkachel: Statt eines unpassenden Stockfotos steht die Marke der Firma in der
   Medienfläche - zentriert auf ruhigem Grund, nicht formatfüllend beschnitten. */
.sw-imgcard__media--marke {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--saa-surface-soft);
  padding: 28px;
}

.sw-imgcard__media--marke .sw-logo__wort {
  font-size: 19px;
  text-align: center;
}
@media (max-width: 860px) {
  .sw-imgcard__media--marke { padding: 20px; min-height: 148px; }

}

/* Die Logos sind seit dem 01.10.2026 flächengleich aufbereitet und füllen ihren Rahmen
   deutlich besser; die Kacheln dürfen darum grosszügiger sein. */
.sw-logo { min-height: 124px; padding: 14px 18px; }
.sw-logo img { max-height: 84px; max-width: 100%; }
.sw-logo--quadrat img { max-height: 84px; }


/* Die Marke in der Referenzkachel. Die Bildregeln der Use-Case-Karte (object-fit: cover,
   min-height: 300px) greifen hier ins Leere – ein Logo darf nicht formatfüllend beschnitten
   werden. Eine später geladene Stilvorlage überstimmt die einfache Gegenregel, darum die im
   Projekt übliche Eskalation. */
html body main .sw-imgcard__media--marke:not(#____never____):not(#____sw____):not(#____x____) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--saa-surface-soft) !important;
  padding: 28px !important;
  min-height: 0 !important;
  /* Ohne das steht die Marke am oberen Rand statt in der Mitte der Kachel: Die Bildspalte
     der Use-Case-Karte zieht ihre Höhe aus dem Bild, das es hier nicht mehr gibt. */
  height: 100% !important;
}
html body main .sw-imgcard__media--marke img:not(#____never____):not(#____sw____):not(#____x____) {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 88% !important;
  max-height: 128px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
@media (max-width: 900px) {
  html body main .sw-imgcard__media--marke:not(#____never____):not(#____sw____):not(#____x____) {
    padding: 22px !important;
    min-height: 160px !important;
  }
  html body main .sw-imgcard__media--marke img:not(#____never____):not(#____sw____):not(#____x____) {
    max-height: 92px !important;
  }
}

/* ---------------------------------------------------------------- Kundenwand und Referenzkarten
   Dritte Antwort auf dieselbe Frage (01.10.2026, Joshua: «Da wir nicht überall passende Logos
   finden und haben, müssen wir uns eine andere Darstellungsoption einfallen lassen»). Zuerst
   standen hier Stockfotos ohne Bezug, dann Logos in sieben Bauarten. Jetzt trägt der Name
   selbst die Darstellung – vollständig für alle neun und ohne fremde Dateien. */
.sw-kundenwand {
  list-style: none;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 0;
  display: grid;
  /* Neun Firmen gehen in drei Reihen zu dritt auf; auto-fit ergab 5 + 4 und liess die
     zweite Reihe angebrochen wirken. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 900px) { .sw-kundenwand { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sw-kunde {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 24px 24px;
  border-radius: 14px;
  border: 1px solid var(--saa-border);
  background: var(--saa-surface);
}
.sw-kunde__branche {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--saa-red);
}
.sw-kunde__name {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--saa-text);
}

@media (max-width: 560px) {
  /* Einspaltig: Bei zwei Spalten brach «mobilcom ICT GmbH» auf zwei Zeilen mit einem
     einzelnen Wort unten – genau das, was Regel 1 des Design-Systems ausschliesst. */
  .sw-kundenwand { grid-template-columns: 1fr; gap: 10px; }
  .sw-kunde { padding: 16px 18px 18px; }
  .sw-kunde__name { font-size: 17px; }
}

/* ---------------------------------------------------------------- Bildraster ohne Rand
   Joshua, 01.10.2026: «Die Bilder dürfen keinen solchen Rand haben.» Der Rand war kein Rahmen,
   sondern die Füllfarbe hinter dem Motiv: `.sw-gallery--whole` zwang jedes Bild in ein festes
   Seitenverhältnis und zeigte es mit object-fit: contain – passte das Motiv nicht genau, blieb
   links und rechts die Hintergrundfläche sichtbar. Beim WhatsApp-Motiv (9:16) in einem
   3:4-Rahmen waren das breite Bänder.

   Jetzt behält jedes Motiv sein eigenes Format: kein Zuschnitt und keine Füllfläche. Videos
   behalten ihren Rahmen, weil der Abspielknopf eine feste Fläche braucht. */
html body main .sw-gallery--whole .sw-gallery__item img:not(#____never____):not(#____sw____) {
  aspect-ratio: auto !important;
  height: auto !important;
  width: 100% !important;
  object-fit: contain !important;
  background: none !important;
}
/* Ohne das bliebe in einer Reihe mit unterschiedlich hohen Bildern leerer Raum unter der
   kürzeren Kachel – die Zeilenhöhe richtet sich sonst nach dem grössten Bild. */
.sw-gallery--whole { align-items: start; }

/* ---------------------------------------------------------------- Referenzkarte, zehnte Fassung
   01.10.2026 (Joshua: "Hier muss das Logo hin gepackt werden und das klein"). Das Bildfeld
   oben ist jetzt ein Logofeld: dunkle Fläche, Marke klein und mittig, feste Höhe auf allen
   neun Karten. Dunkel, weil die sieben Dateien keinen gemeinsamen hellen Grund vertragen -
   drei Marken sind rein weiss. Zwei Firmen haben kein Logo; bei ihnen trägt das Feld den
   Namen als Wortmarke, und im Textteil entfällt dafür die Überschrift.
   Die Karte fällt damit von rund 750px auf gut 400px, das 3x3-Raster bleibt. */
.sw-refcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 38px);
}
.sw-refcard {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--saa-border);
  background: var(--saa-surface);
  overflow: hidden;
}
.sw-refcard__marke {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 02.10.2026 von 104 auf 128 erhöht: Bauplana und SR-Innovation sind dreiteilige
     Marken; ihr Firmenname landete bei 56px Logogrösse mit 4.9 bzw. 6.6 Punkten auf dem
     Schirm und war nicht lesbar. */
  height: 128px;
  padding: 0 22px;
  border-bottom: 1px solid var(--saa-border);
}
/* Zwei Feldtöne, 02.10.2026. Die gelieferten Logos vertragen keinen gemeinsamen Grund:
   mobilcom ICT, Professional Line, Profmedia und Prime Home sind dunkle Marken, Bauplana,
   ProfQuality, SR-Innovation und Ramseyer helle. Damit das Raster trotzdem ruhig wirkt,
   wechselt ausschliesslich die Fläche – Höhe, Kante und Logogrösse bleiben gleich, und es
   gibt genau diese zwei Töne, keinen dritten. */
.sw-refcard__marke--dunkel { background: var(--saa-card-bg-dark, #0c1a27); }
/* Nicht Weiss: Die Karte ist selbst weiss, ein weisses Feld wäre kein Feld, sondern eine
   Lücke – neben einer Karte mit dunklem Feld sah die Reihe nach Fehler aus (gemessen
   02.10.2026). Dieser helle Neutralton ist derselbe wie die Schrift auf dem dunklen Feld,
   nur andersherum eingesetzt. */
.sw-refcard__marke--hell   { background: #f4f6f8; }
/* Die einfache Regel setzte sich nicht durch - das Logo stand in voller Dateigrösse in der
   Karte. Dieselbe Eskalation wie bei den übrigen Bildregeln. */
html body main .sw-refcard__logo:not(#____never____):not(#____sw____) {
  width: auto !important;
  height: auto !important;
  max-height: 96px !important;
  max-width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
html body main .sw-refcard__wort:not(#____never____):not(#____sw____) {
  display: block;
  margin: 0;
  color: #f4f6f8;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: .02em;
  text-align: center;
}
/* Die Wortmarke steht heute nur auf dunklem Feld (Projektus Bau). Käme je eine auf helles
   Feld, wäre sie weiss auf Weiss – darum die Gegenregel gleich mit. */
html body main .sw-refcard__marke--hell .sw-refcard__wort:not(#____never____):not(#____sw____) {
  color: var(--saa-text, #14181b);
}
.sw-refcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 1.5vw, 24px) clamp(18px, 1.5vw, 24px) clamp(20px, 1.7vw, 26px);
  flex: 1;
}
html body main p.sw-refcard__branche:not(#____never____):not(#____sw____) {
  margin: 0;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--saa-text-muted);
}
.sw-refcard h3 { margin: 0; }
.sw-refcard__body > p { margin: 0; }
.sw-refcard__leistungen { margin-top: auto; padding-top: 6px; }
html body main .sw-refcard__body h3:not(#____never____):not(#____sw____) {
  font-size: clamp(19px, 1.5vw, 23px) !important;
  line-height: 1.24 !important;
}
.page-section--dark .sw-refcard__branche { color: rgba(244, 246, 248, .72); }
@media (max-width: 1180px) { .sw-refcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sw-refcards { grid-template-columns: 1fr; }
  .sw-refcard__marke { height: 104px; }
  html body main .sw-refcard__logo:not(#____never____):not(#____sw____) { max-height: 76px !important; }
}

/* ---------------------------------------------------------------- Teamkarte, dritte Fassung
   02.10.2026. Joshua: «Diese 4 Elemente nochmals überarbeiten, bisschen lebendiger
   darstellen.» Die zweite Fassung (helle Kopfzeile) war ruhig, aber grau in grau – vier
   weisse Rechtecke mit einem hellgrauen Streifen obendrauf.

   Lebendigkeit muss hier aus Typografie und Hausfarbe kommen, weil es keine Porträts gibt
   und nach Hausregel keine Symbolkachel auf eine Karte gehört. Verwendet wird deshalb ein
   Bauteil, das die Seite bereits führt: das rote Etikett mit vorangestellter Haarlinie
   (`.sw-uchub__eyebrow`, 12px, #d91e18, 44px Linie). Dazu eine rote Oberkante je Karte –
   vier davon geben der Reihe einen Rhythmus, den vier gleiche Rechtecke nicht haben.

   Volltonrot statt Verlauf: Ein Verlauf nach Orange sah im Versuch besser aus, führt aber
   eine Farbe ein, die es in der Palette nicht gibt. */
.sw-person {
  position: relative;
  overflow: hidden;
}
.sw-person::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #d91e18;
}
/* Die Typo-Normalisierung zwingt jedes <p> in <main> auf 16px/1.62, `.partner-triad p`
   setzt den Rand auf 0 und `section p` kappt die Breite auf Lesemass. Alle drei stehen in
   fremden, später geladenen Dateien – deshalb liegt die ganze Rollenzeile in der
   Eskalation und nicht in einer einfachen Regel. */
html body main p.sw-person__rolle:not(#____never____):not(#____sw____) {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px !important;
  padding: 0 !important;
  max-width: none !important;
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: uppercase;
}
html body main p.sw-person__rolle:not(#____never____):not(#____sw____)::before {
  content: "";
  display: block;
  width: 44px;
  height: 1px;
  background: rgba(217, 30, 24, .35);
}
html body main .sw-person h3:not(#____never____):not(#____sw____) {
  margin: 0 0 12px;
  font-size: clamp(21px, 1.7vw, 26px) !important;
}
/* Auf dunklen Bändern bleibt das Rot lesbar, die Haarlinie braucht mehr Deckkraft. */
.page-section--dark .sw-person::before { background: #ff312b; }
html body main .page-section--dark p.sw-person__rolle:not(#____never____):not(#____sw____) {
  color: #ff5a4d !important;
  -webkit-text-fill-color: #ff5a4d;
}
html body main .page-section--dark p.sw-person__rolle:not(#____never____):not(#____sw____)::before {
  background: rgba(255, 90, 77, .45);
}

/* ---------------------------------------------------------------- Pionierpartner-Titel, eine rote Zeile
   03.10.2026. Joshua: «Der rote Text darf NICHT die Zeile wechseln, es muss eine Zeile sein.»
   «Gemeinsam Branchenlösungen ausarbeiten und erproben.» misst rund 27,9 em. Damit sie im
   Textblock Platz hat, richtet sich die Titelgrösse nach der Breite des Textblocks (Container-
   Einheit cqw) statt nach dem Bildschirm, und der Block darf hier breiter werden als die
   üblichen 900px. Gilt auf allen Breiten – auch auf dem Handy (Joshua 03.10., zweite
   Rückmeldung: «springt bis dato immer noch auf eine 2. Zeile»). Die frühere Ausnahme unter
   640px ist entfernt; der Titel wird dort entsprechend klein (rund 12px bei 390px Breite).
   Vier ID-Stufen: hero-unify.css und die Hero-Regel weiter oben haben je drei. */
@media all {
  html body:not(#saig-x) main .partner-hero .hero-scene__content:not(#____never____):not(#____sw____):not(#____pp____) {
    container-type: inline-size;
    width: min(1240px, 100%) !important;
    max-width: min(1240px, 100%) !important;
  }
  html body:not(#saig-x) main .partner-hero h1.pp-hero-title:not(#____never____):not(#____sw____):not(#____pp____) {
    font-size: min(56px, calc(100cqw / 28.6)) !important;
  }
  html body:not(#saig-x) main .partner-hero h1.pp-hero-title .pp-hero-title__rot:not(#____never____):not(#____sw____):not(#____pp____) {
    white-space: nowrap !important;
  }
}

/* --- Runde 40 (03.10.2026, Joshua: «Hero immer klar zu sehen») -------------------------------------------
   Titel, Text und beide Knöpfe stehen auf jedem Gerät ohne Scrollen im ersten Bildschirm.
   (a) Desktop: hero-unify.css setzte min-height max(640px, …) – auf niedrigen Fenstern (1280×600, Laptop mit
       125 % Skalierung) rutschten die Knöpfe unter den Rand. Jetzt genau Fensterhöhe minus Kopfzeile; Polster,
       Titel und Text richten sich zusätzlich nach der Höhe (svh), nicht nur nach der Breite.
   (b) Handy quer (≤ 500px hoch): kompaktes Polster, kleinerer Titel, Knöpfe nebeneinander.
   Vier ID-Stufen, weil hero-unify.css später lädt und drei setzt. */
@media (min-width: 1025px) {
  html body:not(#saig-x) main .hero-scene--subpage:not(#____never____):not(#____sw____):not(#____r40____) {
    min-height: calc(100svh / var(--sw-zoom, 1) - var(--saa-header-h, 84px)) !important;
    padding-top: clamp(32px, 9svh, 128px) !important;
    padding-bottom: clamp(32px, 7svh, 104px) !important;
  }
  html body:not(#saig-x) main .hero-scene:not(.hero-scene--subpage):not(#____never____):not(#____sw____):not(#____r40____) {
    padding-top: clamp(32px, 9svh, 128px) !important;
    padding-bottom: clamp(32px, 7svh, 104px) !important;
  }
  html body:not(#saig-x) main .hero-scene .hero-scene__title:not(#____never____):not(#____sw____):not(#____r40____) {
    font-size: clamp(30px, min(3.6vw, 6.6svh), 56px) !important;
  }
  html body:not(#saig-x) main .hero-scene .hero-scene__copy:not(#____never____):not(#____sw____):not(#____r40____) {
    margin-top: clamp(12px, 2.4svh, 24px) !important;
  }
  html body:not(#saig-x) main .hero-scene .hero-scene__actions:not(#____never____):not(#____sw____):not(#____r40____) {
    margin-top: clamp(16px, 3.6svh, 36px) !important;
  }
}
@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  html body:not(#saig-x) main :is(.hero-scene, .hero-scene--subpage):not(#____never____):not(#____sw____):not(#____r40____) {
    min-height: calc(100svh - var(--saa-header-h-mobile, 76px)) !important;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
  }
  html body:not(#saig-x) main .hero-scene .hero-scene__title:not(#____never____):not(#____sw____):not(#____r40____) {
    font-size: clamp(22px, 7svh, 28px) !important;
    max-width: 100% !important;
  }
  html body:not(#saig-x) main .hero-scene .hero-scene__copy:not(#____never____):not(#____sw____):not(#____r40____) {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin-top: 8px !important;
    max-width: 100% !important;
  }
  html body:not(#saig-x) main .hero-scene .hero-scene__content:not(#____never____):not(#____sw____):not(#____r40____) { max-width: 100% !important; width: 100% !important; }
  html body:not(#saig-x) main .hero-scene .hero-scene__actions:not(#____never____):not(#____sw____):not(#____r40____) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  html body:not(#saig-x) main .hero-scene .hero-scene__actions > a:not(#____never____):not(#____sw____):not(#____r40____) {
    width: auto !important;
    min-height: 44px !important;
    flex: 0 0 auto !important;
  }
}

/* --- Runde 40: grosse Bildschirme und TV (Joshua 03.10.2026: «Wir spiegeln den Desktop direkt an einen 65"-TV»).
   Das Gerüst rechnet in festen px (Schrift 16px, Inhalt höchstens 1360px). Auf 1920er-Bildschirmen blieb
   links und rechts viel leer, auf 4K (3840) war die Seite winzig – aus 2–4 m nicht lesbar.
   Ab 1600px wird der Inhalt breiter; ab 1900px wächst die ganze Seite proportional (CSS zoom), so dass sie
   sich wie ein rund 1700–2050px breiter Desktop verhält: 1920 → ×1.125, 2560 → ×1.4, 3840 → ×1.875.
   --sw-zoom gleicht Masse aus, die sich auf die Fensterhöhe beziehen (Hero), weil zoom auch svh vergrössert. */
@media (min-width: 1600px) {
  :root { --saig-shell: 1480px; }
}
@media (min-width: 1900px) { :root { --sw-zoom: 1.125; } html { zoom: 1.125; } }
@media (min-width: 2400px) { :root { --sw-zoom: 1.4; } html { zoom: 1.4; } }
@media (min-width: 3200px) { :root { --sw-zoom: 1.875; } html { zoom: 1.875; } }

/* --- Runde 40: keine Lücken in Rastern auf Tablet-Breiten (Joshua 03.10.2026: «nicht nur MABEX, diverse
   Unterseiten»). Ein Messdurchlauf über alle 88 Seiten bei 375/768/1024/1440/1920px fand die Lücken nur
   zwischen 561 und 1024px: Dort fallen diese Raster auf zwei Spalten, und bei ungerader Zahl blieb das letzte
   Element links mit leerem Platz daneben. Es steht jetzt mittig in der letzten Reihe. */
@media (min-width: 561px) and (max-width: 1024px) {
  html body main :is(.academy-fit-signals, .beratung-why-list, .beratung-flow-line, .wt-video-grid,
    .wt-price-grid, .sw-refcards, .partner-delivery, .partner-role__list, .pp-tiles)
    > :last-child:nth-child(odd):not(:first-child):not(#____never____):not(#____sw____) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc(50% - 12px) !important;
    max-width: none !important;
    margin-inline: auto !important; /* falls das Raster ein Flex-Umbruch ist */
  }
  /* Werbeträger: vier Hochformat-Formate standen 3 + 1 – jetzt 2 × 2. */
  html body main .wt-format-grid--portrait:not(#____never____) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Diese drei Raster haben auch auf dem Desktop zwei Spalten – die Regel gilt dort ab 561px ohne Obergrenze. */
@media (min-width: 1025px) {
  html body main :is(.partner-delivery, .partner-role__list, .pp-tiles)
    > :last-child:nth-child(odd):not(:first-child):not(#____never____):not(#____sw____) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc(50% - 12px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
}
/* .sw-imgcards sind zwischen 901 und 1024px noch dreispaltig (Codex 03.10.) – die Regel greift dort erst ab 900px abwärts. */
@media (min-width: 561px) and (max-width: 900px) {
  html body main .sw-imgcards > :last-child:nth-child(odd):not(:first-child):not(#____never____):not(#____sw____) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc(50% - 12px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
}


/* --- Sprachumschalter «DE / EN» (Masterprompt EN §5.7, 13.10.2026) ---------------------------------
   Steht in .site-header__actions vor dem CTA; im Menü-Knopf-Modus neben dem Knopf. Aktive Sprache
   hervorgehoben, Tippziel mindestens 44×44 px. Der Link führt immer auf dieselbe Seite in der anderen Sprache. */
html body .site-header .site-header__lang:not(#____never____):not(#____sw____) {
  align-items: center;
  border-radius: var(--saa-radius-control, 999px);
  color: var(--saa-text-muted) !important;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: Inter, sans-serif;
  font-size: 13px !important;
  font-weight: 600 !important;
  gap: 4px;
  justify-content: center;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap;
}
html body .site-header .site-header__lang .is-current { color: var(--saa-text); }
html body .site-header .site-header__lang .site-header__lang-sep { color: var(--saa-border); font-weight: 400; }
html body .site-header .site-header__lang:hover:not(#____never____):not(#____sw____),
html body .site-header .site-header__lang:focus-visible:not(#____never____):not(#____sw____) { background: var(--saa-surface-soft, #f4f6f8); color: var(--saa-red) !important; }
html body .site-header .site-header__lang:hover .site-header__lang-opt:not(.is-current) { color: var(--saa-red); }
.site-header__actions { align-items: center; display: flex; gap: 8px; }
/* Sprachwahl oben im Menü-Panel (main.js) – nur im Menü-Knopf-Modus sichtbar */
@media (min-width: 1024px) { html body .site-nav-primary .site-nav-item--lang:not(#____never____):not(#____sw____) { display: none !important; } }
html body nav [data-mobile-nav-panel] .site-nav-item--lang:not(#____never____):not(#____sw____) { width: 100%; }
html body nav [data-mobile-nav-panel] .site-nav-item--lang a.site-nav-lang:not(#____never____):not(#____sw____) {
  flex: 1 1 auto !important;
  color: var(--saa-text-muted) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body nav [data-mobile-nav-panel] .site-nav-item--lang .is-current { color: var(--saa-text); }

/* Rechtsvorbehalt über übersetzten Rechtsseiten (nur /en/legal-notice/ und /en/privacy-policy/) */
.sw-legal-note { background: var(--saa-surface-soft, #f4f6f8); border-bottom: 1px solid var(--saa-border); padding: 14px 0; }
.sw-legal-note p { color: var(--saa-text); font-size: 15px; line-height: 1.5; margin: 0; }
.sw-legal-note a { color: var(--saa-red); font-weight: 600; }

/* =====================================================================================================
   Feedback Joshua 13.10.2026: Hero-Texte (DE und EN) feiner und kleiner – vorher 56px max. / Gewicht 500,
   jetzt 42px max. / Light 300; Hero-Fliesstext ebenfalls Light. Inter 300 wird in _src/layout.html geladen.
   Vier ID-Stufen, damit die Regeln oben und hero-unify.css (drei Stufen) übersteuert werden.
   Querformat-Handy (max. 500px hoch) behält seine eigene, kleinere Grösse weiter oben.
   ===================================================================================================== */
html body:not(#saig-x) main :is(.hero-scene .hero-scene__title, .hero-scene .hero-scene__title *, .partner-hero h1.pp-hero-title, .partner-hero h1.pp-hero-title *):not(#____never____):not(#____sw____):not(#____r40____):not(#____fein____) {
  font-weight: 300 !important;
}
html body:not(#saig-x) main .hero-scene .hero-scene__title:not(#____never____):not(#____sw____):not(#____r40____):not(#____fein____) {
  letter-spacing: -0.01em !important;
  line-height: 1.12 !important;
}
@media not all and (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  html body:not(#saig-x) main .hero-scene .hero-scene__title:not(#____never____):not(#____sw____):not(#____r40____):not(#____fein____) {
    font-size: clamp(28px, 2.9vw, 42px) !important;
  }
}
@media (min-width: 1025px) {
  html body:not(#saig-x) main .hero-scene .hero-scene__title:not(#____never____):not(#____sw____):not(#____r40____):not(#____fein____) {
    font-size: clamp(28px, min(2.9vw, 5.4svh), 42px) !important;
  }
}
html body:not(#saig-x) main .partner-hero h1.pp-hero-title:not(#____never____):not(#____sw____):not(#____pp____):not(#____fein____) {
  font-size: min(42px, calc(100cqw / 28.6)) !important;
}
html body:not(#saig-x) main .hero-scene .hero-scene__copy:not(#____never____):not(#____sw____):not(#____r40____):not(#____fein____) {
  font-weight: 300 !important;
}