/*
********************
components
********************
*/

:root {
  --scable-primary: #00BFA5;
  --scable-primary-gradient: linear-gradient(45deg, var(--scable-primary), #05E3B8) border-box;
  --scable-secondary: #00816E;
  --scable-secondary-gradient: linear-gradient(45deg, var(--scable-secondary) 0%, var(--scable-primary) 70%) !important;
  --scable-form-boxshadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 191, 165, 0.6);
  --scable-black: #1C2331;
  --scable-dark: #1C2331;
  --scable-button: #1C2331;
  --scable-dark-gradient: linear-gradient(15deg, var(--scable-dark) 40%, #333538 100%) !important;
  --scable-stylish: #5A616F;
  --scable-scrollbar: #9AA3B2;
  --scable-scrollbar-background: rgba(0, 0, 0, 0);
  --scable-scrollbar-border: rgba(0, 0, 0, 0);
  --scable-grey: #6D7692;
  --scable-bright: #D2DDE2;
  --scable-brightest: #ECEFF1;
  --scable-white: #FFFFFF;
  --scable-red: #BF360F;
  --scable-yellow: #EAB320;
  --scable-green: #259866;
  --scable-orange: #FF5722;
  --scable-light-blue: #87c3ff;
  --scable-blue: #1976D2;
  --scable-brown: #795548;
  --scable-pink: #F06292;
  --scable-purple: #BA68C8;
  --scable-nav-shadow: 0 2px 4px rgb(33 51 67 / 12%);
  --bs-table-hover-color: black;
  --bs-table-hover-bg: var(--scable-brightest)
}

@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/website_directory/sfw/font/notosans/noto-sans-v39-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: url('/website_directory/sfw/font/notosans/noto-sans-v39-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/website_directory/sfw/font/notosans/noto-sans-v39-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: "Font Awesome 6 Pro";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(../../fontawesome-pro/webfonts/fa-solid-900.woff2) format("woff2"), url(../../fontawesome-pro/webfonts/fa-solid-900.ttf) format("truetype")
}
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../../fontawesome-pro/webfonts/fa-brands-400.woff2) format("woff2"), url(../../fontawesome-pro/webfonts/fa-brands-400.ttf) format("truetype")
}


.text-7xl {font-size: 4.5rem!important;}
.text-6xl {font-size: 4.0rem!important;}
.text-5xl {font-size: 3.5rem!important;}
.text-4xl {font-size: 3.0rem!important;}
.text-3xl {font-size: 2.5rem!important;}
.text-2xl {font-size: 2.0rem!important;}
.text-xl {font-size: 1.5rem!important;}
.text-lg {font-size: 1.25rem!important;}
.text-md {font-size: 1.0rem!important;}
.text-sm {font-size: 0.75rem!important;}
.text-xs {font-size: 0.5rem!important;}

.text-bold {font-weight: 700;}
.text-thin {font-weight: 300;}
.italic {font-style: italic;}

body, nav {
  font-family: Noto Sans;
  font-weight: 400;
}

.scable-primary,
.scable-teal,
.st-teal,
.st-citrus,
.scable-citrus {
  background-color: var(--scable-primary) !important;
  color: var(--scable-white) !important
}

.scable-primary-gradient {
  background: var(--scable-primary-gradient);
  color: var(--scable-white) !important
}

.scable-secondary {
  background: var(--scable-secondary-gradient);
  color: var(--scable-white) !important
}

.scable-black {
  background-color: var(--scable-black) !important;
  color: var(--scable-white) !important
}

.scable-dark,
.st-dark {
  background-color: var(--scable-dark) !important;
  color: var(--scable-white) !important
}

.scable-dark-gradient {
  background: var(--scable-dark-gradient);
  color: var(--scable-white) !important
}

.scable-stylish,
.st-stylish {
  background-color: var(--scable-stylish) !important;
  color: var(--scable-white) !important
}

.scable-grey,
.st-grey {
  background-color: var(--scable-grey) !important;
  color: var(--scable-white) !important
}

.scable-bright,
.st-bright {
  background-color: var(--scable-bright) !important;
  color: var(--scable-black) !important
}

.scable-brightest,
.st-brightest {
  background-color: var(--scable-brightest) !important;
  color: var(--scable-black) !important
}

.scable-white,
.st-white {
  background-color: var(--scable-white) !important;
  color: var(--scable-black) !important
}

.scable-red,
.st-red {
  background-color: var(--scable-red) !important;
  color: var(--scable-white) !important
}

.scable-orange,
.st-orange {
  background-color: var(--scable-orange) !important;
  color: var(--scable-white) !important
}

.scable-yellow,
.st-yellow {
  background-color: var(--scable-yellow) !important;
  color: var(--scable-white) !important
}

.scable-green,
.st-green {
  background-color: var(--scable-green) !important;
  color: var(--scable-white) !important
}

.scable-blue,
.st-blue {
  background-color: var(--scable-blue) !important;
  color: var(--scable-white) !important
}

.scable-purple,
.st-purple {
  background-color: var(--scable-purple) !important;
  color: var(--scable-white) !important
}

.scable-pink,
.st-pink {
  background-color: var(--scable-pink) !important;
  color: var(--scable-white) !important
}

.scable-brown,
.st-brown {
  background-color: var(--scable-brown) !important;
  color: var(--scable-white) !important
}

.scable-primary-text,
.scable-teal-text,
.st-teal-text,
.st-citrus-text,
.scable-citrus-text {
  color: var(--scable-primary) !important
}

.scable-secondary-text {
  color: var(--scable-secondary) !important
}

.scable-green-text,
.st-green-text {
  color: var(--scable-green) !important
}

.scable-black-text,
.st-black-text {
  color: var(--scable-black) !important
}

.scable-dark-text,
.st-dark-text {
  color: var(--scable-dark) !important
}

.scable-stylish-text,
.st-stylish-text {
  color: var(--scable-stylish) !important
}

.scable-grey-text,
.st-grey-text {
  color: var(--scable-grey) !important
}

.scable-bright-text,
.st-bright-text {
  color: var(--scable-bright) !important
}

.scable-brightest-text,
.st-brightest-text {
  color: var(--scable-brightest) !important
}

.scable-white-text,
.st-white-text {
  color: var(--scable-white) !important
}

.scable-red-text,
.st-red-text,
.error {
  color: var(--scable-red) !important
}

.scable-orange-text,
.st-orange-text {
  color: var(--scable-orange) !important
}

.scable-yellow-text,
.st-yellow-text {
  color: var(--scable-yellow) !important
}

.scable-green-text,
.st-green-text {
  color: var(--scable-green)
}

.scable-blue-text,
.st-blue-text {
  color: var(--scable-blue) !important
}

.scable-purple-text,
.st-purple-text,
.purple-text {
  color: var(--scable-purple) !important
}

.scable-pink-text,
.st-pink-text,
.pink-text {
  color: var(--scable-pink) !important
}

.scable-brown-text,
.st-brown-text,
.brown-text {
  color: var(--scable-brown) !important
}

.st-random-color-a,
.st-random-color-k,
.st-random-color-u,
.st-random-color-1 {
  background-color: var(--scable-primary);
  color: var(--scable-white) !important
}

.st-random-color-b,
.st-random-color-l,
.st-random-color-v,
.st-random-color-2 {
  background-color: var(--scable-secondary);
  color: var(--scable-white) !important
}

.st-random-color-c,
.st-random-color-m,
.st-random-color-w,
.st-random-color-3 {
  background-color: var(--scable-yellow);
  color: var(--scable-white) !important
}

.st-random-color-d,
.st-random-color-n,
.st-random-color-x,
.st-random-color-4 {
  background-color: var(--scable-grey);
  color: var(--scable-white) !important
}

.st-random-color-e,
.st-random-color-o,
.st-random-color-y,
.st-random-color-5 {
  background-color: var(--scable-stylish);
  color: var(--scable-white) !important
}

.st-random-color-f,
.st-random-color-p,
.st-random-color-z,
.st-random-color-6 {
  background-color: var(--scable-black);
  color: var(--scable-white) !important
}

.st-random-color-g,
.st-random-color-q,
.st-random-color-ä,
.st-random-color-7 {
  background-color: var(--scable-red);
  color: var(--scable-white) !important
}

.st-random-color-h,
.st-random-color-r,
.st-random-color-ö,
.st-random-color-8 {
  background-color: var(--scable-orange);
  color: var(--scable-white) !important
}

.st-random-color-i,
.st-random-color-s,
.st-random-color-ü,
.st-random-color-9 {
  background-color: var(--scable-green);
  color: var(--scable-white) !important
}

.st-random-color-j,
.st-random-color-t,
.st-random-color-0 {
  background-color: var(--scable-blue);
  color: var(--scable-white) !important
}

::-webkit-scrollbar {
  background-color: var(--scable-scrollbar-background) !important;
  width: 12px
}

::-webkit-scrollbar-thumb {
  background-color: var(--scable-scrollbar) !important;
  border-radius: 10px
}

::-webkit-scrollbar-button {
  display: none
}

html {
  scroll-behavior: smooth
}

a {
  color: inherit !important;
  text-decoration: none
}

a:hover {
  color: var(--scable-black);
  text-decoration: inherit;
  cursor: pointer !important
}

button {
  border: none;
  background-color: inherit;
  color: inherit
}

button:focus {
  outline: none
}

select option {
  background: var(--scable-brightest) !important;
  color: var(--scable-black) !important
}

@media (min-width:1800px) {
  .col-2xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
  }

  .col-2xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
  }

  .col-2xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
  }

  .col-2xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
  }

  .col-2xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
  }

  .col-2xl-6 {
    -ms-flex: 0 0 50.0%;
    flex: 0 0 50.0%;
    max-width: 50.0%
  }

  .col-2xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
  }

  .col-2xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
  }

  .col-2xl-9 {
    -ms-flex: 0 0 75.0%;
    flex: 0 0 75.0%;
    max-width: 75.0%
  }

  .col-2xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
  }

  .col-2xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
  }

  .col-2xl-12 {
    -ms-flex: 0 0 100.0%;
    flex: 0 0 100.0%;
    max-width: 100.0%
  }
}

@media (min-width:2400px) {
  .col-3xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
  }

  .col-3xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
  }

  .col-3xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
  }

  .col-3xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
  }

  .col-3xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
  }

  .col-3xl-6 {
    -ms-flex: 0 0 50.0%;
    flex: 0 0 50.0%;
    max-width: 50.0%
  }

  .col-3xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
  }

  .col-3xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
  }

  .col-3xl-9 {
    -ms-flex: 0 0 75.0%;
    flex: 0 0 75.0%;
    max-width: 75.0%
  }

  .col-3xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
  }

  .col-3xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
  }

  .col-3xl-12 {
    -ms-flex: 0 0 100.0%;
    flex: 0 0 100.0%;
    max-width: 100.0%
  }
}

.scable-pulse,
.pulse,
.st-pulse {
  animation: opacityPulse 1.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 1
}

@keyframes opacityPulse {
  0% {
    opacity: 0.5
  }

  50% {
    opacity: 1.0
  }

  100% {
    opacity: 0.5
  }
}

.scable-tada,
.tada,
.st-tada {
  animation: zoomEffect 1.0s ease-out;
  animation-iteration-count: infinite;
  opacity: 1
}

@keyframes zoomEffect {
  0% {
    transform: scale(1, 1)
  }

  50% {
    transform: scale(1.2, 1.2)
  }

  100% {
    transform: scale(1, 1)
  }
}

.scable-animation-single,
.st-animation-single {
  animation-iteration-count: 1
}

.scable-delay-1,
.st-delay-1 {
  animation-delay: 0.2s !important
}

.scable-delay-2,
.st-delay-2 {
  animation-delay: 0.4s !important
}

.scable-delay-3,
.st-delay-3 {
  animation-delay: 0.6s !important
}

.scable-bounce,
.st-bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0)
  }

  40% {
    transform: translateY(-30px)
  }

  60% {
    transform: translateY(-15px)
  }
}

.scable-bounce-x {
  -moz-animation: bounceX 2s infinite;
  -webkit-animation: bounceX 2s infinite;
  animation: bounceX 2s infinite
}

@keyframes bounceX {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0)
  }

  40% {
    transform: translateX(-12px)
  }

  60% {
    transform: translateX(-4px)
  }
}

.scable-fadeIn,
.st-fadeIn {
  animation: fadeIn 0.5s ease-in both
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.scable-fadeIn-top,
.st-fadeIn-top {
  animation: fadeIn-top 0.5s ease-in both
}

@keyframes fadeIn-top {
  from {
    opacity: 0;
    transform: translate3d(0, -20%, 0)
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}

.scable-fadeIn-bottom,
.st-fadeIn-bottom {
  animation: fadeIn-bottom 0.5s ease-in both
}

@keyframes fadeIn-bottom {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0)
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}

.scable-fadeIn-Left,
.st-fadeIn-left {
  animation: fadeIn-left 0.5s ease-in both
}

@keyframes fadeIn-left {
  from {
    opacity: 0;
    transform: translate3d(-20%, 0, 0)
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}

.scable-fadeIn-right,
.st-fadeIn-right {
  animation: fadeIn-right 0.5s ease-in both
}

@keyframes fadeIn-right {
  from {
    opacity: 0;
    transform: translate3d(20%, 0, 0)
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}

.scable-ping {
  -webkit-animation: ping 1.5s ease-in infinite both;
  animation: ping 1.5s ease-in infinite both
}

@-webkit-keyframes ping {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0.8
  }

  80% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0
  }

  100% {
    -webkit-transform: scale(2.2);
    transform: scale(2.2);
    opacity: 0
  }
}

@keyframes ping {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0.8
  }

  80% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0
  }

  100% {
    -webkit-transform: scale(2.2);
    transform: scale(2.2);
    opacity: 0
  }
}

.tooltip-inner {
  max-width: 280px;
  background-color: var(--scable-white);
  padding: 7.5px;
  color: black;
  font-size: 0.8rem;
  border-radius: 10px;
  border: solid 0.5px var(--scable-stylish);
  font-weight: 500;
  box-shadow: 2px 1px 5px-1px var(--scable-stylish);
  opacity: 1 !important
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
  margin-left: 2px;
  content: "";
  border-width: 5px 5px 0;
  border-top-color: var(--scable-stylish)
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
  margin-top: 0px;
  content: "";
  border-width: 5px 5px 5px 0;
  border-right-color: var(--scable-stylish)
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before {
  margin-left: 2px;
  content: "";
  border-width: 0 5px 5px;
  border-bottom-color: var(--scable-stylish)
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,
.tooltip.bs-tooltip-left .arrow::before {
  right: 0;
  margin-top: 0px;
  content: "";
  border-width: 5px 0 5px 5px;
  border-left-color: var(--scable-stylish)
}

body {
  color: var(--scable-black);
  margin: 0
}

nav {
  display: block
}

button {
  font-family: inherit;
  cursor: pointer
}

table tr td,
table tr th {
  border-bottom: solid var(--scable-bright) 1px
}

p strong {
  font-weight: 700
}

.link {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--scable-primary);
  text-decoration-thickness: 2px
}

*,
*::before,
*::after {
  box-sizing: border-box
}

.text-start {
  text-align: left !important
}

.text-end {
  text-align: right !important
}

.text-center {
  text-align: center !important
}

.text-decoration-none {
  text-decoration: none !important
}

.text-decoration-underline {
  text-decoration: underline !important
}

.text-decoration-line-through {
  text-decoration: line-through !important
}

.text-lowercase {
  text-transform: lowercase !important
}

.text-uppercase {
  text-transform: uppercase !important
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25
}

.w-100 {
  width: 100% !important
}

.h-100 {
  height: 100% !important
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1,
.text-big-one {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2
}

/* Must stay after the block above, which sets font-weight 500 on the same
   headings. This used to be re-asserted by the copy that rode along with the
   inlined Bootstrap bundle; with that gone it has to sit here explicitly. */
h1, .h1, .text-big-one, h2, .h2, h3, .h3, h4, .h4 {
  font-weight: 700;
}

h1,
.h1,
.text-big-one {
  font-size: 2rem;
}

@media (min-width:1200px) {

  h1,
  .h1,
  .text-big-one {
    font-size: 2.5rem
  }
}

h2,
.h2 {
  font-size: 1.75rem;
}

@media (min-width:1200px) {

  h2,
  .h2 {
    font-size: 2rem;
  }
}

h3,
.h3 {
  font-size: 1.5rem;
}

@media (min-width:1200px) {

  h3,
  .h3 {
    font-size: 1.75rem
  }
}

h4,
.h4 {
  font-size: 1.3rem;
}

@media (min-width:1200px) {

  h4,
  .h4 {
    font-size: 1.5rem
  }
}

h5,
.h5 {
  font-size: 1.2rem
}

h6,
.h6 {
  font-size: 1rem
}

p {
  margin-top: 0;
  margin-bottom: 1rem
}

.tab-content>.tab-pane {
  display: none
}

.tab-content>.active {
  display: block
}

.scable-border,
.scable-bright-border {
  border: 1px solid var(--scable-grey)
}

.scable-primary-quote {
  border-width: 5px;
  border-style: solid;
  border-image: linear-gradient(to bottom, var(--scable-primary), rgba(0, 0, 0, 0)) 1 100%
}

.scable-underline {
  text-decoration: underline;
  text-decoration-color: var(--scable-primary);
  text-decoration-thickness: 2px
}

.scable-underline-lg {
  text-decoration: underline;
  text-decoration-color: var(--scable-primary);
  text-decoration-thickness: 5px
}

.scable-card {
  border: 1px solid var(--scable-brightest);
  border-radius: 1rem;
  box-shadow: 0 3px 10px rgb(33 51 67 / 12%);
  padding: 1rem;
  position: relative;
  overflow: hidden
}

.scable-card-cta-bottom {
  padding-bottom: 5rem
}

.scable-btn-cta-bottom {
  position: absolute;
  bottom: 1rem;
  right: 0rem
}

.scable-section-btn {
  border: 1px solid var(--scable-brightest);
  border-radius: 0.25rem;
  box-shadow: 0 3px 10px rgb(33 51 67 / 12%);
  padding: 1rem;
  position: relative;
  line-height: 4rem
}

.scable-shadow {
  box-shadow: 0 3px 10px rgb(33 51 67 / 12%)
}

.scable-btn {
  padding: 5px 15px;
  border-radius: 150px;
  margin: 15px 15px 15px 0;
  display: inline-block
}

.scable-btn-sm {
  padding: 4px 12px !important;
  border-radius: 150px;
  margin: auto;
  display: inline-block
}

.scable-border-none {
  border: none
}

.scable-border-bottom {
  border-bottom: 1px solid var(--scable-bright)
}

.scable-border-top {
  border-top: 1px solid var(--scable-bright)
}

.scable-border-radius {
  border-radius: 0.35rem
}

.scable-accordion {
  background-color: inherit;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: inherit;
  transition: 0.4s
}
.scable-nav-accordion {
  background-color: inherit;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: inherit;
  transition: 0.4s
}
.snavaccprnt-active {
  position: relative;
  border: 0;
  box-shadow: none;
  height: calc(100vh - 94.5px);
}
.snavaccprnt-active button {
  font-size: 25px;
}
.snavaccprnt-active .scable-panel {
  padding: 0px 18px 0px 18px;
}

.scable-nav-accordion .new-navbar-a {
  margin: 0;
}
p.mb {
  font-size: 14px;
  line-height: 1.1;
  margin: 0;
}

.scable-panel {
  padding: 0rem 2rem;
  background-color: inherit;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out
}

.scable-accordion:after {
  content: '\02795';
  color: inherit;
  float: right;
  margin-left: 5px
}

.scable-accordion.active:after {
  content: "\2796"
}
.scable-nav-accordion:after {
  content: '\02795';
  color: inherit;
  float: right;
  margin-left: 5px
}

.scable-nav-accordion.active:after {
  content: "\2796"
}

.scable-tabs-btn {
  padding: 10px 25px;
  margin: 0 5px 5px 0;
  border-radius: 5rem;
  border: solid 1px var(--scable-bright);
  font-size: 1rem
}

.scable-tabs-btn.active {
  background-color: var(--scable-brightest)
}

.scable-resources-tabs-btn {
  width: 100%;
  padding: 0.5rem !important;
  text-align: left !important;
  color: var(--scable-grey);
  border-radius: 0 0.5rem 0.5rem 0;
  position: relative;
  font-size: medium
}

.scable-resources-tabs-btn:hover {
  background-color: var(--scable-brightest);
  border-right: solid 0.5rem var(--scable-grey)
}

.scable-resources-tabs-btn.active {
  border-right: solid 0.5rem var(--scable-dark);
  color: var(--scable-dark);
  background-color: var(--scable-brightest)
}

.scable-resources-tabs-btn.active .cw-icon-outer {
  background-color: var(--scable-primary) !important;
  color: var(--scable-white) !important
}

.cw-icon-outer {
  border-radius: 5px;
  padding: 3px;
  width: 30px;
  margin-right: 10px;
  display: inline-block;
  text-align: center
}

@media (max-width:1200px) {
  .scable-tabs-btn {
    font-size: 0.8rem
  }

  .scable-resources-tabs-btn {
    font-size: 0.8rem;
    padding: 0.25rem !important
  }

  #resources-pills-tab {
    max-height: 150px !important;
    overflow-y: auto;
    padding-right: 0.5rem
  }

  .cw-icon-outer {
    width: 25px
  }
}

.text-right {
  text-align: right;
  justify-content: right
}

.text-left {
  text-align: left;
  justify-content: left
}

.text-center {
  text-align: center;
  justify-content: center
}

.py-col {
  padding: 12px 12px
}

.my-col {
  margin: 12px 12px
}

.ml-1 {
  margin-left: 0.5rem
}

.ml-2 {
  margin-left: 1rem
}

.ml-3 {
  margin-left: 2rem
}

.mr-1 {
  margin-right: 0.5rem
}

.mr-2 {
  margin-right: 1rem
}

.mr-3 {
  margin-right: 2rem
}

.scable-pos-relative {
  position: relative
}

.scable-pos-abs-bot-2 {
  position: absolute;
  bottom: 2rem;
  left: 0
}

.hr-primary {
  height: 10px;
  background-image: var(--scable-primary-gradient);
  border: 0;
  height: 5px;
  opacity: 1
}

.scable-hover {
  display: inline-block;
  position: relative
}

.scable-hover:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--scable-primary);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out
}

.scable-hover:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left
}

.scable-cursor-pointer {
  cursor: pointer
}

.scable-nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 3px
}

#popup_01 {
  display: none;
  opacity: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 100;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 0.5s
}

#popup_01 .pu-modal {
  width: 400px;
  height: 500px;
  top: 5rem;
  z-index: 101;
  position: absolute;
  top: 5rem
}

.scable-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem
}

.down {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: 0.4s
}

.up {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: 0.4s
}

.min-300 {
  min-width: 300px;
  max-width: 100% !important
}

.min-400 {
  min-width: 350px;
  max-width: 100% !important
}

.cw_img_fadeIn-left {
  margin: 0;
  animation: reveal-left 1s forwards
}

@keyframes reveal-left {
  from {
    clip-path: inset(0 0 0 100%)
  }

  to {
    clip-path: inset(0 0 0 0)
  }
}

.cw_img_fadeIn-right {
  margin: 0;
  animation: reveal-right 1s ease-in
}

@keyframes reveal-right {
  from {
    clip-path: inset(0 100% 0 0)
  }

  to {
    clip-path: inset(0 0 0 0)
  }
}

.cw_img-fadeOut-right {
  animation: img-fadeOut-right 1s forwards
}

.scable-rotateIn-top {
  animation: rotateIn-top 0.5s ease-in both
}

@keyframes rotateIn-top {
  from {
    opacity: 0;
    transform: translate3d(10%, -20%, 0)
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}

.scable-rotateIn-left {
  animation: rotateIn-left 0.5s ease-in both
}

@keyframes rotateIn-left {
  from {
    opacity: 0;
    transform: translate3d(-10%, -20%, 0)
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}

.scable-rotateIn-right {
  animation: rotateIn-right 0.5s ease-in both
}

@keyframes rotateIn-right {
  from {
    opacity: 0;
    transform: translate3d(10%, 20%, 0)
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}

.scable-rotateIn-bottom {
  animation: rotateIn-bottom 0.5s ease-in both
}

@keyframes rotateIn-bottom {
  from {
    opacity: 0;
    transform: translate3d(-10%, 20%, 0)
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0)
  }
}

.cw-landing-software-image {
  padding-right: 50px
}

.cw_key_image {
  object-fit: cover;
  width: 100%;
  object-position: top center;
  border-radius: 1rem
}

.cw_key_image_container_outer {
  width: 100%;
  padding: 1.5rem;
  margin-top: 1.5rem
}

.cw_key_image_container_inner {
  width: 100%;
  position: relative;
  border-radius: 1rem;
}

.cw_key_image_border {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -1.5rem;
  left: -1.5rem;
  border: solid 4px var(--scable-primary);
  border-radius: 1rem
}

.cw_key_image_background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: -1.5rem;
  left: -1.5rem;
  background-color: var(--scable-bright);
  border-radius: 1rem;
  z-index: -1
}

.cw-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: block
}

.cw-section-w100 {
  width: 100%;
  padding-right: 0.75rem !important;
  padding-left: 0.75rem !important;
  /*overflow-x: hidden;*/
  overflow: clip;
}

.cw-section-padding-y {
  padding: 7rem 0rem
}

.cw-landing-height {
  padding-bottom: 3rem
}

.cw-landing-hl {
  font-size: 4rem
}

.cw-landing-pt {
  padding-top: 180px
}

.cw-section-offset {
  padding-top: 7rem;
  margin-top: -7rem
}

.cw-section-offset-2 {
  padding-top: 3.5rem;
  margin-top: initial;
}

@media (max-width:1200px) {
  .cw-landing-pt {
    padding-top: 100px
  }

  .cw-section-offset {
    padding-top: 2rem;
    margin-top: -2rem
  }

  .cw-landing-height {
    height: fit-content
  }
}

.cw-references-white {
  opacity: 0.8;
  max-height: 40px;
  max-width: 100%
}

.cw-references-color {
  max-height: 25px;
  max-width: 120px
}

/* Header + hero CTAs, built as the two states of .sfn-chip: the secondary button
   is a resting chip (hairline border, white surface, teal on hover) and the
   primary is an active chip (teal gradient + glow). Both keep the same box so a
   pair of them lines up. Replaces the old 5px teal ring and its mask hack. */
.cw-btn-primary-outline {
  display: inline-block;
  padding: 14px 19px;
  border: 1px solid var(--scable-bright);
  border-radius: 200px;
  background-color: var(--scable-white);
  color: var(--scable-black);
  font-weight: 500;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.cw-btn-primary-outline:hover {
  border-color: var(--scable-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(33 51 67 / 14%);
}

.cw-btn-primary-outline:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 3px;
}

.cw-btn-primary-filled {
  display: inline-block;
  padding: 14px 19px;
  border: 1px solid transparent;
  border-radius: 200px;
  background: linear-gradient(45deg, var(--scable-secondary) 0%, var(--scable-primary) 75%);
  color: var(--scable-white) !important;
  font-weight: 500;
  box-shadow: 0 6px 16px rgba(0, 191, 165, 0.32);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.cw-btn-primary-filled:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 191, 165, 0.42);
}

.cw-btn-primary-filled:focus-visible {
  outline: 2px solid var(--scable-secondary);
  outline-offset: 3px;
}

/* Same chip surface, but inheriting .scable-btn's padding so it matches the
   black .scable-btn it is paired with in the solution / product heroes. */
.scable-btn.cw-btn-secondary {
  /* 1px trimmed off .scable-btn's 5px/15px padding so the added border keeps the
     box identical to the black .scable-btn standing next to it */
  padding: 4px 14px;
  border: 1px solid var(--scable-bright);
  background-color: var(--scable-white);
  color: var(--scable-black);
  font-weight: 500;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.22s ease;
}

.scable-btn.cw-btn-secondary:hover {
  border-color: var(--scable-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(33 51 67 / 14%);
}

.scable-btn.cw-btn-secondary:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cw-btn-primary-outline,
  .cw-btn-primary-filled,
  .scable-btn.cw-btn-secondary { transition: none; }
  .cw-btn-primary-outline:hover,
  .cw-btn-primary-filled:hover,
  .scable-btn.cw-btn-secondary:hover { transform: none; }
}

/* Demovideo is always the teal primary CTA, whichever renderer or hand-written
   page produced the button (hero CTA lists, product_landing, cta() bands,
   inline HTML). Matched on the target -- /kontakt-scableone, the
   /kontakt-<hub>-video pages and an on-page #demovideo -- so new Demovideo
   buttons follow automatically.
   !important because .scable-dark/.scable-white/.scable-primary set theirs so. */
a.scable-btn[href*="kontakt-scableone"],
a.scable-btn[href*="kontakt-"][href*="-video"],
a.cw-btn-primary-outline[href*="kontakt-scableone"],
a.cw-btn-primary-outline[href*="kontakt-"][href*="-video"],
a.scable-btn[href="#demovideo"] {
  border-color: transparent !important;
  background-color: var(--scable-primary) !important;
  background-image: linear-gradient(45deg, var(--scable-secondary) 0%, var(--scable-primary) 75%) !important;
  color: var(--scable-white) !important;
}

a.scable-btn[href*="kontakt-scableone"]:hover,
a.scable-btn[href*="kontakt-"][href*="-video"]:hover,
a.cw-btn-primary-outline[href*="kontakt-scableone"]:hover,
a.cw-btn-primary-outline[href*="kontakt-"][href*="-video"]:hover,
a.scable-btn[href="#demovideo"]:hover {
  box-shadow: 0 8px 22px rgba(0, 191, 165, 0.42);
}

.cw-card-primary {
  position: relative;
  box-shadow: 0 12px 24px rgb(33 51 67 / 12%);
  padding: 1rem;
  border-radius: 1rem
}

.cw-card-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  border: 5px solid transparent;
  background: var(--scable-primary-gradient);
  -webkit-mask: linear-gradient(var(--scable-white) 0 0) padding-box, linear-gradient(var(--scable-white) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude
}

body p,
li {
  line-height: 175%
}

h2 {
  margin-top: 1.5rem
}

.blog-quote {
  font-size: 1.5rem;
  font-style: italic;
  border-left: solid 3px var(--scable-primary);
  padding-left: 15px
}

.scable-resources-card {
  max-height: 225px !important;
  overflow: hidden
}
.scable-res-card-img {
  width: 100%;
  aspect-ratio: 7/4;
  object-fit: cover;
}

@media (max-width:600px) {
  .scable-resources-card {
    max-height: 300px
  }
}

/*
********************
webframe
********************
*/

.cw-topline {
  width: 100%;
  position: fixed;
  top: 0;
  /* must sit above .cw-topnav (110); at equal z-index the navbar painted later
     and swallowed clicks on the open language menu */
  z-index: 120;
  font-size: 0.85rem
}

.cw-topline-content {
  position: relative;
  padding-left: 0.75rem;
  padding: 3px 0;
  z-index: 110
}

.cw-topnav {
  width: 100%;
  box-shadow: 0 2px 4px rgb(33 51 67 / 12%);
  padding: 25px 0;
  position: fixed;
  top: 50px;
  z-index: 110
}

.cw-mobilenav {
  width: 100%;
  box-shadow: 0 2px 4px rgb(33 51 67 / 12%);
  padding: 10px 0;
  position: fixed;
  z-index: 111;
  display: none;
  overflow: hidden;
  top: 0;
  left: 0
}

.cw-mobilenav-page {
  z-index: 100;
  height: 100%;
  width: 100%;
  position: fixed;
  top: -100%;
  padding: 10px;
  padding-top: 80px;
  transition: 0.4s;
  overflow-y: auto;
  overflow-x: hidden;
}

@media (max-width:1200px) {

  .cw-topline,
  .cw-topnav {
    display: none
  }

  .cw-landing-software-image {
    padding-right: 0
  }

  .cw_key_image_container_outer {
    width: 100%;
    max-width: 500px;
    max-height: 50vh;
    margin: auto auto
  }

  .cw-lg-center {
    text-align: center;
    justify-content: center
  }

  .cw-mobilenav {
    display: inline-block
  }
}

/* Logo + tabs on the left, the CTAs on the right, in one flex row. The CTAs used
   to sit absolutely positioned in a fixed 250px right gutter, which the
   Kontakt + Demovideo pair outgrew -- they covered the last tab. */
.cw-topnav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cw-topnav-menu {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cw-topnav-cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.cw-topnav-cta .cw-btn-primary-outline,
.cw-topnav-cta .cw-btn-primary-filled {
  padding: 10px 16px;
  white-space: nowrap;
}

/* just above the mobile breakpoint the full row is tight; trim the tab padding */
@media (max-width: 1320px) {
  .cw-topnav-menu .cw-navtab {
    padding: 0.5rem 0.55rem;
  }
}

.cw-topnav-link {
  margin: 0 1rem
}

.cw-topline-link {
  margin-right: 3rem
}

.cw-dropdown-box {
  width: 100%;
  position: relative;
  border: 1px solid var(--scable-brightest);
  border-radius: 0.75rem;
  box-shadow: 0 10px 24px rgb(33 51 67 / 12%);
  overflow: hidden;
  z-index: 10;
}

.cw-dropdown {
  position: relative;
  display: inline-block
}

.cw-dropdown-content {
  display: none;
  position: absolute;
  margin-top: 0rem;
  margin-left: 1rem;
  background-color: var(--scable-white);
  border-radius: 0.25rem;
  min-width: 230px
}

.cw-dropdown-content a {
  color: var(--scable-black);
  padding: 12px 16px;
  display: block
}

.cw-dropdown-content a:hover {
  background-color: var(--scable-brightest);
  color: var(--scable-black)
}

.cw-dropdown:hover .cw-dropdown-content {
  display: block;
}

/* ── navbar tabs + mega menu ──────────────────────────────────────────────
   The panel used to be a bordered slab that switched from display:none to
   block. It now hangs off the bottom edge of .cw-topnav and unfurls, so the
   header reads as one surface growing downward. */

.cw-topnav .cw-dropdown {
  /* static, so the panel below resolves against .cw-topnav (a fixed element,
     and therefore a containing block) rather than against the tab itself */
  position: static;
}

.cw-navtab {
  display: inline-block;
  position: relative;
  margin: 0 0.1rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 150px;
  background-color: transparent;
  color: var(--scable-black);
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease;
}


.cw-navtab:hover,
.cw-dropdown:hover > .cw-navtab,
.cw-dropdown:focus-within > .cw-navtab {
  background-color: var(--scable-brightest);
  color: var(--scable-secondary);
}


.cw-navtab:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 2px;
}

/* Invisible bridge across the navbar padding, so travelling from the tab down to
   the panel does not leave .cw-dropdown and close the menu mid-move. */
.cw-topnav .cw-dropdown > .cw-navtab::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 34px;
}

/* Menu entries: soft highlight instead of a full teal slab. The old
   .new-navbar-a:hover pointed at --scable-light, which is not a defined token,
   so it silently fell through to the teal rule above. */
.cw-dropdown-panel .new-navbar-a {
  padding: 0.6rem 0.9rem;
  margin: 0 0 0 -0.9rem;
  border-radius: 0.6rem;
  transition: background-color 0.2s ease, color 0.2s ease,
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cw-dropdown-panel .new-navbar-a:hover {
  background-color: var(--scable-brightest);
  color: var(--scable-black) !important;
  transform: translateX(2px);
}

.cw-dropdown-panel .new-navbar-a:hover .nav-a-title-span {
  color: var(--scable-secondary);
}

.cw-dropdown-panel .new-navbar-a:hover p {
  color: var(--scable-grey);
}

.cw-dropdown-panel .new-navbar-a:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 2px;
}

/* ── language picker (topline + mobile menu) ─────────────────────────────── */

.cw-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border: 0;
  border-radius: 150px;
  background-color: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease;
}

.cw-lang-caret {
  font-size: 0.7em;
  color: var(--scable-grey);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s ease;
}

.cw-langpicker:hover > .cw-lang-trigger,
.cw-langpicker:focus-within > .cw-lang-trigger {
  background-color: var(--scable-brightest);
  color: var(--scable-secondary);
}

.cw-langpicker:hover > .cw-lang-trigger .cw-lang-caret,
.cw-langpicker:focus-within > .cw-lang-trigger .cw-lang-caret {
  transform: rotate(180deg);
  color: var(--scable-primary);
}

.cw-lang-trigger:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 2px;
}

.cw-lang-menu {
  min-width: auto;
  /* .cw-dropdown-content carries a 1rem left margin for the old wide menus;
     drop it so this one lines up under its trigger */
  margin-left: 0;
  padding-top: 0.5rem;
}

/* focus-within keeps it reachable by keyboard, and makes the trigger work on
   touch, where :hover never fires */
.cw-langpicker:focus-within .cw-lang-menu {
  display: block;
}

.cw-dropdown-content a.cw-lang-option {
  padding: 0.5rem 1rem;
  margin: 0.15rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cw-dropdown-content a.cw-lang-option:hover {
  background-color: var(--scable-brightest);
  color: var(--scable-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .cw-lang-trigger,
  .cw-lang-caret,
  .cw-dropdown-content a.cw-lang-option { transition: none; }
}

.cw-dropdown-collabel {
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--scable-grey);
}

.cw-dropdown-panel .coldiv {
  border: 0;
  border-top: 1px solid var(--scable-brightest);
  opacity: 1;
}

.cw-topnav .cw-dropdown-content {
  display: block;
  /* fixed, not absolute: .cw-container carries an inline position:relative, so an
     absolute panel would anchor to the container and come out inset. width:100%
     on a fixed box resolves against the viewport minus scrollbar, unlike 100vw. */
  position: fixed;
  top: auto;
  left: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  margin-top: var(--cw-navpanel-offset, 2rem);
  background-color: transparent;
  border-radius: 0;
  pointer-events: none;
  z-index: 90;
}

.cw-topnav .cw-dropdown:hover .cw-dropdown-content,
.cw-topnav .cw-dropdown:focus-within .cw-dropdown-content {
  pointer-events: auto;
}

/* 0fr -> 1fr is the one way to transition to an unknown ("auto") height */
.cw-dropdown-panel {
  display: grid;
  grid-template-rows: 0fr;
  background-color: var(--scable-white);
  border-radius: 0 0 1.25rem 1.25rem;
  box-shadow: 0 0 0 rgb(33 51 67 / 0%);
  transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.34s ease;
}

.cw-dropdown:hover .cw-dropdown-panel,
.cw-dropdown:focus-within .cw-dropdown-panel {
  grid-template-rows: 1fr;
  box-shadow: 0 20px 34px rgb(33 51 67 / 12%);
}

.cw-dropdown-inner {
  min-height: 0;
  overflow: hidden;
}

.cw-dropdown-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1rem 1.75rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.26s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cw-dropdown:hover .cw-dropdown-grid,
.cw-dropdown:focus-within .cw-dropdown-grid {
  opacity: 1;
  transform: none;
  transition-delay: 0.06s;
}

/* Set by js_general.js when a menu entry is clicked, so the panel folds away and
   the click visibly did something even if the pointer is still over it (and on
   same-page #hash links, where no new page loads). Cleared on mouseleave. */
.cw-topnav .cw-dropdown.cw-dropdown-closed .cw-dropdown-content {
  pointer-events: none;
}

.cw-topnav .cw-dropdown.cw-dropdown-closed .cw-dropdown-panel {
  grid-template-rows: 0fr;
  box-shadow: 0 0 0 rgb(33 51 67 / 0%);
}

.cw-topnav .cw-dropdown.cw-dropdown-closed .cw-dropdown-grid {
  opacity: 0;
  transform: translateY(-8px);
}

.cw-dropdown-title {
  display: block;
  margin: 1.5rem 0 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .cw-navtab,
  .cw-dropdown-panel,
  .cw-dropdown-grid,
  .cw-dropdown-panel .new-navbar-a { transition: none; }
  .cw-dropdown-panel .new-navbar-a:hover { transform: none; }
}

.cw-people-card-sm {
  height: 150px;
  width: 150px;
  object-fit: cover;
  object-position: center center;
  border-radius: 1rem
}

@media (min-width:1200px) {
  .cw-border-right-xl {
    border-right: 2px solid var(--scable-bright)
  }
}

.fixed-position {
  position: fixed
}

.cw-footer-icon {
  max-height: 125px;
  max-width: 175px;
  padding: 1rem
}

ul.scable-list {
  --icon-space: 1.3em;
  list-style: none;
  padding: 0
}

li.scable-list {
  padding-left: var(--icon-space)
}

li.scable-list:before {
  content: "\f00c";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: calc(var(--icon-space) *-1);
  width: var(--icon-space);
  color: var(--scable-primary)
}

.cw-software-bg {
  background-image: url("https://scable.io/images/background/software-teal-background_darken.jpeg");
  background-color: #278ba2;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}

body p,
li {
  line-height: 175%
}

h2 {
  margin-top: 1.5rem
}

.blog-quote {
  font-size: 1.5rem;
  font-style: italic;
  border-left: solid 3px var(--scable-primary);
  padding-left: 15px
}

.scable-resources-card {
  max-height: 225px !important;
  overflow: hidden
}

/* ── unified card system ──────────────────────────────────────
   One shell, two bodies: .scable-res-card is the resource/blog teaser (image,
   kicker, title, CTA), .scable-quote-card the customer testimonial and the
   customer reference (logo, quote, attribution, CTA). Both sit on .scable-card.
   Scoped to these classes: the shared .scable-card-cta-bottom /
   .scable-btn-cta-bottom pair (a 5rem padding reserve plus an absolutely
   pinned button) is used by a dozen other card types and is left alone. */
.scable-res-card,
.scable-quote-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--scable-bright);
  text-align: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease;
}

.scable-res-card:hover,
.scable-quote-card:hover {
  transform: translateY(-4px);
  border-color: var(--scable-primary);
  box-shadow: 0 14px 28px rgb(33 51 67 / 16%);
}

.scable-res-card:focus-within,
.scable-quote-card:focus-within {
  border-color: var(--scable-primary);
}

.scable-res-card-media {
  overflow: hidden;
  flex-shrink: 0;
}

.scable-res-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 7/4;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scable-res-card:hover .scable-res-card-img {
  transform: scale(1.045);
}

/* Variant for cards whose artwork is a background-image rather than an <img>
   (the /ressourcen grid). The image sits on ::before so it can zoom on its own,
   leaving the customer-logo overlay -- a real child -- unscaled. Also switches
   background-size from the inherited 100% to cover, so portrait covers fill the
   7:4 frame instead of leaving a band. */
.scable-res-card-media-bg {
  position: relative;
  aspect-ratio: 7/4;
}

.scable-res-card-media-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scable-res-card:hover .scable-res-card-media-bg::before {
  transform: scale(1.045);
}

.scable-res-card-media-bg > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .scable-res-card-media-bg::before { transition: none; }
  .scable-res-card:hover .scable-res-card-media-bg::before { transform: none; }
}

/* flex column + margin-top:auto keeps the CTA on the baseline across a row of
   unequal-length titles, without reserving a fixed 5rem of empty card */
.scable-res-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem 1.25rem 1.4rem;
}

.scable-res-card-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--scable-grey);
}

.scable-res-card-title {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  line-height: 1.35;
  transition: color 0.22s ease;
}

.scable-res-card:hover .scable-res-card-title {
  color: var(--scable-secondary);
}

.scable-res-card .scable-res-card-cta {
  margin: auto 0 0;
  align-self: flex-start;
}

.scable-res-card .scable-res-card-cta:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .scable-res-card,
  .scable-quote-card,
  .scable-res-card-img,
  .scable-res-card-title { transition: none; }
  .scable-res-card:hover,
  .scable-quote-card:hover { transform: none; }
  .scable-res-card:hover .scable-res-card-img { transform: none; }
}

/* quote card body: the logo sits in its own framed band so reference logos of
   very different aspect ratios line up across a row; the attribution block and
   the CTA share a footer that margin-top:auto holds on the card baseline. */
.scable-quote-card-media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--scable-brightest);
}

.scable-quote-card-logo {
  max-height: 100%;
  max-width: 70%;
  object-fit: contain;
}

.scable-quote-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem 1.25rem 1.4rem;
}

.scable-quote-card-quote {
  margin: 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 500;
}

.scable-quote-card-mark {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: var(--scable-bright);
}

/* metric + quote side by side, wrapping to stacked on a narrow card */
.scable-quote-card-highlight {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.scable-quote-card-highlight > .scable-quote-card-quote {
  flex: 1 1 13rem;
  margin-bottom: 0;
}

.scable-quote-card-metric {
  flex: 0 0 auto;
  min-width: 7.5rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  text-align: center;
  background: var(--scable-dark);
  color: var(--scable-white);
}

.scable-quote-card-metric-value {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}

.scable-quote-card-metric-label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 500;
}

.scable-quote-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--scable-brightest);
}

.scable-quote-card-person {
  margin: 0;
  font-weight: 600;
  color: var(--scable-black);
}

.scable-quote-card-role {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--scable-grey);
}

.scable-quote-card-role a {
  color: inherit;
}

.scable-quote-card-cta {
  flex-shrink: 0;
}

.scable-quote-card-cta:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 3px;
}

/* the teaser row on a gradient section runs shorter than the full grid */
#testimonials .scable-quote-card-media {
  height: 5.5rem;
  padding: 1rem 1.25rem;
}

/* ── article head ──────────────────────────────────────────────
   The head of the templated blog/wissen articles (resources/2025_10_3mi,
   2025_12_ke_wissen, 2025_07_wissenswertes): kicker, H1, lead, meta row, and
   the sidebar panels next to them. The hardcoded article pages under
   blog/3-min-impuls/ and resources/glossar/ keep .nav-menu and blog_autor(). */
.article-head {
  margin-bottom: 2rem;
}

.article-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--scable-grey);
}

.article-head h1 {
  margin-bottom: 1rem;
}

/* the intro is set like the body copy that follows it */
.article-lead {
  margin-bottom: 1.5rem;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--scable-bright);
}

.article-date {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--scable-grey);
}

/* compact byline; the boxed blog_autor() card stays for the hardcoded pages */
.article-byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.article-byline-img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.article-byline-name {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

.article-byline-name a {
  display: inline;
  margin-left: 0.35rem;
}

.article-byline-role {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--scable-grey);
}

.article-byline-role a {
  display: inline;
  color: inherit;
}

/* sidebar panels: table of contents, and the 3-Minuten-Impuls series badge */
.article-aside {
  position: sticky;
  top: 180px;
  padding: 1.25rem;
  border: 1px solid var(--scable-bright);
  border-radius: 1rem;
  background: var(--scable-white);
}

.article-toc-title {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--scable-grey);
}

.article-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.85rem;
  border-left: 2px solid var(--scable-bright);
  color: inherit;
  line-height: 1.4;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.article-toc a:hover,
.article-toc a:focus {
  border-left-color: var(--scable-primary);
  color: var(--scable-secondary);
  text-decoration: none;
}

.article-aside-sep {
  margin: 1.1rem 0;
  border: 0;
  border-top: 1px solid var(--scable-brightest);
  opacity: 1;
}

/* the series badge sits in a narrow xl rail, so the type stays small and flush
   left; under xl the column runs full width and it turns into a row */
.article-series {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.article-series-img {
  width: 72px;
  max-width: 100%;
  margin-bottom: 0.4rem;
}

.article-series-name {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--scable-grey);
}

.article-series-claim {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.article-series-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--scable-grey);
}

@media screen and (max-width: 1200px) {
  .article-aside {
    position: static;
    margin-bottom: 2rem;
  }
  .article-series {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
  }
  .article-series-img {
    margin-bottom: 0;
  }
  .article-series-claim {
    font-size: 1rem;
  }
}

.scable-cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.scable-cta-media {
  flex: 0 0 auto;
  width: clamp(11rem, 30%, 16rem);
  max-width: 100%;
}

.scable-cta-media img {
  display: block;
  width: 100%;
  aspect-ratio: 7/4;
  object-fit: cover;
  border-radius: 0.75rem;
}

.scable-cta-body {
  flex: 1 1 18rem;
  min-width: 0;
}

.scable-cta-title {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  line-height: 1.3;
}

.scable-cta-text {
  margin: 0 0 1.2rem;
}

/* a bold lead-in inside the CTA text reads as body copy, not as a second heading */
.scable-cta-text b,
.scable-cta-text strong {
  color: var(--scable-black);
}

.scable-cta-body .scable-btn {
  margin: 0;
}

.scable-cta-inline {
  padding: 2rem 0;
  border-top: 1px solid var(--scable-bright);
  border-bottom: 1px solid var(--scable-bright);
}

.scable-cta-box .scable-cta-inner {
  padding: 1.5rem;
  border: 1px solid var(--scable-bright);
  border-radius: 1rem;
  background: var(--scable-white);
  box-shadow: 0 3px 10px rgb(33 51 67 / 12%);
}

.scable-cta-box {
  padding: 1.5rem 0;
}

.scable-cta-band {
  padding: 3.5rem 0;
}

.scable-cta-band .scable-cta-title {
  font-size: 1.75rem;
}

.scable-cta-inline .scable-cta-text,
.scable-cta-box .scable-cta-text {
  color: var(--scable-stylish);
}

.scable-cta-center .scable-cta-inner {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.scable-cta-center .scable-cta-body {
  flex: 0 1 auto;
}

.scable-cta-center .scable-cta-media {
  width: min(100%, 22rem);
}

.scable-cta-narrow .scable-cta-inner {
  max-width: 46rem;
}

.scable-cta-narrow.scable-cta-center .scable-cta-inner {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .scable-cta-media {
    width: 100%;
  }
}

@media (max-width:600px) {
  .scable-resources-card {
    max-height: 300px
  }
}

.hs-form-field {
  margin-bottom: 1.4rem
}

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem
}

form legend {
  font-size: 0.875rem
}

form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100% !important;
  border: solid 1px var(--scable-grey);
  border-radius: 3px
}

form textarea {
  resize: vertical
}

form fieldset {
  max-width: 100% !important
}

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none
}

form .inputs-list>li {
  display: block;
  margin: 0.7rem 0
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.5rem
}

.hs-dateinput {
  position: relative
}

.hs-dateinput:before {
  content: '\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%)
}

.fn-date-picker .pika-table thead th {
  color: #FFF
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 3px;
  box-shadow: none
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 3px !important;
  color: #FFF
}

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial
}

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem
}

form .hs-richtext img {
  max-width: 100% !important
}

.legal-consent-container .hs-form-booleancheckbox-display>span,
.legal-consent-container .hs-form-booleancheckbox-display>span p {}

.legal-consent-container .hs-error-msgs label {
  color: var(--scable-red)
}

.hs-error-msg {
  color: var(--scable-red) !important
}

.hs-form-required {
  color: var(--scable-red)
}

.hs-input.invalid.error {
  border-color: var(--scable-red)
}

.hs-error-msg {
  color: var(--scable-red);
  margin-top: 0.35rem
}

form input[type=submit],
form .hs-button {
  padding: 5px 15px;
  border-radius: 150px;
  margin: 15px 15px 15px 0;
  display: inline-block;
  background-color: var(--scable-dark);
  color: var(--scable-white) !important;
  border: none;
  cursor: pointer;
  font-size: 1.0rem;
  font-weight: 400;
  font-family: "Noto Sans" !important
}

form h1 {
  margin-top: 1rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--scable-black)
}

form h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--scable-black)
}

form a {
  font-weight: 700 !important;
  text-decoration: underline !important
}

form .actions {
  text-align: right
}

.grecaptcha-badge {
  margin: 0 auto
}

:focus-visible {
  outline: var(--scable-primary) auto 1px !important;
  border: var(--scable-primary) auto 1px !important
}

.hs-input,
.hs-input:hover {
  accent-color: var(--scable-stylish) !important
}

/*
********************
modules
********************
*/

.podcastplayer-card {
  z-index: 30;
  width: 350px;
  height: 350px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.325);
  background-image: url("https://bcdn.letscast.fm/media/5r4rhl8kpjmzo63s2l0fx4yvbf9n?t=1690363085&optimizer=image&quality=80&height=500&width=500");
  cursor: pointer;
  background-size: 100%;
}

.podcast-episode {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
}

.podcastinfo {
  background-color: white;
  padding: 1rem 1rem 1rem 2rem;
  color: black;
  width: 350px;
  z-index: 0;
  border-radius: 0px 8px 8px 0px;
}


.cw_multipoint_container {
  margin-left: 10%;
  margin-right: 10%;
}

.point_wrapper {
  border-left: 4px solid var(--scable-primary);
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: left;
}

.point_wrapper.last {
  border-left: 4px solid transparent;
}

.point {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  background-color: var(--scable-primary);
  margin-left: -22px;
  flex-shrink: 0;
  flex-grow: 0;
}

.ptte_header {
  height: 38px;
  display: flex;
  align-items: center;
  margin: 0;
}

.point_text {
  margin-left: 25px;
  margin-bottom: 25px;
}

.point_text ul {
  margin-left: -10px;
}

.scable-card .w-100.bg-img-wrapper {
  width: 100%;
  aspect-ratio: 7/4;
  background-size: 100%;
  background-position: center;
}

.ww-scable-card-customer-assoc {
  border-radius: 15px 15px 0px 0px;
  background-color: white;
  position: relative;
  top: 100%;
  left: 70%;
  transform: translate(-50%, -100%);
  width: 50%;
  height: 33%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ww-scable-card-customer-assoc img {
  width: 85%;
}
.cw_multipoint_container {
  margin-left: 10%;
  margin-right: 10%;
}
.point_wrapper {
  border-left: 4px solid grey;
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: left;
}
.point_wrapper.last {
  border-left: 4px solid transparent;
}
.point {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  background-color: teal;
  margin-left: -22px;
  flex-shrink: 0;
  flex-grow: 0;
}
.ptte_header {
  height: 38px;
  display: flex;
  align-items: center;
  margin: 0;
}
.point_text {
  margin-left: 25px;
  margin-bottom: 25px;
}
.point_text ul {
  margin-left: -10px;
}
.solutions-advantage-card {
  text-align: center;
  height: 100%;
  background-color: inherit !important;
  box-shadow: none;
  border: none;
}
.solutions-advantage-card p {
}
.col-xl-4 {
  margin-bottom: 30px;
}
.solutions-advantage-card i.fas {
  color: var(--scable-primary);
  margin-bottom: 1rem;
}

.imagecarousel {
  height: 350px;
  width: 500px;
  max-width: 95%;
}
.imagecarousel[data-styleclass="max"] {
  height: max-content;
  width: 100%;
}
.icrow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: calc(100% - 30px);
}
.icrow.ic-dot-row {
  height: 30px;
  justify-content: center;
  gap: 5px;
}
.icrow.ic-dot-row .ic-dot {
  border-radius: 50%;
  aspect-ratio: 1;
  height: 10px;
  background-color: var(--scable-grey);
}
.icrow.ic-dot-row .ic-dot.active {
  background-color: var(--scable-primary);
}
.icrow.ic-control-container {
  height: max-content;
}

.carousel-frame {
  display: none;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.carousel-frame.active {
  display: flex;
  animation: 0.2s ease-out changeimgin;
}
.carousel-frame.passive {
  display: none;
  animation: 0.2s ease-out changeimgout;
}
.cm_rt2-image-caption {
  position: relative;
  margin: 0;
  padding-bottom: 10px;
}
@keyframes changeimgin {
  from {
    opacity: 0;
  } 
  to {
    opacity: 1,
  }
}
@keyframes changeimgout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.ic-imcontent-container, .carousel-frame {
  width: 100%;
  height: 100%;
}

.ic-control-button {
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}
.ic-control-button svg {
  fill: var(--scable-grey);
  transition: 0.3s;
  opacity: 0;
}
.ic-control-button.iccb-right svg {
  transform: scaleX(-1);
}
.ic-control-button svg:hover {
  fill: var(--scable-primary);
}

.imagecarousel:hover .ic-control-button svg {
  opacity: 1;
}

.carousel-image {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

ul.check {
  list-style: none;
  padding-left: 0;
}
li.check {
  position: relative;
  padding-left: 1.5em;
}
ul li.check:before {
  content: '';
  position: absolute;
  left: 0;
  width: 1em;
  height: 1em;
  top: 0.4em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>') no-repeat;
}


.filterradiobtncontainer {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin: 5px 0px 15px 0px;
  width: 90%;
  max-width: 100%;
  overflow-x: auto;
  /* room for the hover lift and its shadow inside the scroll box */
  padding: 0.35rem 0 0.75rem;
  scrollbar-width: none;
}
.filterradiobtncontainer::-webkit-scrollbar {
  display: none;
}

/* Filter chips: the same two states as .sfn-chip -- a resting outline pill and
   an active teal one -- replacing the solid dark/grey utility pills. */
.filterradiobtn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--scable-bright);
  border-radius: 150px;
  background-color: var(--scable-white);
  color: var(--scable-black);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.filterradiobtn:hover {
  border-color: var(--scable-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(33 51 67 / 14%);
}

.filterradiobtn:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 3px;
}

.filterradiobtn.is-active {
  background: linear-gradient(45deg, var(--scable-secondary) 0%, var(--scable-primary) 75%);
  border-color: transparent;
  color: var(--scable-white);
  box-shadow: 0 6px 16px rgba(0, 191, 165, 0.32);
}

/* Chips built as links (the hub pills on /ressourcen) would otherwise take the
   global a { color: inherit !important } -- white on white inside .scable-dark. */
a.filterradiobtn {
  color: var(--scable-black) !important;
}

a.filterradiobtn.is-active {
  color: var(--scable-white) !important;
}

@media (prefers-reduced-motion: reduce) {
  .filterradiobtn { transition: none; }
  .filterradiobtn:hover { transform: none; }
}

.wwts-topbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0px 10px 0px;
}
.wwts-topbar .wwts-block h2 {
  margin: 0;
}

.wwts-content {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-left: calc(-.5 * var(--bs-gutter-x));
  margin-right: calc(-.5 * var(--bs-gutter-x));
}
.wwts-content::-webkit-scrollbar {
  height: 10px;
  transition: 0.3s;
}
.wwts-content::-webkit-scrollbar-thumb {
  background: #fff !important;
}
.wwts-content:hover::-webkit-scrollbar-thumb {
  background: var(--scable-grey) !important;
}

.new-navbar-a{border-radius: 5px;margin: 0px 0px 0px -16px;}
.new-navbar-a * {margin: 0;}
.new-navbar-a p {line-height: 1.2;margin-top:3px;color:gray;}
/* --scable-light is not a defined token, so this hover did nothing; in the mobile
   menu (where the teal .cw-dropdown-content rule does not reach) entries had no
   hover feedback at all. */
.new-navbar-a:hover{background-color:var(--scable-brightest);}
.new-navbar-a:hover p {color: var(--scable-grey);}
.coldiv {margin: 0.5rem 0rem 0.5rem 0rem;}

.objfit-cover {
  object-fit: cover;
}
div.row.reverse_row {
  flex-direction: row-reverse;
}
div.row-alt {
  align-items: center;
}
.row .imcol {
  padding-right: 4rem;
}
.row.reverse_row .imcol {
  padding-right: 0;
  padding-left: 4rem;
}
.row.row-compact * {
  margin: 0;
}
.row .col.right {
  text-align: right;
}

.cw_key_image_container_outer.solution {
  margin: 0;
  padding: 0;
}
.cw_key_image_container_outer.solution.ngml {
  margin-left: -15px;
}

@media (max-width: 1200px) {
  .cw_key_image_container_outer.solution {
    margin: 0;
  }
  .cw-container {
    max-width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
  .cw-container .row.row-alt .imcol {
    padding: 0;
  }
}
@media (max-width: 800px) {
  .col-xl-8.order-xl-2.order-1.px-5.py-3 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .cw-section-w100 .cw-container.pb-5 {
    padding-left: 2.5% !important;
    padding-right: 2.5% !important;
  }
  .scable-card .scable-btn.scable-primary {
    text-align: center;
  }
  .scable-headline.mt-2.mb-3 span {
    font-size: 25px !important;
  }
  .solution-image-col {
    margin-top: 2rem;
    padding-left: 0;
    padding-right: 0;
  }
} 

.navi_team_img {
  max-width: 100%;
  max-width: 300px;
  margin-right: auto;
  border-radius: 5px;
}

.obj-pos-90 {
  object-position: 90%;
}

.customPodcastPlayerWrapper {
  min-height: 300px;
  background-color: var(--scable-brightest);
  color: black;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: top;
}
.cPP-episodeImage {
  aspect-ratio: 1;
  width: 150px;
  border-radius: 3px;
  margin: 30px;
  margin-right: 0;
}
@media screen and (max-width: 950px) {
  .cPP-episodeImage {
    width: 50px;
  }
}
.cPP-imCol {
  width: max-content;
}
.cPP-infoCol {
  width: auto;
  height: max-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 30px;
  row-gap: 10px;
}
.cPP-podcastName {
  font-size: 13px;
  font-weight: 600;
  color: var(--scable-stylish);
  line-height: 1.2;
  margin: 0;
}
.cPP-episodeNumber {
  color: var(--scable-stylish);
}
.cPP-episodeName {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.cPP-episodeSubtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
}
.cPP-mediaPlayerSpoof {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.cPP-mPS-playBtn {
  border-radius: 50%;
  aspect-ratio: 1;
  width: 40px;
  background-color: var(--scable-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cPP-mPS-playBarWrapper {
  width: 90%;
}
.cPP-mPS-playBar {
  height: 2px;
  background-color: var(--scable-stylish);
  width: 100%;
  margin: 3px 0px;
  border-radius: 2px;
}
.cPP-mPS-playBarPlayHead {
  border-radius: 50%;
  aspect-ratio: 1;
  background-color: white;
  border: 3px solid var(--scable-primary);
  width: 9px;
  position: absolute;
  margin-top: -2.5px;
}
.cPP-mPS-timingWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.cPP-mPS-timer {
  width: max-content;
  color: var(--scable-stylish);
  font-size: 14px;
}


.nav-menu a {
  display: block;
  margin: 1.25rem 0rem 1.25rem 0rem;
}
.nav-menu a:hover, .nav-menu a:focus {
  text-decoration: underline;
}
.image-subframe {
  width: max-content;
  max-width: 100%;
  height: max-content;
  border-radius: 8px;
  box-shadow: 4px 4px 10px 1px rgba(0,0,0,0.2);
}
.image-subframe img {
  margin: 0 !important;
  max-height: 500px;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.2);
}
.isf-calwrapper {
  display: flex;
  justify-content: left;
  align-items: center;
  gap: 10px;
  margin: 10px;
}
.isf-calendar {
  border-radius: 5px;
  border: 2px solid black;
  text-align: center;
  width: 45px;
  height: 45px;
  font-family: Arial;
  user-select: none;
}
.isf-calendar-month {
  background-color: black;
  color: white;
  text-transform: uppercase;
  margin: 0;
  padding: 1px;
  font-size: 11px;
  border-radius: 3px 3px 0px 0px;
}
.isf-calendar-day {
  font-weight: 900;
  font-size: 22px;
  margin: 0;
  padding: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.isf-dt-details {
  line-height: 1;
}
.isf-dt-details h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.isf-dt-details h6 {
  margin: 0;
  font-size: 14px;
}
.space-between {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}


.faq-question-wrapper {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: left;
  gap: 10px;
  break-inside: avoid;
  margin-bottom: 10px;
  border-radius: 1rem;
  padding: 1rem;
  transition: 0.4s;
  margin-bottom: 0.5rem;
  max-width: 100%;
}
.faq-question-wrapper:hover {
  background-color: var(--scable-bright);
}
.faq-question-wrapper .question {
  font-weight: 700;
  display: block;
}
.faq-question-wrapper .answer {
  height: 0;
  max-height: 500px;
  display: block;
  overflow: hidden;
  transition: 0.4s;
}
.faq-question-wrapper[data-status='open'] .answer {
  height: max-content;
  max-height: 500px;
  padding-top: 0.5rem;
}
.faq-question-wrapper:focus {
  background-color: var(--scable-bright);
  box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
}

.hub-ov-col {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: top;
  gap: 1rem;
}
.hub-ov-row {
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: left;
  margin: 15px 0px;
}
.hub-row-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 20px;
  width: 100%;
}
.hub-box.scable-dark:hover {
  background-color: var(--scable-secondary) !important;
}
.hub-box.scable-primary:hover {
  cursor: default;
}
.hub-box.scable-primary .hub-small-text.scable-primary-text {
  color: var(--scable-dark) !important;
}
.hub-row-lbl {
  width: 120px;
  text-transform: uppercase;
  color: var(--scable-grey);
  font-size: 14px;
}
.hub-tagline-wrapper {
  font-size: 30px;
  border-top: 3px dotted var(--scable-grey);
  border-bottom: 3px dotted var(--scable-grey);
  font-weight: 700;
  width: 100%;
  text-align: center;
  padding: 10px 0px;
}
.hub-box {
  padding: 1rem;
  border-radius: 8px;
}
.hub-row-box-wrapper.third {
  width: 33.3%;
}
.hub-box.nopadding {
  padding: 0;
  width: 100%;
}
.hub-box.centerpiece {
  text-align: center;
}
.hub-sub-box {
  display: block;
  margin: 0.5rem;
  margin-left: 2rem;
  padding: 1rem;
  border-radius: 8px;
}
.hub-hsb-link {
  background: var(--scable-bright);
  transition: 0.5s;
}
.hub-sub-box.hub-hsb-link:hover {
  padding-left: 1.3rem;
  background: linear-gradient(90deg, var(--scable-brightest), var(--scable-bright)) !important;
}
.hub-small-text {
  display: block;
  margin: 0;
  font-size: 14px;
}
.hub-small-text.mt-1 {
  color: var(--scable-bright);
}
.hub-big-text {
  display: block;
  margin: 0;
  font-size: 19px;
}
.hub-text {}
.hub-logo-img {
  width: 100%;
  max-height: 150px;
}
/* the claim under the logo is text, not part of the artwork, so it can change */
.hub-logo-claim {
  margin: 0.5rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--scable-stylish);
}
@media screen and (max-width: 950px) {
  .hub-ov-col {
    flex-direction: column;
  }
  .hub-row-box-wrapper.third {
    width: 100%;
  }
}

.roi-calc-row-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
@media only screen and (max-width: 800px) {
  .roi-calc-row-container {
    flex-direction: column;
  }
}
.input-question-container {
  margin-bottom: 1rem;
}
.inputrow {
  border-radius: 5px;
  background-color: white;
  height: 40px;
  border: 1px solid grey;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  color: black;
  font-size: 0.875rem;
  font-family: Arial;
  color: gray;
  padding-left: 10px;
}
.inputrow input {
  background-color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  margin: 0;
  height: 100%;
  width: auto;
  border: none !important;
  outline: none;
  padding-left: 0px !important;
}
.inputrow input:focus {
  border: 0;
  outline: 0 !important;
}
.inputrow:focus-within {
  box-shadow: 0px 0px 3px 2px #00BFA5;
}
.inputrow.disabled {
  font-weight: 600;
  background-color: rgb(240, 240, 240);
}
.preinputfield {
  background-color: inherit;
  font-size: inherit;
  font-weight: inherit;
  min-width: max-content;
  padding-right: 3px;
  text-align: right;
}
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  border: none !important;
  padding: 5px 0px 5px 0px;
}
tr.totale_row td {
  border-top: 2px solid black !important;
  font-weight: 600;
}
.white-img-text * {
  color: white;
  text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}

.ww-table thead tr td {
  font-weight: 700;
  background-color: var(--scable-stylish);
  color: white;
}
.ww-table tr td {
  padding: 5px;
  border: 1px solid var(--scable-bright) !important;
}
.ww-table {
  border-collapse: collapse;
}
.ww-table tr td.firstcol {
  background-color: var(--scable-brightest);
}

/* grid rather than column-count: questions read left to right and a long
   answer can no longer break across the column boundary mid-card */
.newFaq-questionContainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}
.newFaq-questionContainer .faq-question-wrapper {
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 0;
  padding: 1.25rem;
  border: 1px solid var(--scable-bright);
  border-radius: 1rem;
  box-shadow: 0 3px 10px rgb(33 51 67 / 12%);
  background-color: var(--scable-white);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.newFaq-questionContainer .faq-question-wrapper:hover,
.newFaq-questionContainer .faq-question-wrapper:focus,
.newFaq-questionContainer .faq-question-wrapper[data-status='open'] {
  border-color: var(--scable-primary);
  background-color: var(--scable-white);
  box-shadow: 0 14px 28px rgb(33 51 67 / 16%);
}
.newFaq-questionContainer .faq-icon-column {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--scable-brightest);
  color: var(--scable-secondary);
  font-size: 0.8rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.newFaq-questionContainer .faq-question-wrapper[data-status='open'] .faq-icon-column {
  background-color: var(--scable-primary);
  color: var(--scable-white);
}
.newFaq-questionContainer .question {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}
.newFaq-questionContainer .answer {
  color: var(--scable-stylish);
  line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
  .newFaq-questionContainer .faq-question-wrapper,
  .newFaq-questionContainer .faq-icon-column { transition: none; }
}
@media screen and (max-width: 900px) {
  .newFaq-questionContainer {
    grid-template-columns: minmax(0, 1fr);
  }
  .newFaq-questionContainer .question {
    font-size: 1.2rem;
  }
  .tablewrapper {
    max-width: 100%;
    overflow-x: auto;
  }
}

.sticky-wrapper {
  top: 200px;
  bottom: 500px;
  position: sticky;
  padding-right: 2rem;
}
.sticky-wrapper.dwnldpage-sticky {
  padding-right: 0;
  padding-left: 2rem;
}
.mobileOnly {
  display: none;
}
@media screen and (max-width: 1200px) {
  .mobileOnly {
    display: block;
  }
  .sticky-wrapper.dwnldpage-sticky {
    padding: 0;
  }
}

.footer-image-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.footer-company-logo {
  height: 50px;
  padding-right: 2rem;
  max-width: 100%;
}
@media screen and (max-width: 1200px) {
  .footer-image-row {
    flex-direction: column;
  }
  .footer-company-logo {
    padding: 0;
  }
}

.paragraphcontent .imagecarousel {
  width: 100%;
  height: 500px;
}
.blog-cover-image {
  border-radius: 1rem;
  box-shadow: 0 14px 28px rgb(33 51 67 / 16%);
}

/* ── standardised breadcrumb ───────────────────────────────────────────────
   Tone "auto" carries no colour of its own: links and separators are drawn in
   currentColor, so the same markup reads correctly on a light section and on a
   .scable-dark one. "light"/"dark" pin it when inheritance is not what you want. */
.scable-breadcrumb {
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
}

.scable-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scable-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.scable-breadcrumb li + li::before {
  content: "";
  flex-shrink: 0;
  width: 0.36em;
  height: 0.36em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.4;
}

.scable-breadcrumb a {
  font-weight: 500;
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.scable-breadcrumb a:hover {
  /* global rule is a { color: inherit !important }, so this needs to match it */
  color: var(--scable-primary) !important;
  opacity: 1;
}

.scable-breadcrumb a:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 2px;
  border-radius: 3px;
  opacity: 1;
}

.scable-breadcrumb [aria-current="page"] {
  opacity: 1;
  font-weight: 600;
  /* article titles are used as the last crumb and can be very long */
  max-width: min(46ch, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scable-breadcrumb-light { color: var(--scable-black); }
.scable-breadcrumb-dark  { color: var(--scable-white); }

@media (prefers-reduced-motion: reduce) {
  .scable-breadcrumb a { transition: none; }
}
.img-viewbox-square {
  aspect-ratio: 1 / 1;
}
.rounded-corners {
  border-radius: 1rem;
  overflow: hidden;
}
.hsform-author-msg {
  margin-right: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.hsform-author-msg .txcol p {
  margin: 0;
}
.hsform-author-msg .imcol {
  width: 100%;
  padding: 0;
  flex-shrink: 0;
}
.hsform-author-msg .txcol {
  padding: 0;
  padding-top: 1rem;
}
@media screen and (max-width: 1000px) {
  .hsform-author-msg {
    margin: 0;
  }
  .hsform-author-msg .imcol {
    max-width: 30%;
  }
  .hsform-author-msg .txcol {
    padding: 0;
    padding-left: 1rem;
    max-width: calc(70% - 1rem);
  }
}

.col-underlay {
  height: 100%;
  background-color: var(--scable-bright);
  padding: 10px;
  margin-left: 5px;
  margin-right: 5px;
}
.col-underlay[data-contenttype=check] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-underlay.start {
  border-radius: 15px 15px 0px 0px;
}
.col-underlay.end {
  border-radius: 0px 0px 15px 15px;
}
.grandtable {
  height: 1px;
}
.grandtable tr {
  height: 100%;
}
.grandtable td {
  height: 100%;
  padding: 0;
}
.grandtable td p, .grandtable td b {
  margin: 0;
}
.grandtable td.hcol {
  padding: 10px 0px;
}

.nav-a-title-span {
  font-size: 1rem;
  display: block;
  font-weight: 500;
  line-height: 1.2;
}

.ai-summary-box {
  border-radius: 1rem;
  background-color: var(--scable-brightest);
  border: 1px solid var(--scable-grey);
  padding: 1rem;
  margin-top: 1rem;
  color: var(--scable-grey);
}
.ai-summary-box h2 {
  margin-top: 0 !important;
  font-size: 1.5rem;
}


    .vs_letter {
      font-family: "minion-pro", serif;
      font-size: 4.5rem;
      margin: -7px 0px;
      padding: 0;
    }
    .scable-square-card:hover .vs_letter.letter_v { color: rgb(56, 176, 153); }
    .scable-square-card:hover .vs_letter.letter_a { color: rgb(208, 219, 73); }
    .scable-square-card:hover .vs_letter.letter_l { color: rgb(196, 61, 79); }
    .scable-square-card:hover .vs_letter.letter_u { color: rgb(156, 204, 139); }
    .scable-square-card:hover .vs_letter.letter_e { color: rgb(156, 204, 139); }
    .scable-square-card:hover .vs_letter.letter_s { color: rgb(156, 204, 139); }
    .scable-square-card:hover .vs_letter.letter_t { color: rgb(113, 193, 192); }
    .scable-square-card:hover .vs_letter.letter_o { color: rgb(218, 139, 68); }
    .scable-square-card:hover .vs_letter.letter_p { color: rgb(195, 148, 166); }
    .scable-square-card:hover .vs_letter.letter_s2 { color: rgb(48, 136, 188); }
    .scable-square-card h4 {
      font-size: 1.15rem !important;
      margin: 0;
      line-height: 1.2;
      cursor: default;
    }
    .scable-square-card p {
      font-size: 0.8rem;
      color: var(--scable-bright);
      font-weight: 500;
      line-height: 1.3;
      margin-top: 0.3rem;
      cursor: default;
    }
    .vs_h1_top {
      font-family: "minion-pro", serif;
    }
    .row.fifths .col {
      width: 20%;
    }
    .scable-square-card {
      aspect-ratio: 1;
      cursor: default;
    }
    @media screen and (max-width: 800px) {
      .scable-vs-headline {
        text-align: center;
      }
      .vs_h1_top {
        font-size: 5rem;
        line-height: 0.9;
      }
      .vs_h1_sub {
        font-size: 1.75rem;
      }
      .paragraphcontent ul {
        text-align: left;
      }
      .faq-text-column .answer {
        padding-left: 0;
      }
      .fifths {
        /*gap: 1rem;*/
      }
      .fifths .col {
        width: 50% !important;
        max-width: 50% !important;
        flex-basis: auto;
        padding: 0;
      }
      .fifths .col .scable-card {
        max-width: 50vw !important;
      }
      .fifths .col .scable-card .vs_letter {
        font-size: 2.5rem;
      }
      .fifths .col .scable-card h4 {
        font-size: min(1rem, 100%) !important;
      }
      .vs-feature-wrapper[data-status=open] .answer {
        padding-left: 1rem !important;
        max-height: none !important;
      }
    }
    .solutions-advantage-card-la {
      height: unset;
      text-align: left;
    }
    .solutions-advantage-card-la h4 {
      font-size: 20px;
      line-height: 1.25;
    }
    .solutions-advantage-card-la p {
      font-size: 14px;
      line-height: 1.25;
    }
    .vs-feature-wrapper {
      background-color: var(--scable-dark);
      color: white;
    }
    .vs-feature-wrapper:hover {
      background-color: var(--scable-stylish);
    }
    .vs-feature-wrapper[data-status=open] {
      background-color: var(--scable-brightest);
      color: black;
      border: 1px solid var(--scable-dark);
    }
    .vs-feature-wrapper[data-status=open] .answer {
      max-height: 550px;
    }
    .vs-feature-wrapper .answer {
      padding-left: 5.2rem;
    }

    .step-list-container {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
}

.step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #b0b8b0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: #555;
  flex-shrink: 0;
}

.step-line {
  width: 2px;
  flex-grow: 1;
  min-height: 3rem;
  background-color: #d4d8d4;
}

.step:last-child .step-line {
  display: none;
}

.step-content {
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

.step:last-child .step-content {
  padding-bottom: 0;
}

.step-content .title {
  font-weight: 700;
  font-size: 1rem;
  color: #1a1a1a;
  margin-bottom: 0.2rem;
}

.step-content .text {
  font-size: 0.875rem;
  color: #666;
}


.neutral-accent {
  background-color: rgb(245, 245, 245);
  color: rgb(95, 95, 95);
}
.scable-accent {
  background-color: rgb(224, 246, 238);
  color: rgb(15, 111, 87);
}
.ses-acc-item {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.ses-acc-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 2.6rem;
}
.ses-acc-circle {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ses-acc-railline {
  width: 2px;
  flex-grow: 1;
  background-color: var(--scable-primary);
  display: none;
}
.ses-accordion-wrapper:has(+ .ses-accordion-wrapper) .ses-acc-railline {
  display: block;
}
.ses-acc-body {
  flex-grow: 1;
  min-width: 0;
  padding-bottom: 4rem;
}
.ses-acc-headrow {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.75rem;
}
.ses-acc-time {
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
}
.ses-acc-heading {
  font-size: 1.15rem;
  margin: 0;
  min-width: 0;
}
.ses-acc-table {
  width: 100%;
  table-layout: fixed;
}
.ses-acc-table td {
  vertical-align: baseline;
  width: 50%;
}
.ses-acc-table td, .tlike {
  padding: 0.5rem;
}
.ses-acc-table td.th {
  font-weight: 600;
}
.ses-acc-table td.th.r {
  border-radius: 0 0.5rem 0.5rem 0;
}
.ses-acc-table td.th.l {
  border-radius: 0.5rem 0 0 0.5rem;
}
.scable-accent-filled {
  color: white;
  background-color: rgb(15, 111, 87);
}
.ses-accordion-wrapper .expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.ses-accordion-wrapper[data-status='open'] .expandable {
  max-height: 100rem;
}
.ses-accordion-wrapper .expandable > .scable-card {
  margin-top: 0.75rem;
}
.ses-acc-toggle {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(15, 111, 87);
  cursor: pointer;
}
.ses-acc-toggle:hover {
  text-decoration: underline;
}
.ses-acc-toggle i {
  font-size: 0.75rem;
  transition: transform 0.4s ease;
}
.ses-acc-toggle .label-hide {
  display: none;
}
.ses-accordion-wrapper[data-status='open'] .ses-acc-toggle .label-show {
  display: none;
}
.ses-accordion-wrapper[data-status='open'] .ses-acc-toggle .label-hide {
  display: inline;
}
.ses-accordion-wrapper[data-status='open'] .ses-acc-toggle i {
  transform: rotate(180deg);
}

/* Internal content links (parseContentBlock output): explicit <u><a> or {{ link() }} */
u > a.content-link,
.paragraphcontent u > a {
  font-weight: 500;
  color: var(--scable-secondary) !important;
}



/* ============================================================
   Consolidated page styles (moved from inline <style> blocks)
   ============================================================ */

/* Standalone contact pages — class set on <body> of de/kontakt-* and contact.php */
@media screen and (max-width: 800px) {
  .contact-standalone .scable-card {
    padding: 0;
    box-shadow: unset;
    border: 0;
    margin: 0 !important;
  }
  .contact-standalone .scable-card .row {
    flex-wrap: wrap-reverse;
  }
  .contact-standalone .hideOnMobile {
    display: none;
  }
  .contact-standalone .noMbOnMobile {
    margin-bottom: 0 !important;
  }
}

/* KI hubs section (de/scableone/ki-funktionen) */
b.text-green { color: green; }
.ki-hubs {
  --teal: #00BEA4;
  --ink: #101B2D;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  font-family: inherit;
}
.ki-hubs *, .ki-hubs *::before, .ki-hubs *::after { box-sizing: border-box; }
.ki-oneScreen { padding-bottom: 1.5rem; }
.ki-hubs__intro {
  font-size: clamp(0.82rem, 1.25vw, 1rem);
  line-height: 1.35;
  margin: 0 0 0.7rem;
}
.ki-hubs__stage {
  --teal: #00BEA4;
  --ink: #101B2D;
  container-type: inline-size;
  position: relative;
  aspect-ratio: 2700 / 1938;
  width: min(100%, calc((100vh - 315px) * 2700 / 1938));
  max-width: 100%;
  margin-inline: auto;
}
.ki-hubs__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.ki-hub {
  position: absolute;
}
.ki-hub--shopfloor  { left: 50.0%; top: 0%;     width: 38.9%; height: 36.4%; }
.ki-hub--worker     { left: 1.3%;  top: 61.9%;  width: 38.3%; height: 35.3%; }
.ki-hub--maintenance{ left: 60.4%; top: 63.0%;  width: 38.7%; height: 33.3%; }
/* height:auto + max-height lets a collapsed <details> shrink the whole
   box down to just its summary, instead of the box staying full-size
   while only the list hides. */
.ki-hub__details {
  height: auto;
  max-height: calc(100% + 2rem);
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: clamp(10px, 2cqi, 26px);
  padding: 1rem;
  overflow: auto;
  box-shadow: 0 6px 18px rgba(16, 27, 45, 0.06);
}
.ki-hub__summary {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.2cqi, 14px);
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.ki-hub__summary::-webkit-details-marker { display: none; }
.ki-hub__icon svg {
  width: clamp(18px, 2.4cqi, 32px);
  height: clamp(18px, 2.4cqi, 32px);
  display: block;
}
.ki-hub__title {
  margin: 0;
  flex: 1;
  color: var(--ink);
  font-size: clamp(0.85rem, 1.7cqi, 1.5rem);
  line-height: 1.2;
}
.ki-hub__chevron {
  width: clamp(9px, 1cqi, 14px);
  height: clamp(9px, 1cqi, 14px);
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ki-hub__details[open] > .ki-hub__summary .ki-hub__chevron {
  transform: rotate(-135deg);
}
.ki-hub__list {
  margin: clamp(8px, 1.6cqi, 18px) 0 0;
  padding-left: clamp(16px, 2cqi, 22px);
  color: var(--ink);
  font-size: clamp(0.72rem, 1.35cqi, 1.15rem);
  line-height: 1.35;
}
.ki-hub__list li {
  margin-bottom: clamp(4px, 1cqi, 12px);
  padding-left: 4px;
}
.ki-hub__list li::marker {
  color: var(--teal);
}
/* Mobile: drop the overlay layout, stack cards, hide illustration */
@media (max-width: 720px) {
  .ki-hubs__bg { display: none; }
  .ki-hubs__stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ki-hub {
    position: static;
    width: 100%;
  }
  .ki-hub__details {
    height: auto;
    padding: 16px 18px;
  }
  .ki-hub__title { font-size: 1.15rem; }
  .ki-hub__list { font-size: 0.95rem; }
}

/* Homepage solutions detail selector (de/index) */
.solutions-detail-sel {
  padding: 1.25rem 0rem;
  font-size: 1.25rem;
  color: darkgrey;
  cursor: pointer;
  border-bottom: 1px solid lightgrey;
}
.solutions-detail-sel > .fa-solid.fa-caret-right {
  display: none;
}
.solutions-detail-sel.active {
  padding-left: 0.5rem;
  color: black;
}
.solutions-detail-sel.active > .fa-solid.fa-caret-right {
  display: inline;
  margin-right: 0.25rem;
}
.solutions-detail-wrapper {
  padding-top: 1rem;
  display: none;
}
.solutions-detail-wrapper.active {
  display: block;
}

/* GxP solution page cards (de/loesungen/gxp-compliance-rueckverfolgbarkeit) */
.scable-card.red-theme {
  background-color: rgb(255, 245, 245);
  border: none;
  box-shadow: 0 3px 10px rgb(255, 245, 245);
}
.scable-card.green-theme {
  border: none;
  background-color: rgb(245, 255, 245);
  box-shadow: 0 3px 10px rgb(245, 255, 245);
}
.scable-card.red-theme .text-container h4,
.scable-card.red-theme .icon-container {
  color: rgb(100,0,0);
}
.scable-card.green-theme .text-container h4,
.scable-card.green-theme .icon-container {
  color: rgb(0,100,0);
}
.text-container h4 {
  font-size: 1.15rem;
  margin-bottom: 0;
}
.text-container p {
  line-height: 1.5;
}
.icon-container {
  text-align: center;
  align-items: center;
  font-size: 2rem;
}

/* About us (website_directory/company/aboutus) */
.siemensImage {
  max-height: 500px;
  max-width: 75%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.siemensImageContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Download resource template (2025_08_download) */
.download_cover_image {
  width: 100%; border-radius: 8px; box-shadow: 2px 2px 15px 2px rgba(0,0,0,0.2);
}
.noshade {box-shadow: none !important; width: auto; height: 350px;}

/* Event resource template (2025_08_event) */
.reorderOnMobileRow {
  justify-content: center;
  flex-wrap: wrap-reverse;
}
.showBelow1200 {
  display: none;
}
.hideBelow1200 {
  display: block;
}
@media screen and (max-width: 1200px) {
  .showBelow1200 {
    display: block;
  }
  .hideBelow1200 {
    display: none;
  }
}

/* Resource overview filters (2025_12_resources) */
.filterradiobtncontainer-static {
  overflow-x: unset;
}
.filter-hz {
  width: 220px;
  height: max-content;
  position: relative;
  display: block;
  box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.2);
  border-radius: 10px;
  background-color: white;
  margin-left: 10px;
  z-index: 50;

  .filtercontainer {
    height: 60px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: 1px solid black;
    border-radius: 10px;

    .col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: left;
      flex: unset;
      cursor: pointer;
    }
    .col.iconcol {
      align-items: end;
    }
    .principaltext {
      font-size: 1.1rem;
    }
    .filterinfotext {
      font-size: 0.9rem;
      color: grey;
      max-width: 250px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .filter-dropdown {
    width: 220px;
    overflow: hidden;
    border-radius: 10px;
    max-height: 0px;
    transition: 0.2s max-height;
    position: absolute;
    background-color: white;

    .filter-dd-option {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      padding: 0.25rem;
      width: 100%;
      padding: 8px;

      .text {
        text-transform: capitalize;
        margin-left: 10px;
        margin-right: 15px;
      }
    }
  }
}
.filter-hz[data-status="closed"] {
  box-shadow: none;

  .filter-dropdown {
    max-height: 0px;
  }
}
.filter-hz[data-status="opened"] {
  .filter-dropdown {
    max-height: 600px;
    box-shadow: 2px 2px 10px 3px rgba(0,0,0,0.2);
  }
}
#respg-text {
  margin-bottom: 0.5rem;
}
/* Hub tabs on the dark /ressourcen hero: the resting-chip idea translated onto
   a dark ground (light hairline instead of --scable-bright), active is the same
   teal gradient used by .sfn-chip.is-active and the filter chips. */
.hub-tab-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0 0.5rem 0 0;
  padding: 0.5rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 150px;
  background-color: transparent;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.22s ease, background-color 0.22s ease;
}

.hub-tab-btn:hover {
  border-color: var(--scable-primary);
  background-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.hub-tab-btn:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 3px;
}

.hub-tab-btn[data-active="active"] {
  background: linear-gradient(45deg, var(--scable-secondary) 0%, var(--scable-primary) 75%);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(0, 191, 165, 0.32);
}

.hub-tab-bar {
  gap: 0;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  padding-top: 0.2rem;
}
.hub-tab-bar::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hub-tab-btn { transition: none; }
  .hub-tab-btn:hover { transform: none; }
}

/* Sticky table-of-contents sidebar (wissen article templates) */
.nav-menu-sticky {
  border-right: 1px solid var(--scable-grey);
  position: sticky;
  top: 200px;
  bottom: 500px;
}
.nav-menu-sticky.nav-menu-sticky-high {
  top: 180px;
}

/* Vimeo player + custom endcard (video resource templates) */
#vcPlayerVideo iframe {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 720px;
  aspect-ratio: 7/4;
  border-radius: 8px;
  overflow: hidden;
}
#playerCustomEndcard {
  display: none;
  background-color: rgba(0, 0, 0, 1);
  color: white;
  border-radius: 8px;
  overflow: hidden;
}
#playerCustomEndcard .inner {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: 0.3s ecappear ease-out;
}
@keyframes ecappear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#vimeoRewatchBtn {
  color: var(--scable-bright);
}
#chapterbtnbar .scable-btn.scable-dark {
  margin: 5px 5px 5px 0px !important;
}
/* Wrappers for DB-provided embed HTML (html_script) */
.embed-7x4 iframe {
  width: 100%; aspect-ratio: 7/4; border-radius: 8px; overflow: hidden;
}
.embed-16x9 iframe {
  position: relative; width: 100%; min-height: 300px; aspect-ratio: 1.77/1; margin-bottom: -4.5px;
}

/* Grounding pages (2026_03_grounding) */
.subsection {
  margin: 0.75rem 0;
}
.subsection h2 {
  color: var(--scable-stylish);
}
.grounding-dl {
  margin: 0.25rem 0 0 0;
}
.grounding-dl dt {
  font-weight: 600;
  margin-top: 0.6rem;
}
.grounding-dl dd {
  margin-left: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--scable-stylish, #ccc);
  color: inherit;
}
.grounding-dl dd a {
  text-decoration: underline;
}
.grounding-dl dd p:last-child,
.grounding-dl dd ul:last-child {
  margin-bottom: 0;
}
.grounding-h3 {
  margin: 1.5rem 0 0;
  font-size: 1.15rem;
}

/* VALUE STOPS extras (de/valuestops-buch, de/wissen/valuestops-methode) */
.im-ha-50 {height: 300px; margin-bottom: 1rem; border-radius: 0.25rem; }
.row.left {
  justify-content: space-between;
}
.ssc-small {
  max-width: 285px;
  flex-shrink: 1 !important;
  padding: 1.5rem !important;
}
.ssc-small .vs_letter {
  font-size: 3rem;
}
.ssc-small h4 {
  font-size: 1.4rem !important;
  margin: 0.5rem 0;
}

/* Relocated from website_header()/footer() inline styles */
@media screen and (min-width: 1200px) {
  #key_logo_svg { width: 325px; }
}
.icon-row-background.background-white { background-color: white; }
/* Portrait (9:16) product video in the solution_challenges panel.
   Scoped to .has-video so solution pages still using a still image are unaffected.
   The card takes the height of the challenge cards next to it and derives its
   width from the video's aspect ratio, so the video fills the card exactly
   instead of being letterboxed inside a 7:4 landscape frame. */
