#leistungen { --lk-r: var(--r); --lk-luft: 12px; --lk-schatten: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 28px rgba(0, 0, 0, .06); }
@media (min-width: 640px) { #leistungen { --lk-r: var(--r-gross); --lk-luft: 16px; } }
@media (min-width: 1024px) { #leistungen { --lk-luft: 20px; } }

.m-leistungen__kopf { display: grid; gap: 26px; margin-bottom: clamp(30px, 6vw, 60px); }
.m-leistungen__kopf .kopf-abschnitt { margin-bottom: 0; }
.m-leistungen__kopf .titel .serif { font-weight: 400; letter-spacing: -.03em; }
@media (min-width: 900px) { .m-leistungen__kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 56px; } }

#leistungen .m-leistungen__ansicht { display: none; }
.js #leistungen .m-leistungen__ansicht { display: grid; gap: 12px; justify-items: start; align-content: end; }
.m-leistungen__segment { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; border-radius: 980px; background: rgba(0, 0, 0, .06); }
.m-leistungen__segment button {
  position: relative; z-index: 1; min-height: 44px; padding: 0 20px; border-radius: 980px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--muted);
  transition: color .35s var(--sanft); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.m-leistungen__segment button[aria-pressed="true"] { color: var(--ink); }
.m-leistungen__segment button:active { transform: scale(.97); }
.m-leistungen__daumen {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 980px;
  background: var(--card); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04);
  transition: transform .55s var(--feder);
}
.m-leistungen__daumen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .45s var(--sanft);
  background: linear-gradient(90deg, var(--nass-1), var(--nass-2), var(--trocken), var(--warm));
  background: linear-gradient(90deg in oklch, var(--nass-1), var(--nass-2), var(--trocken), var(--warm));
}
#leistungen[data-ansicht="waerme"] .m-leistungen__daumen { transform: translateX(100%); }
#leistungen[data-ansicht="waerme"] .m-leistungen__daumen::after { opacity: 1; }
#leistungen[data-ansicht="waerme"] .m-leistungen__segment button[data-ansicht="waerme"] { color: #fff; }

.m-leistungen__legende { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; transition: opacity .4s; opacity: .7; }
#leistungen[data-ansicht="waerme"] .m-leistungen__legende { opacity: 1; }
.m-leistungen__skala {
  width: 128px; height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, #000e37, var(--nass-1), var(--nass-2), var(--trocken), var(--warm), var(--orange-zart));
  background: linear-gradient(90deg in oklch, #000e37, var(--nass-1) 28%, var(--nass-2) 44%, var(--trocken) 70%, var(--warm) 88%, var(--orange-zart));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.m-leistungen__hinweis { max-width: 34ch; font-size: 13px; }
.m-leistungen__hinweis-maus { display: none; }
@media (hover: hover) and (pointer: fine) { .m-leistungen__hinweis-maus { display: inline; } }

.m-leistungen__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lk-luft); }
.m-leistungen__kachel { position: relative; min-width: 0; perspective: 1100px; }
#leistung-wasserschaden, #leistung-geraete { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .m-leistungen__raster { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #leistung-wasserschaden { grid-column: span 7; }
  #leistung-leckortung { grid-column: span 5; }
  .m-leistungen__kachel--mittel { grid-column: span 4; }
}

.m-leistungen__flaeche {
  position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%;
  background: var(--card); border-radius: var(--lk-r); overflow: hidden; box-shadow: var(--lk-schatten);
  transition: transform .45s var(--feder), box-shadow .5s var(--sanft);
  -webkit-tap-highlight-color: transparent;
}
.m-leistungen__flaeche::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.m-leistungen__flaeche.ist-gedrueckt { transform: scale(.975); transition-duration: .12s; }
.m-leistungen__flaeche.ist-aktiv { transition: box-shadow .5s var(--sanft); will-change: transform; box-shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 30px 70px rgba(0, 0, 0, .14); }
.m-leistungen__flaeche:has(.m-leistungen__link:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }

.m-leistungen__bild { position: relative; flex: none; overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-2); }
.m-leistungen__bild picture { display: block; width: 100%; height: 100%; }
.m-leistungen__bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
#leistung-wasserschaden .m-leistungen__bild { aspect-ratio: 4 / 3; }
#leistung-geraete .m-leistungen__bild { aspect-ratio: 16 / 9; }
@media (min-width: 640px) {
  #leistung-wasserschaden .m-leistungen__bild { aspect-ratio: 16 / 9; }
  #leistung-geraete .m-leistungen__bild { aspect-ratio: 21 / 9; }
}
@media (min-width: 1024px) {
  .m-leistungen__kachel--hoch .m-leistungen__bild { aspect-ratio: auto; height: 440px; }
  .m-leistungen__kachel--mittel .m-leistungen__bild { aspect-ratio: 4 / 3; }
  #leistung-geraete .m-leistungen__flaeche { flex-direction: row-reverse; min-height: 340px; }
  #leistung-geraete .m-leistungen__bild { aspect-ratio: auto; width: 62%; height: auto; }
}

.m-leistungen__text { display: flex; flex-direction: column; flex: 1; padding: 15px 15px 16px; }
.m-leistungen__marke { margin-bottom: 7px; font-size: 10.5px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.m-leistungen__marke span { margin-right: 3px; font-weight: 600; color: var(--orange-text); }
.m-leistungen__text h3 { font-size: 19px; line-height: 1.12; letter-spacing: -.022em; font-weight: 700; color: var(--ink); hyphens: manual; }
.m-leistungen__satz { margin-top: 6px; font-size: 14px; line-height: 1.42; color: var(--muted); }
.m-leistungen__link { margin-top: auto; padding-top: 12px; font-size: 15px; align-self: flex-start; }
.m-leistungen__link:focus-visible { outline: none; }
.m-leistungen__link::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
#leistung-wasserschaden .m-leistungen__text, #leistung-geraete .m-leistungen__text { padding: 18px 18px 20px; }
#leistung-wasserschaden h3, #leistung-geraete h3 { font-size: 26px; }
#leistung-wasserschaden .m-leistungen__satz, #leistung-geraete .m-leistungen__satz { font-size: 16px; }
@media (min-width: 640px) {
  .m-leistungen__text, #leistung-wasserschaden .m-leistungen__text, #leistung-geraete .m-leistungen__text { padding: 22px 24px 24px; }
  .m-leistungen__marke { font-size: 11.5px; }
  .m-leistungen__text h3 { font-size: 23px; }
  .m-leistungen__satz { font-size: 16px; }
}
@media (min-width: 1024px) {
  .m-leistungen__text, #leistung-wasserschaden .m-leistungen__text { padding: 26px 30px 28px; }
  .m-leistungen__marke { font-size: 12px; margin-bottom: 10px; }
  .m-leistungen__kachel--hoch h3, #leistung-wasserschaden h3, #leistung-geraete h3 { font-size: clamp(28px, 2.5vw, 34px); }
  .m-leistungen__satz, #leistung-wasserschaden .m-leistungen__satz { font-size: 17px; max-width: 40ch; }
  #leistung-geraete .m-leistungen__text { justify-content: center; padding: 40px 44px; }
  #leistung-geraete .m-leistungen__link { margin-top: 18px; }
}

.m-leistungen__voll, .m-leistungen__band, .m-leistungen__linse { position: absolute; top: 0; left: 0; pointer-events: none; }
.m-leistungen__innen { position: absolute; top: 0; left: 0; }
.m-leistungen__innen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.m-leistungen__innen img.ist-svg { filter: url(#m-leistungen-waerme) blur(1.2px); }

.m-leistungen__voll {
  bottom: 0; width: 130%; z-index: 1; visibility: hidden; transform: translateX(-100%);
  -webkit-mask-image: linear-gradient(90deg, #000 76.92%, transparent); mask-image: linear-gradient(90deg, #000 76.92%, transparent);
  transition: transform 1s var(--feder) var(--welle, 0s), visibility 0s linear calc(1s + var(--welle, 0s));
}
.m-leistungen__voll .m-leistungen__innen { width: calc(100% / 1.3); height: 100%; transform: translateX(130%); transition: transform 1s var(--feder) var(--welle, 0s); }
#leistungen[data-ansicht="waerme"] .m-leistungen__voll { visibility: visible; transform: none; transition: transform 1s var(--feder) var(--welle, 0s), visibility 0s; }
#leistungen[data-ansicht="waerme"] .m-leistungen__voll .m-leistungen__innen { transform: none; }

.m-leistungen__band {
  bottom: 0; width: 60%; z-index: 2; visibility: hidden; transform: translateX(-100%); will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 74%); mask-image: linear-gradient(90deg, transparent, #000 74%);
}
.m-leistungen__band .m-leistungen__innen { width: calc(100% / .6); height: 100%; will-change: transform; }
.m-leistungen__scanlinie {
  position: absolute; top: 0; bottom: 0; right: 2px; width: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 10px 1px var(--orange-hell), 0 0 28px 6px rgba(255, 102, 0, .4);
}

.m-leistungen__linse {
  z-index: 3; visibility: hidden; border-radius: 50%; transform-origin: 50% 50%; will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent); mask-image: radial-gradient(closest-side, #000 74%, transparent);
}
.m-leistungen__linse .m-leistungen__innen { transform-origin: 0 0; will-change: transform; }
.m-leistungen__ring { position: absolute; inset: 17%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
.m-leistungen__ring::before, .m-leistungen__ring::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255, 255, 255, .85); border-radius: 1px; }
.m-leistungen__ring::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.m-leistungen__ring::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }

.m-leistungen__glanz {
  position: absolute; left: 0; top: 0; z-index: 3; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, 0));
  mix-blend-mode: soft-light;
}

#leistungen .m-leistungen__mehr:target {
  display: block; position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 90vh; max-height: 90svh;
  overflow: auto; overscroll-behavior: contain; background: var(--card); color: var(--ink);
  padding: 22px var(--rand) 40px; border-radius: var(--r-gross) var(--r-gross) 0 0; box-shadow: 0 -10px 60px rgba(0, 0, 0, .28);
}
@media (min-width: 768px) {
  #leistungen .m-leistungen__mehr:target { left: 50%; right: auto; bottom: auto; top: 6vh; width: min(720px, 92vw); max-height: 88vh; transform: translateX(-50%); border-radius: var(--r-gross); padding: 32px 40px 40px; }
}
.js #leistungen:not([data-bereit="fehler"]) .m-leistungen__mehr:target { display: none; }
html:not(.js) .m-leistungen__kachel { perspective: none; }
.js #leistungen[data-bereit="fehler"] .m-leistungen__kachel { perspective: none; opacity: 1; transform: none; transition: none; }
#leistungen .m-leistungen__mehr-zu { margin-top: 22px; }

.m-leistungen-blatt__marke { display: flex; align-items: center; gap: 4px; min-height: 36px; padding-right: 48px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.m-leistungen-blatt__marke span { font-weight: 600; color: var(--orange-text); }
.m-leistungen-blatt__bild, #leistungen .m-leistungen__mehr-bild { position: relative; overflow: hidden; margin-top: 10px; border-radius: var(--r); aspect-ratio: 16 / 9; background: var(--bg-2); }
@media (min-width: 768px) { .m-leistungen-blatt__bild, #leistungen .m-leistungen__mehr-bild { aspect-ratio: 2.35 / 1; } }
.m-leistungen-blatt__ebene { position: absolute; inset: 0; }
.m-leistungen-blatt__bild picture, #leistungen .m-leistungen__mehr-bild picture { display: block; width: 100%; height: 100%; }
.m-leistungen-blatt__bild img, #leistungen .m-leistungen__mehr-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.m-leistungen-blatt__titel { margin-top: 22px; font-size: clamp(30px, 7.6vw, 42px); line-height: 1.04; letter-spacing: -.032em; font-weight: 700; }
.m-leistungen-blatt p, #leistungen .m-leistungen__mehr p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.m-leistungen-blatt .m-leistungen-blatt__marke { margin-top: 0; font-size: 11.5px; color: var(--muted); }
.m-leistungen-blatt .m-leistungen__mehr-lead, #leistungen .m-leistungen__mehr .m-leistungen__mehr-lead { margin-top: 12px; font-size: 20px; line-height: 1.4; letter-spacing: -.014em; color: var(--ink); }
.m-leistungen-blatt h3, #leistungen .m-leistungen__mehr h4 { margin-top: 30px; font-size: 19px; letter-spacing: -.015em; font-weight: 700; }
.m-leistungen__punkte { list-style: none; display: grid; gap: 11px; margin-top: 14px; }
.m-leistungen__punkte li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.m-leistungen__punkte li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--orange-zart); }
.m-leistungen__punkte li::after { content: ""; position: absolute; left: 8px; top: 6px; width: 5px; height: 9px; border-right: 2px solid var(--orange-text); border-bottom: 2px solid var(--orange-text); transform: rotate(45deg); }
.m-leistungen-blatt .m-leistungen__mehr-aktion, #leistungen .m-leistungen__mehr .m-leistungen__mehr-aktion { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.m-leistungen__mehr-aktion .knopf { flex: 1 1 220px; }
@media (min-width: 768px) { .m-leistungen__mehr-aktion .knopf { flex: 0 0 auto; } }
.m-leistungen-blatt__weiter { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.m-leistungen-blatt__weiter > p { font-size: 11.5px !important; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) !important; margin-top: 0 !important; }
.m-leistungen-blatt__weiter ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.m-leistungen-blatt__weiter a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 980px;
  background: var(--bg-2); font-size: 15px; font-weight: 600; letter-spacing: -.01em; transition: background-color .2s, transform .12s;
}
.m-leistungen-blatt__weiter a:hover { background: rgba(0, 0, 0, .08); }
.m-leistungen-blatt__weiter a:active { transform: scale(.97); }
.m-leistungen-blatt__weiter a .mono { font-size: 12px; color: var(--orange-text); }

.m-leistungen-blatt > * { animation: m-leistungen-auf .7s var(--sanft) both; }
.m-leistungen-blatt > :nth-child(2) { animation-delay: .06s; }
.m-leistungen-blatt > :nth-child(3) { animation-delay: .12s; }
.m-leistungen-blatt > :nth-child(4) { animation-delay: .17s; }
.m-leistungen-blatt > :nth-child(n+5) { animation-delay: .22s; }
.m-leistungen-blatt__ebene { animation: m-leistungen-ruhe 1.6s var(--sanft) both; }
@keyframes m-leistungen-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes m-leistungen-ruhe { from { transform: scale(1.07); } to { transform: none; } }

.m-leistungen__geraete { margin-top: clamp(84px, 13vw, 150px); }
.m-leistungen__geraete-kopf { display: grid; gap: 20px; margin-bottom: 22px; }
.m-leistungen__geraete-kopf .titel-m .serif { font-weight: 400; }
.m-leistungen__geraete-lead { margin-top: 12px; max-width: 46ch; font-size: 17px; line-height: 1.47; color: var(--muted); }
@media (min-width: 900px) { .m-leistungen__geraete-kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; } }
.m-leistungen__geraete-steuerung { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#leistungen .m-leistungen__filter { display: none; }
.js #leistungen .m-leistungen__filter { display: flex; flex-wrap: wrap; gap: 8px; }
.m-leistungen__filter .chip { min-height: 40px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); transition: background-color .25s, color .25s, transform .12s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.m-leistungen__filter .chip::after { content: ""; position: absolute; inset: -2px; }
.m-leistungen__filter .chip { position: relative; }
.m-leistungen__filter .chip:hover { background: rgba(0, 0, 0, .08); }
.m-leistungen__filter .chip:active { transform: scale(.96); }
.m-leistungen__filter .chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
#leistungen .m-leistungen__pfeile { display: none; gap: 10px; }
@media (min-width: 900px) and (hover: hover) { .js #leistungen .m-leistungen__pfeile { display: flex; } }
.m-leistungen__pfeil { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .06); transition: background-color .2s, opacity .25s, transform .12s; }
.m-leistungen__pfeil:hover { background: rgba(0, 0, 0, .1); }
.m-leistungen__pfeil:active { transform: scale(.94); }
.m-leistungen__pfeil:disabled { opacity: .3; cursor: default; transform: none; }
.m-leistungen__pfeil svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.m-leistungen__schiene {
  --aussen: max(var(--rand), calc((100% - var(--max)) / 2));
  position: relative; display: flex; gap: 14px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--aussen); padding: 6px var(--aussen) 30px; scrollbar-width: none;
}
.m-leistungen__schiene::-webkit-scrollbar { display: none; }
.m-leistungen__geraet { flex: 0 0 min(80%, 310px); scroll-snap-align: start; transition: opacity .45s var(--sanft), transform .5s var(--feder); }
.m-leistungen__geraet.ist-gedimmt { opacity: .32; transform: scale(.96); }
.m-leistungen__geraet-karte { display: flex; flex-direction: column; height: 100%; background: var(--card); border-radius: var(--r-gross); overflow: hidden; box-shadow: var(--lk-schatten); }
.m-leistungen__geraet img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #e9e9ec; }
.m-leistungen__geraet-text { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 14px; }
.m-leistungen__geraet-art { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.m-leistungen__geraet h4 { margin-top: 8px; font-size: 25px; line-height: 1.08; letter-spacing: -.028em; font-weight: 700; }
.m-leistungen__geraet-motto { margin-top: 3px; font-size: 19px; line-height: 1.25; color: var(--orange-text); }
.m-leistungen__geraet-text > p:not([class]) { margin-top: 10px; font-size: 15px; line-height: 1.47; color: var(--muted); }
.m-leistungen__pdf { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; min-height: 44px; margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 600; color: var(--orange-text); }
.m-leistungen__pdf::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0 4.5-4.5M12 15l-4.5-4.5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0 4.5-4.5M12 15l-4.5-4.5M5 20h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.m-leistungen__pdf .mono { font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--orange-zart); }
.m-leistungen__pdf:hover { text-decoration: underline; text-underline-offset: 3px; }

.m-leistungen__geraet--beratung .m-leistungen__geraet-karte { background: var(--navy); color: #fff; }
.m-leistungen__geraet--beratung .m-leistungen__geraet-text { justify-content: flex-end; padding: 26px 22px 22px; }
.m-leistungen__geraet--beratung .m-leistungen__geraet-art { color: rgba(255, 255, 255, .62); }
.m-leistungen__geraet--beratung h4 { font-size: 30px; }
.m-leistungen__geraet--beratung .m-leistungen__geraet-text > p:not([class]) { color: rgba(255, 255, 255, .78); }
.m-leistungen__beratung-knoepfe { display: grid; gap: 10px; margin-top: 22px; }
.m-leistungen__geraet--beratung .knopf--zweit { --k-bg: rgba(255, 255, 255, .12); --k-fg: #fff; }
.m-leistungen__geraet--beratung .knopf--zweit:hover { --k-bg: rgba(255, 255, 255, .18); }

.m-leistungen__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .m-leistungen__voll, .m-leistungen__voll .m-leistungen__innen,
  #leistungen[data-ansicht="waerme"] .m-leistungen__voll, #leistungen[data-ansicht="waerme"] .m-leistungen__voll .m-leistungen__innen { transform: none; }
  .m-leistungen__voll { opacity: 0; transition: opacity .35s, visibility 0s linear .35s; }
  #leistungen[data-ansicht="waerme"] .m-leistungen__voll { opacity: 1; transition: opacity .35s, visibility 0s; }
  .m-leistungen__voll .m-leistungen__innen { transition: none; }
  .m-leistungen__flaeche, .m-leistungen__daumen, .m-leistungen__geraet { transition-duration: .01s; }
  .m-leistungen-blatt > *, .m-leistungen-blatt__ebene { animation: none; }
}

.m-leistungen__link { min-height: 44px; }
.m-leistungen__filter .chip { min-height: 44px; }

@supports not (background: linear-gradient(90deg in oklch, red, blue)) {
  .m-leistungen__daumen::after { background: linear-gradient(90deg, var(--nass-1), var(--nass-2), var(--trocken), var(--warm)); }
  .m-leistungen__skala { background: linear-gradient(90deg, #000e37, var(--nass-1) 28%, var(--nass-2) 44%, var(--trocken) 70%, var(--warm) 88%, var(--orange-zart)); }
}

@media (max-width: 359px) {
  .m-leistungen__kachel:not(#leistung-wasserschaden):not(#leistung-geraete) .m-leistungen__text { padding-inline: 12px; }
  .m-leistungen__kachel:not(#leistung-wasserschaden):not(#leistung-geraete) .m-leistungen__text h3 { font-size: 16px; }
}

.js #leistungen[data-bereit="fehler"] .m-leistungen__ansicht, .js #leistungen[data-bereit="fehler"] .m-leistungen__filter,
.js #leistungen[data-bereit="fehler"] .m-leistungen__pfeile { display: none; }