/* Start page services section in the layout of leistungen-varianten/variante-2 (compact grid, Gianni, 23.09.2026):
   three over three, photo left, title, icon and text right. Own class names (ks2-) so the Webflow
   interactions of the template cards do not touch it: no entrance animation, only the green hover below. */
/* section head centred as before (template .top-content-wrap.solutions: 45% wide, tag, title, text) */
.ks2-head { width: 45%; margin: 0 auto var(--_sizes---gap--xs-gap); display: flex; flex-direction: column; align-items: center; gap: var(--_sizes---gap--xxxs-gap); text-align: center; }
.ks2-tag { display: flex; align-items: center; gap: 7.2px; }
.ks2-tag .icon { color: #017153; font-family: "Material Icons"; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: "liga"; }
.ks2-title { margin: 0; color: #04382A; white-space: nowrap; font-size: min(52px, 5.2vw); }
.ks2-intro { margin: 0; }

.ks2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--_sizes---gap--xxs-gap); }
.ks2-card { position: relative; display: flex; align-items: stretch; gap: var(--_sizes---gap--tiny-gap); padding: var(--_sizes---gap--tiny-gap); min-height: min(13.5vw, 25vh); box-sizing: border-box; border-radius: var(--_sizes---radius--md-radius); background-color: #fff; overflow: hidden; transition: background-color .35s ease; }
.ks2-img { position: relative; flex: 0 0 36%; border-radius: var(--_sizes---radius--sm-radius); overflow: hidden; }
.ks2-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ks2-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--_sizes---gap--super-tiny-gap); padding: .4vw .3vw .4vw 0; }
.ks2-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8vw; margin-bottom: .2vw; }
.ks2-card-title { margin: 0; padding-top: .35vw; color: #04382A; font-size: clamp(1.15rem, 1.4vw, 1.4rem); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; transition: color .3s; }
.ks2-text { margin: 0; color: #666; font-size: clamp(.85rem, .95vw, 1rem); line-height: 1.4; transition: color .3s; }
.ks2-icon { flex: none; width: clamp(2.3rem, 2.5vw, 2.75rem); height: clamp(2.3rem, 2.5vw, 2.75rem); border-radius: 50%; background-color: #017153; color: #FDF21E; display: flex; justify-content: center; align-items: center; transition: background-color .3s, color .3s; }
.ks2-icon span { font-family: "Material Icons"; font-size: clamp(1.2rem, 1.3vw, 1.45rem); line-height: 1; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: "liga"; }

/* hover as on the template cards: card KERN green, text light, icon yellow with dark glyph */
.ks2-card:hover { background-color: #017153; }
.ks2-card:hover .ks2-card-title { color: #fff; }
.ks2-card:hover .ks2-text { color: #E3EDE8; }
.ks2-card:hover .ks2-icon { background-color: #FDF21E; color: #04382A; }

@media (max-width: 991px) {
  .ks2-title { white-space: normal; font-size: clamp(2rem, 6vw, 2.6rem); }
  .ks2-head { width: 75%; }
  .ks2-grid { grid-template-columns: 1fr 1fr; }
  .ks2-card { min-height: 170px; }
  .ks2-top { gap: 12px; margin-bottom: 4px; }
  .ks2-card-title { padding-top: 4px; }
  .ks2-body { padding: 4px 4px 4px 0; }
}
@media (max-width: 767px) { .ks2-head { width: 80%; } }
@media (max-width: 640px) {
  .ks2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479px) { .ks2-head { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ks2-card, .ks2-card-title, .ks2-text, .ks2-icon { transition: none; } }

/* cards glide up softly when they scroll into view (Gianni, 23.09.2026); js/kern-start.js adds .ks2-reveal
   to the grid and .ks2-in per card, so without JS the cards simply stay visible. The title above stays static. */
.ks2-reveal .ks2-card { opacity: 0; transform: translateY(48px); transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.16,1,.3,1), background-color .35s ease; }
.ks2-reveal .ks2-card.ks2-in { opacity: 1; transform: none; }

/* "Zahlen, die zählen" on phones (Gianni, 28.09.2026): each row appears once when it scrolls into view,
   photo first, then the dashed line draws to the right, then the number box rises softly.
   js/kern-start.js adds .kb-usp-reveal to the section and .kb-usp-in to each card (--kb-d staggers rows that enter together). !important is needed
   because the Webflow runtime writes inline opacity/transform on .line-usp and .usp-stats. */
@media (max-width: 767px), (max-height: 520px) and (max-width: 1023px) {
  .kb-usp-reveal .usp-card .img-usp-wrapper { opacity: 0; transform: translateY(18px) scale(1.04); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--kb-d, 0s); }
  .kb-usp-reveal .usp-card .line-usp { clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.65,0,.35,1) calc(var(--kb-d, 0s) + .3s); }
  .kb-usp-reveal .usp-card:not(.kb-usp-in) .usp-stats { opacity: 0 !important; transform: translateY(16px) !important; }
  .kb-usp-reveal .usp-card .usp-stats { transition: opacity .7s cubic-bezier(.22,.61,.36,1) calc(var(--kb-d, 0s) + .55s), transform .9s cubic-bezier(.16,1,.3,1) calc(var(--kb-d, 0s) + .55s); }
  .kb-usp-reveal .usp-card.kb-usp-in .img-usp-wrapper { opacity: 1; transform: none; }
  .kb-usp-reveal .usp-card.kb-usp-in .line-usp { clip-path: inset(0 0 0 0); }
}

/* "Zahlen, die zählen" on phones (Gianni, 29.09.2026): the Webflow scroll animation of the desktop layout kept
   writing inline transforms on the cards, lines and number boxes, so on phones the boxes sat lower than their photo
   and the last one was cut off. Phones (up to 767px) and phones held sideways (short screens up to 1023px) now all use
   the stacked template layout (photo, dashed line, number box per row) with those inline transforms switched off. */
@media (max-width: 767px), (max-height: 520px) and (max-width: 1023px) {
  .main-section.usp { padding-top: var(--_sizes---section--section-padding-vertical); padding-bottom: var(--_sizes---section--section-padding-vertical); }
  .usp-home-scroll { height: auto; }
  .usp-home { height: auto; position: static; }
  .usp-home-wrap { flex-flow: column; height: auto; max-width: 32rem; margin: 0 auto; gap: var(--_sizes---gap--xxxs-gap); overflow: visible; }
  .usp-section-title { width: 100%; order: -9999; margin-bottom: var(--_sizes---gap--xxs-gap); transform: none; }
  .usp-title-wrap { transform: none !important; opacity: 1 !important; }
  .usp-title-wrap.secondary { display: none; }
  .usp-card, .usp-card.left-up, .usp-card.left-bottom, .usp-card.right-up, .usp-card.right-bottom {
    position: static; flex-flow: row; justify-content: space-between; align-items: stretch; width: 100%;
    transform: none !important; opacity: 1 !important;
  }
  .usp-card .img-usp-overflow { width: 10rem; height: 7rem; transform: none !important; }
  .usp-card .line-usp { flex: 1 1 auto; width: auto; align-self: center; transform: none !important; opacity: 1 !important; }
  /* number box as high as its photo, content centred, so every row lines up */
  .usp-card .usp-stats { flex: none; width: 8rem; height: auto; justify-content: center; transform: none !important; opacity: 1 !important; }
  .usp-card .stats-title-wrap { text-align: center; }
  .usp-card .stats-title { text-wrap: balance; }
}