.solution-image-col.has-video {
  position: relative;
  /* .col-xl-4 carries a 30px bottom margin site-wide, which would leave the
     video column 30px shorter than the challenge cards beside it. */
  margin-bottom: 0;
}
/* The card is taken out of flow so it cannot influence the row height (that
   would be circular: its height comes from the column, whose height comes from
   the challenge cards next to it). top/bottom pin it to the full column height,
   and the 9:16 aspect ratio then gives it exactly the width the video needs -
   so the video fills the card completely, with nothing cropped. */
.solution-video-card {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 9 / 16;
  max-width: calc(100% - 24px);
  padding: 0;
  overflow: hidden;
  container-type: size;
}
.solution-video-card > .h-auto,
.solution-video-card #vcPlayerVideo {
  position: absolute;
  inset: 0;
}
/* Cover, in container-query units: scales the 9:16 video to whichever dimension
   needs it and clips any overflow, so an off-ratio video still fills the box.
   Overrides the global #vcPlayerVideo iframe rule, which assumes 7:4 landscape. */
.solution-video-card #vcPlayerVideo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100cqw, 56.25cqh);
  height: max(177.78cqw, 100cqh);
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  display: block;
}
.solution-video-card #playerCustomEndcard {
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 1199.98px) {
  .solution-image-col.has-video {
    align-items: flex-start;
  }
  .solution-video-card {
    position: static;
    transform: none;
    width: min(100%, 360px);
    max-width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    margin-inline: auto;
  }
}

.contentcontainerrow {
  display: inline-flex;
  overflow-x: auto;
  flex-wrap: nowrap;
  width: 100%;
}

.functioncontentcontainer {
  width: 96%;
  margin: 2%;
  flex-shrink: 0;
}

/* ── software_functions(): grouped, numbered chapter rail ─────────────────── */

.sfn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.sfn-head-text {
  min-width: 0;
}
.sfn-head-text > :last-child {
  margin-bottom: 0;
}
.sfn-counter {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  color: var(--scable-grey);
  white-space: nowrap;
}
.sfn-counter-now {
  font-size: 2rem;
  color: var(--scable-primary);
}
.sfn-counter-sep {
  margin: 0 0.3rem;
  opacity: 0.5;
}

.sfn {
  /* margin-top: 1.5rem; */
  margin-top: 0.7rem;
}

.sfn-railwrap {
  position: relative;
}
/* Edge fades signal that the rail keeps going; they sit above the scroller and
   are switched on only when there is actually something to scroll to. */
.sfn-railwrap::before,
.sfn-railwrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}
.sfn-railwrap::before {
  left: 0;
  background: linear-gradient(to right, var(--scable-white) 30%, rgba(255, 255, 255, 0));
}
.sfn-railwrap::after {
  right: 0;
  background: linear-gradient(to left, var(--scable-white) 30%, rgba(255, 255, 255, 0));
}
.sfn.can-left .sfn-railwrap::before,
.sfn.can-right .sfn-railwrap::after {
  opacity: 1;
}

.sfn-rail {
  display: flex;
  align-items: flex-end;
  /*gap: 1.5rem;*/
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* room so chip hover-lift and shadow are not clipped by the scroll box */
  padding: 0.4rem 0 0.9rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sfn-rail::-webkit-scrollbar {
  display: none;
}

.sfn-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex-shrink: 0;
}
.sfn-group + .sfn-group {
  /*padding-left: 1.5rem;
  border-left: 1px solid var(--scable-brightest);*/
}
.sfn-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--scable-grey);
  line-height: 1.4;
  min-height: 1.4em;
  max-width: 46ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sfn-chips {
  display: flex;
  gap: 0.5rem;
}

.sfn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  padding: 0.45rem 1.1rem 0.45rem 0.5rem;
  border: 1px solid var(--scable-bright);
  border-radius: 150px;
  background-color: var(--scable-white);
  color: var(--scable-black);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}
.sfn-chip-num {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--scable-brightest);
  color: var(--scable-grey);
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.22s ease, color 0.22s ease;
}
.sfn-chip:hover {
  border-color: var(--scable-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgb(33 51 67 / 14%);
}
.sfn-chip:hover .sfn-chip-num {
  background-color: var(--scable-primary);
  color: var(--scable-white);
}
.sfn-chip:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 3px;
}
.sfn-chip.is-active {
  background: linear-gradient(45deg, var(--scable-secondary) 0%, var(--scable-primary) 75%);
  border-color: transparent;
  color: var(--scable-white);
  box-shadow: 0 6px 16px rgba(0, 191, 165, 0.32);
}
.sfn-chip.is-active .sfn-chip-num {
  background-color: rgba(255, 255, 255, 0.25);
  color: var(--scable-white);
}

.sfn-nav {
  position: absolute;
  top: calc(50% + 0.6rem);
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--scable-bright);
  border-radius: 50%;
  background-color: var(--scable-white);
  color: var(--scable-dark);
  box-shadow: 0 3px 10px rgb(33 51 67 / 12%);
  cursor: pointer;
  transition: opacity 0.25s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sfn-nav-prev { left: -0.5rem; }
.sfn-nav-next { right: -0.5rem; }
.sfn-nav.is-off {
  opacity: 0;
  pointer-events: none;
}
.sfn-nav:hover {
  background-color: var(--scable-primary);
  border-color: var(--scable-primary);
  color: var(--scable-white);
}
.sfn-nav:focus-visible {
  outline: 2px solid var(--scable-primary);
  outline-offset: 2px;
}

.sfn-progress {
  height: 3px;
  border-radius: 99px;
  background-color: var(--scable-brightest);
  overflow: hidden;
  margin: 0.25rem 0 1.5rem;
}
.sfn-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--scable-secondary), var(--scable-primary));
  transition: width 0.15s linear;
}

.sfn-track {
  --sfn-gutter: 1.5rem;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sfn-track::-webkit-scrollbar {
  display: none;
}
/* A fixed gutter keeps card + margins exactly one viewport wide; the percentage
   pair it replaces (96% + 2% + 2%) rounded independently and drifted a couple of
   pixels at some widths. "center" then snaps the card's border box to the middle
   of the scrollport -- "start" would align to the border box and swallow the
   left gutter, pushing the next card onto the right edge. */
.sfn-track > .functioncontentcontainer {
  width: calc(100% - 2 * var(--sfn-gutter));
  margin: var(--sfn-gutter);
  scroll-snap-align: center;
}

@media (max-width: 991px) {
  .sfn-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .sfn-counter-now { font-size: 1.5rem; }
  .sfn-nav { display: none; }
  .sfn-railwrap::before,
  .sfn-railwrap::after { width: 2rem; }
  .sfn-rail { gap: 1rem; }
  .sfn-group + .sfn-group { padding-left: 1rem; }
  .sfn-track { --sfn-gutter: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sfn-rail,
  .sfn-track { scroll-behavior: auto; }
  .sfn-chip,
  .sfn-nav,
  .sfn-progress-bar { transition: none; }
  .sfn-chip:hover { transform: none; }
}

.goodtoknow {
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* "cards" article block: one card per column, wrapping to fewer columns as the
   article column narrows */
.article-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.article-card {
  padding: 1.25rem;
  border-color: var(--scable-bright);
  hyphens: auto;
  overflow-wrap: break-word;
}

.article-card h3 {
  margin-top: 0 !important;
  font-size: 1.15rem;
}

.article-card ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}

/* resource cards inside an article: a three-up row with a short text, and the
   hub cards' product graphics shown whole on white rather than cropped */
.article-res-cards {
  margin: 1.5rem -0.75rem;
}

.article-res-cards > [class*="col-"] {
  padding: 0.75rem;
}

.scable-res-card-text {
  margin: -0.6rem 0 1.25rem;
  font-size: 0.9rem;
  color: var(--scable-stylish);
}

.scable-res-card-img.is-graphic {
  object-fit: contain;
  padding: 0.75rem;
  background: var(--scable-white);
}