.ssm-loesung[data-astro-cid-waogy4me] {
  box-sizing: border-box;
  width: 100%;
  min-height: 100svh;
  padding: clamp(48px, 8vh, 96px) clamp(28px, 6vw, 80px);
  font-family: Plus Jakarta Sans, sans-serif;
  background: none;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  isolation: isolate;
}

.ssm-loesung-canvas[data-astro-cid-waogy4me] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.45, 0, .55, 1);
}

.ssm-loesung-canvas[data-astro-cid-waogy4me].is-sichtbar {
  opacity: .1;
}

@media (prefers-reduced-motion: reduce) {
  .ssm-loesung-canvas[data-astro-cid-waogy4me] {
    transition: none;
  }
}

.ssm-loesung-bild-container[data-astro-cid-waogy4me] {
  position: relative;
  width: 100%;
  height: clamp(180px, 28vh, 320px);
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ssm-loesung-bild[data-astro-cid-waogy4me] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), -webkit-mask-image .45s, mask-image .45s;
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(#000 0% 100%);
  mask-image: linear-gradient(#000 0% 100%);
}

.ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-wrap:hover .ssm-loesung-bild[data-astro-cid-waogy4me] {
  transform: scale(1.35) translateY(20%);
  -webkit-mask-image: linear-gradient(#000 15%, #0000 75%);
  mask-image: linear-gradient(#000 15%, #0000 75%);
}

.ssm-loesung-button-wrap[data-astro-cid-waogy4me] {
  position: absolute;
  bottom: 20px;
  z-index: 10;
  opacity: 0;
  transform: translateY(120%);
  transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-wrap:hover .ssm-loesung-button-wrap[data-astro-cid-waogy4me] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ssm-loesung-kopf[data-astro-cid-waogy4me] {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}

.ssm-loesung-cta[data-astro-cid-waogy4me] {
  margin-left: auto;
  align-self: center;
}

.ssm-loesung-titel[data-astro-cid-waogy4me] {
  font-size: var(--titel-abschnitt);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1.05;
  color: #fff;
  text-wrap: wrap;
  max-width: 640px;
}

.ssm-loesung-akzent[data-astro-cid-waogy4me] {
  position: relative;
  z-index: 2;
  font-family: EB Garamond, Libre Baskerville, serif;
  font-style: italic;
  display: inline-block;
  line-height: 1.34;
  padding-right: .14em;
  padding-bottom: .14em;
  font-weight: 400;
  letter-spacing: -.045em;
  font-size: 1.26em;
  margin-left: .07em;
  background-image: linear-gradient(to right, #00c79a 0%, #00ffd3 52%, #6fe9ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-block: -1em;
}

.ssm-loesung-subheadline[data-astro-cid-waogy4me] {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
  max-width: 220px;
  text-align: left;
}

.ssm-loesung-grid[data-astro-cid-waogy4me] {
  margin: -14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-wrap {
  height: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-surface {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  mask-image: radial-gradient(#fff, #000);
}

.ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-shim {
  inset: 0;
  border-radius: inherit;
}

.ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-sheen, .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-grain {
  display: none;
}

@media (width <= 900px) {
  .ssm-loesung-subheadline[data-astro-cid-waogy4me] {
    max-width: none;
  }
}

@media (width <= 1199px) {
  .ssm-loesung-grid[data-astro-cid-waogy4me] {
    --wisch-rand: clamp(28px, 6vw, 80px);
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-surface {
    border-radius: var(--radius-karte-mobil);
  }

  .ssm-loesung[data-astro-cid-waogy4me] {
    padding-top: var(--abstand-kopf-mobil);
    padding-bottom: var(--abstand-leiste-mobil);
    gap: 28px;
  }

  .ssm-loesung-kopf[data-astro-cid-waogy4me] {
    display: contents;
  }

  .ssm-loesung-subheadline[data-astro-cid-waogy4me] {
    margin-top: -14px;
    max-width: none;
    font-size: 15px;
    font-weight: 600;
    line-height: var(--body-lh);
    letter-spacing: var(--body-ls);
  }

  .ssm-loesung-titel[data-astro-cid-waogy4me] {
    margin-bottom: -14px;
  }

  .ssm-loesung-cta[data-astro-cid-waogy4me] {
    order: 1;
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-surface {
    position: relative;
  }

  .ssm-loesung-bild-container[data-astro-cid-waogy4me] {
    position: absolute;
    right: -22%;
    bottom: -6%;
    width: 78%;
    height: 70%;
    margin: 0;
    z-index: 0;
    opacity: .32;
    pointer-events: none;
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-karte-inhalt, .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-text, .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-titel, .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-kicker {
    position: relative;
    z-index: 1;
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-surface {
    min-height: 300px;
  }
}

@media (width <= 599px) {
  .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-surface {
    min-height: 420px;
  }

  .ssm-loesung-bild-container[data-astro-cid-waogy4me] {
    right: auto;
    left: -64px;
    bottom: -190px;
    width: 250px;
    height: 250px;
    opacity: .75;
  }

  .ssm-loesung-bild[data-astro-cid-waogy4me] {
    object-position: bottom left;
  }
}

@media (width >= 600px) and (width <= 1199px) {
  .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-surface {
    min-height: 230px;
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] > [data-breit] .ssm-glas-surface {
    min-height: 170px;
  }

  .ssm-loesung-bild[data-astro-cid-waogy4me] {
    display: none;
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] > [data-breit] .ssm-glas-karte-inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: 36px;
    row-gap: 14px;
    align-items: start;
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] > [data-breit] .ssm-glas-kicker {
    grid-column: 1;
    grid-row: 1;
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] > [data-breit] .ssm-glas-titel {
    grid-column: 1;
    grid-row: 2;
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] > [data-breit] .ssm-glas-text {
    grid-column: 2;
    grid-row: 1 / span 2;
    text-align: left;
  }

  .ssm-loesung-grid[data-astro-cid-waogy4me] > [data-breit] .ssm-glas-kinder {
    grid-column: 1 / -1;
  }
}

@media (width <= 1199px) and (hover: none), (width <= 1199px) and (pointer: coarse) {
  .ssm-loesung-grid[data-astro-cid-waogy4me] .ssm-glas-wrap:hover .ssm-loesung-bild[data-astro-cid-waogy4me] {
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ssm-loesung-button-wrap[data-astro-cid-waogy4me] {
    display: none;
  }
}
.ssm-kproj-raster[data-astro-cid-juj7czba] {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ssm-kproj[data-astro-cid-juj7czba] {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
  width: 100%;
  padding: clamp(24px, 4vh, 48px) 0;
  --karten-breite: clamp(180px, min(21vw, 27svh), 300px);
  font-family: Plus Jakarta Sans, sans-serif;
  background: none;
  position: relative;
  isolation: isolate;
}

.ssm-kproj-kopf[data-astro-cid-juj7czba] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  padding: 0 clamp(28px, 6vw, 80px);
  max-width: 1360px;
  margin-inline: auto;
}

.ssm-kproj-titel[data-astro-cid-juj7czba] {
  font-size: var(--titel-abschnitt);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1.1;
  color: #fff;
  text-wrap: wrap;
}

@media (width <= 1199px) {
  .ssm-kproj[data-astro-cid-juj7czba] {
    padding-top: var(--abstand-kopf-mobil);
  }

  .ssm-kproj-kopf[data-astro-cid-juj7czba] {
    display: contents;
  }

  .ssm-kproj-titel[data-astro-cid-juj7czba], .ssm-kproj-cta[data-astro-cid-juj7czba] {
    box-sizing: border-box;
    padding-inline: clamp(28px, 6vw, 80px);
  }

  .ssm-kproj-cta[data-astro-cid-juj7czba] {
    order: 1;
  }
}

.ssm-kproj-baender-desktop[data-astro-cid-juj7czba] {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ssm-kproj-baender-mobil[data-astro-cid-juj7czba] {
  display: none;
}

@media (width <= 1199px) {
  .ssm-kproj-baender-desktop[data-astro-cid-juj7czba] {
    display: none;
  }

  .ssm-kproj-baender-mobil[data-astro-cid-juj7czba] {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .ssm-kproj[data-astro-cid-juj7czba] {
    box-sizing: border-box;
    min-height: 100svh;
    justify-content: center;
    padding-bottom: var(--abstand-leiste-mobil);
  }
}
/* Snap direkt auf der Seite, gleiches Muster wie webdesign.astro:
     "mandatory" (Nutzerwunsch: wirklich strikt, kein Zwischenstopp, kein
     Drueberscrollen) — dafuer braucht die Snap-Kette lueckenlos jeden
     Bereich als Snap-Punkt, sonst reisst mandatory den Scroll aus einer
     nicht ausgerichteten Zone sofort zurueck. Der Footer bekommt deshalb
     hier (nur auf dieser Seite) selbst scroll-snap-align, damit er der
     letzte, aber erreichbare Snap-Punkt ist. */
  :root:has(.ssm-hero-us) {
    scroll-snap-type: y mandatory;
  }
  /* Footer: Seitenende als Haltepunkt (end statt start, 2026-10-06) — man
     scrollt normal bis ganz unten, der Abschnitt davor bleibt darüber
     sichtbar statt unter dem Menü zu verschwinden */
  :root:has(.ssm-hero-us) .ssm-footer {
    scroll-snap-align: end;
  }
  /* Kundenprojekte (Karussell, keine feste 100vh-Sektion) bekommt hier
     einen eigenen Snap-Punkt, konsistent mit allen anderen Sektionen
     dieser Seite. */
  .ssm-sm-kproj-snap {
    box-sizing: border-box;
    width: 100%;
    min-height: 100svh;
    display: flex;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }