/* ==========================================================================
   PERTL GMBH – Bereiche
   Layout der einzelnen Abschnitte der Startseite, in Seitenreihenfolge.
   ========================================================================== */

/* ---------- Start ---------- */

.start {
    position: relative;
    display: grid;
    align-items: end;
    min-height: min(100svh, 60rem);
    padding: calc(var(--hoehe-kopf) + 3rem) 0 clamp(2.5rem, 6vw, 5rem);
    overflow: hidden;
    background: var(--farbe-nacht);
    color: var(--farbe-text-hell);
    isolation: isolate;
}

.start__medien {
    position: absolute;
    inset: -4% 0 -4% 0;
    z-index: -2;
    will-change: transform;
}

.start__bild,
.start__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.start__video {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.start__video.ist-bereit {
    opacity: 1;
}

.start::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(23, 36, 27, 0.92) 0%, rgba(23, 36, 27, 0.62) 38%, rgba(23, 36, 27, 0.12) 72%),
        linear-gradient(to right, rgba(23, 36, 27, 0.55), transparent 65%);
}

.start__betrieb img {
    width: clamp(9.5rem, 22vw, 14rem);
    filter: brightness(0) invert(1);
}

.start h1 {
    max-width: 14ch;
    margin-top: 1rem;
    color: var(--farbe-weiss);
    text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}

.start__einleitung {
    max-width: 34rem;
    margin-top: 1.1rem;
    font-size: var(--text-xl);
    line-height: 1.45;
}

.start__leitsatz {
    position: relative;
    display: inline-block;
    margin-top: 1.5rem;
    padding-left: 3.25rem;
    font-family: var(--schrift-titel);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--farbe-sonne-hell);
}

.start__leitsatz::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2.5rem;
    height: 3px;
    border-radius: 3px;
    background: var(--farbe-sonne);
}

.start .knopfreihe {
    margin-top: 2rem;
}

.start__vertrauen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--farbe-linie-hell);
}

@media (max-width: 560px) {
    .start {
        min-height: min(100svh, 46rem);
    }

    .start .knopf {
        flex: 1 1 100%;
    }
}

/* ---------- Leistungen ---------- */

.leistungen {
    background: var(--farbe-flaeche);
    overflow-x: clip; /* Einflug-Animation darf kein seitliches Scrollen erzeugen */
}

.leistungen__raster {
    display: grid;
    gap: var(--abstand-md);
}

.leistung {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
}

.leistung h3 {
    font-size: var(--text-xl);
}

.leistung p {
    color: var(--farbe-text-leise);
}

.leistung__hinweis {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--farbe-sonne) !important;
}

.leistung__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: auto;
}

.leistung__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PV-Reinigung: großes Hauptfeld mit Foto, steht klar im Vordergrund */
.leistung--haupt {
    position: relative;
    display: grid;
    overflow: hidden;
    align-items: stretch;
    border-radius: var(--radius-gross);
    background: var(--farbe-modul);
    color: var(--farbe-text-hell);
    box-shadow: var(--schatten-tief);
}

.leistung--haupt .leistung__bild {
    height: 14rem;
}

.leistung__inhalt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    background:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 100% 4.5rem,
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 4.5rem 100%,
        linear-gradient(135deg, var(--farbe-modul), #0d1f2e);
}

.leistung__inhalt::before {
    content: "";
    width: 3rem;
    height: 4px;
    border-radius: 4px;
    background: var(--farbe-sonne);
}

.leistung--haupt h3 {
    font-size: var(--text-3xl);
    color: var(--farbe-weiss);
}

.leistung--haupt p {
    font-size: var(--text-lg);
    color: var(--farbe-text-hell);
}

.leistung--haupt .textlink {
    margin-top: 0.5rem;
    color: var(--farbe-weiss);
}

.leistung--haupt .textlink:hover {
    color: var(--farbe-nacht);
}

/* Weitere Leistungen: kompakte Karten mit Fotostreifen */
.leistung--neben {
    overflow: hidden;
    padding: 0 1.4rem 1.5rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-mittel);
    background: var(--farbe-weiss);
    box-shadow: var(--schatten-weich);
    transition: transform 0.35s var(--kurve), box-shadow 0.35s var(--kurve);
}

.leistung--neben .leistung__bild {
    width: calc(100% + 2.8rem);
    height: 9rem;
    margin: 0 -1.4rem 0.4rem;
    overflow: hidden;
}

.leistung--neben .leistung__bild img {
    transition: transform 0.6s var(--kurve);
}

.leistung--neben:hover {
    box-shadow: var(--schatten-tief);
}

.leistung--neben:hover .leistung__bild img {
    transform: scale(1.06);
}

.leistung--neben .textlink {
    margin-top: auto;
}

.leistung--neben .leistung__links .textlink {
    margin-top: 0;
}

@media (min-width: 700px) {
    .leistungen__raster {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leistung--haupt {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .leistung--haupt .leistung__bild {
        order: 2;
        height: auto;
        min-height: 20rem;
    }

    .leistung__inhalt {
        justify-content: center;
    }
}

/* ---------- PV-Reinigung: Einstieg ---------- */

.pv-einstieg .zweispalter__bild {
    max-width: 26rem;
    justify-self: center;
    width: 100%;
}

/* ---------- PV-Reinigung: Warum reinigen? (Modulfeld) ---------- */

.pv-warum {
    overflow: hidden;
}

/* Fragetitel: Wörter bleiben ganz, das Fragezeichen ist der Blickfang */
.fragetitel__wort {
    display: inline-block;
}

@media (min-width: 480px) {
    .fragetitel__wort--fest {
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .fragetitel {
        font-size: 1.5rem;
    }
}

/* Großes Fragezeichen neben Titel und Einleitung (ab Tablet quer); darunter bleibt das kleine im Titel */
.bereich__kopf--frage {
    position: relative;
}

.fragezeichen-gross {
    display: none;
}

@media (min-width: 900px) {
    .bereich__kopf--frage {
        padding-right: 9rem;
    }

    /* Das Fragezeichen sitzt direkt hinter dem letzten Wort und ragt groß über die Zeile hinaus */
    .bereich__kopf--frage .fragetitel {
        position: relative;
    }

    .bereich__kopf--frage .fragetitel__zeichen {
        position: absolute;
        margin: -0.62em 0 0 0.12em;
        font-size: 3.6em;
        font-weight: 300;
        line-height: 1;
    }
}

/* Hinweiskasten (z. B. „Regen reinigt nicht alles") */
.hinweis {
    position: relative;
    margin-top: var(--abstand-lg);
    padding: 1.5rem 1.25rem 1.5rem 1.5rem;
    border: 1px solid rgba(233, 213, 168, 0.35);
    border-left: 5px solid var(--farbe-sonne);
    border-radius: var(--radius-mittel);
    background: linear-gradient(135deg, rgba(233, 213, 168, 0.14), rgba(244, 251, 242, 0.04));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.hinweis__kopf {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.hinweis__symbol {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-rund);
    background: var(--farbe-sonne);
    color: var(--farbe-nacht);
    box-shadow: 0 0 0 6px rgba(204, 138, 63, 0.22);
}

.hinweis__titel {
    margin: 0;
    font-family: var(--schrift-titel);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--farbe-sonne-hell);
}

.hinweis .textspalten p {
    color: var(--farbe-text-hell);
}

.fragetitel__zeichen {
    display: inline-block;
    margin-left: 0.06em;
    color: var(--farbe-sonne);
    font-size: 1.25em;
    line-height: 1;
    transform-origin: 50% 85%;
}

.modulfeld {
    display: grid;
    gap: 6px;
    padding: 6px;
    border-radius: var(--radius-mittel);
    background: #c9d4d8;
    box-shadow: var(--schatten-tief);
}

@media (min-width: 560px) {
    .modulfeld {
        grid-template-columns: repeat(2, 1fr);
    }

    .modulfeld__zelle:last-child {
        grid-column: 1 / -1;
    }
}

.modulfeld__zelle {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    background: var(--farbe-modul);
    color: var(--farbe-text-hell);
}

/* Schmutz-Kachel: Modulfoto, darüber Schmutz-Stufen, die der Regler (--v, 0–100) einblendet */
.schmutzkachel {
    display: flex;
    flex-direction: column;
}

.schmutzkachel__bild {
    position: relative;
    height: 7rem;
    flex-shrink: 0;
    overflow: hidden;
}

.schmutzkachel__bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.schmutzkachel__stufe {
    opacity: clamp(0, (var(--v) - var(--ab)) / (var(--bis) - var(--ab)), 1);
}

/* Text steht unter dem Foto auf dunklem Grund – bleibt bei jedem Schmutzgrad lesbar */
.schmutzkachel__text {
    flex: 1;
    padding: 1rem 1.1rem 0.9rem;
    background: #0d1c29;
}

.schmutzkachel__text h3 {
    font-size: var(--text-xl);
    color: var(--farbe-weiss);
}

.schmutzkachel__text p {
    margin-top: 0.45rem;
    font-size: var(--text-sm);
    color: #d5e3ea;
}

/* Regler ist unten an das Modulfeld angedockt: gleicher Rahmen, gemeinsame Ecken */
.schmutzfeld .modulfeld {
    border-radius: var(--radius-mittel) var(--radius-mittel) 0 0;
    box-shadow: none;
}

.schmutzfeld {
    border-radius: var(--radius-mittel);
    box-shadow: var(--schatten-tief);
}

.schmutzregler {
    padding: 1rem 1.4rem 0.9rem;
    border: 6px solid #c9d4d8;
    border-top: 0;
    border-radius: 0 0 var(--radius-mittel) var(--radius-mittel);
    background: var(--farbe-nacht);
}

.schmutzregler__skala {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--farbe-text-hell-leise);
}

.schmutzregler__zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.schmutzregler label {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--farbe-text-hell);
}

.schmutzregler output {
    font-family: var(--schrift-titel);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--farbe-sonne-hell);
    font-variant-numeric: tabular-nums;
}

.schmutzregler input {
    display: block;
    width: 100%;
    height: 1.75rem;
    margin: 0.2rem 0 0;
    background: transparent;
    accent-color: var(--farbe-sonne);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.schmutzregler input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--farbe-sonne) calc(var(--v) * 1%), rgba(255, 255, 255, 0.28) calc(var(--v) * 1%));
}

.schmutzregler input::-moz-range-track {
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.28);
}

.schmutzregler input::-moz-range-progress {
    height: 6px;
    border-radius: 6px;
    background: var(--farbe-sonne);
}

.schmutzregler input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: calc(3px - 0.625rem);
    border: 3px solid var(--farbe-weiss);
    border-radius: 50%;
    background: var(--farbe-sonne);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.schmutzregler input::-moz-range-thumb {
    width: 0.9rem;
    height: 0.9rem;
    border: 3px solid var(--farbe-weiss);
    border-radius: 50%;
    background: var(--farbe-sonne);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

@media (min-width: 1040px) {
    .modulfeld {
        grid-template-columns: repeat(5, 1fr);
    }

    .modulfeld__zelle:last-child {
        grid-column: auto;
    }
}

.pv-warum .textspalten {
    margin-top: var(--abstand-xl);
    color: var(--farbe-text-hell);
}

/* Kompakte Anordnung: dunkler Grund mit feinem Modulraster, Kacheln und Hinweis nebeneinander */
.pv-warum {
    padding-block: calc(var(--abstand-bereich) * 0.6);
    background:
        radial-gradient(60rem 26rem at 88% -10%, rgba(204, 138, 63, 0.2), transparent 70%),
        repeating-linear-gradient(90deg, rgba(244, 251, 242, 0.045) 0 1px, transparent 1px 5.5rem),
        repeating-linear-gradient(0deg, rgba(244, 251, 242, 0.045) 0 1px, transparent 1px 3.4rem),
        linear-gradient(160deg, var(--farbe-modul) 0%, #14301f 55%, var(--farbe-nacht) 100%);
}

.pv-warum .bereich__kopf {
    margin-bottom: var(--abstand-lg);
}

.pv-warum .fragetitel {
    color: var(--farbe-sonne);
    text-shadow: 0 0 18px rgba(204, 138, 63, 0.55);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
}

.pv-warum .bereich__kopf p {
    max-width: 44rem;
    margin-top: 0.75rem;
    font-size: var(--text-md);
}

.warum-raster {
    display: grid;
    gap: var(--abstand-md);
}

.warum-raster .hinweis {
    margin-top: 0;
    padding: 1.15rem 1.25rem;
}

.warum-raster .hinweis__kopf {
    margin-bottom: 0.7rem;
}

.warum-raster .hinweis__symbol {
    width: 2.4rem;
    height: 2.4rem;
}

.warum-raster .hinweis__symbol svg {
    width: 21px;
    height: 21px;
}

.pv-warum .hinweis .textspalten {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 0;
    font-size: var(--text-sm);
}

.pv-warum .schmutzkachel__bild {
    height: 5.25rem;
}

.pv-warum .schmutzkachel__text {
    padding: 0.7rem 0.8rem 0.75rem;
}

.pv-warum .schmutzkachel__text h3 {
    font-size: var(--text-md);
}

.pv-warum .schmutzkachel__text p {
    hyphens: auto;
    overflow-wrap: anywhere;
    margin-top: 0.3rem;
    font-size: var(--text-xs);
    line-height: 1.5;
}

.pv-warum .schmutzregler {
    padding: 0.6rem 1rem 0.55rem;
}

.pv-warum .schmutzregler label {
    font-size: var(--text-sm);
}

.pv-warum .schmutzregler output {
    font-size: var(--text-lg);
}

@media (min-width: 1200px) {
    .warum-raster {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .warum-raster .schmutzfeld {
        display: flex;
        flex-direction: column;
    }

    .warum-raster .modulfeld {
        flex: 1;
    }

    /* Kacheln füllen die Höhe des Hinweises: das Foto wächst, der Text bleibt kompakt */
    .warum-raster .schmutzkachel__bild {
        flex: 1;
        height: auto;
        min-height: 5.25rem;
    }

    .warum-raster .schmutzkachel__text {
        flex: none;
        height: 11.4rem;
    }

    .warum-raster .schmutzkachel__text h3 {
        font-size: 0.9rem;
        hyphens: auto;
    }
}

/* Handy: eigene Variante – jede Kachel als flache Zeile (Foto links, Text rechts),
   damit alle fünf Fotos samt Regler auf einen Bildschirm passen */
@media (max-width: 559px) {
    .pv-warum .modulfeld {
        gap: 4px;
        padding: 4px;
    }

    .pv-warum .schmutzkachel {
        flex-direction: row;
        align-items: stretch;
    }

    .pv-warum .schmutzkachel__bild {
        flex: 0 0 34%;
        height: auto;
        min-height: 4.6rem;
    }

    .pv-warum .schmutzkachel__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0.4rem 0.65rem;
    }

    .pv-warum .schmutzkachel__text h3 {
        font-size: 0.875rem;
    }

    .pv-warum .schmutzkachel__text p {
        margin-top: 0.1rem;
        font-size: 0.72rem;
        line-height: 1.35;
        hyphens: manual;
        overflow-wrap: normal;
    }

    .pv-warum .schmutzregler {
        padding: 0.45rem 0.8rem 0.4rem;
        border-width: 4px;
    }

    .pv-warum .schmutzregler label {
        font-size: 0.8rem;
    }

    .pv-warum .schmutzregler output {
        font-size: 1rem;
    }
}

/* ---------- PV-Reinigung: Verfahren ---------- */

.pv-verfahren .leise {
    font-size: var(--text-sm);
    color: var(--farbe-text-leise);
}

.marken {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--abstand-lg);
}

.marken li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem 0.45rem 0.6rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-rund);
    background: var(--farbe-weiss);
    font-size: var(--text-sm);
    font-weight: 500;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 6px rgba(23, 36, 27, 0.06);
}

.marken li::before {
    content: '';
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--farbe-blatt)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E")
        center / 70% no-repeat;
}

.verfahren {
    margin-top: var(--abstand-xl);
}

/* Foto in „Unsere PV-Reinigung" bekommt die breitere Spalte */
@media (min-width: 900px) {
    .pv-verfahren .zweispalter--bild-links {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: clamp(2rem, 4vw, 3.5rem);
    }
}

.verfahren__einleitung {
    max-width: 52rem;
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.5;
    color: var(--farbe-tanne);
}

/* Karten mit leichter Tiefe: heller Rand oben, zwei Schattenebenen, sanftes Anheben */
.vorteilskarten {
    display: grid;
    gap: var(--abstand-md);
    margin-block: var(--abstand-lg);
    perspective: 1200px;
}

@media (min-width: 640px) {
    .vorteilskarten {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1040px) {
    .vorteilskarten {
        grid-template-columns: repeat(4, 1fr);
    }
}

.vorteilskarte {
    position: relative;
    padding: 1.6rem 1.4rem 1.5rem;
    border: 1px solid rgba(40, 80, 50, 0.1);
    border-radius: var(--radius-mittel);
    background: linear-gradient(180deg, #ffffff 0%, #f6fbf4 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 1) inset,
        0 -3px 0 rgba(40, 80, 50, 0.07) inset,
        0 2px 4px rgba(23, 36, 27, 0.05),
        0 14px 28px -10px rgba(23, 36, 27, 0.18);
}

.vorteilskarte__symbol {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.1rem;
    border-radius: 0.9rem;
    background: linear-gradient(145deg, #3a8d54, var(--farbe-tanne));
    color: var(--farbe-weiss);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 -2px 0 rgba(0, 0, 0, 0.18) inset,
        0 8px 14px -6px rgba(40, 80, 50, 0.55);
}

.vorteilskarte__symbol svg {
    width: 1.6rem;
    height: 1.6rem;
}

.vorteilskarte:nth-child(2) .vorteilskarte__symbol {
    background: linear-gradient(145deg, #2f6f93, var(--farbe-modul));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 -2px 0 rgba(0, 0, 0, 0.18) inset,
        0 8px 14px -6px rgba(18, 40, 58, 0.55);
}

.vorteilskarte:nth-child(3) .vorteilskarte__symbol {
    background: linear-gradient(145deg, #e0a45c, #b97a31);
    color: var(--farbe-nacht);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 -2px 0 rgba(0, 0, 0, 0.14) inset,
        0 8px 14px -6px rgba(185, 122, 49, 0.6);
}

.vorteilskarte h3 {
    font-size: var(--text-lg);
    letter-spacing: 0;
}

.vorteilskarte p {
    margin-top: 0.45rem;
    font-size: var(--text-sm);
    color: var(--farbe-text-leise);
}

@media (hover: hover) {
    .vorteilskarte {
        transition: transform 0.35s var(--kurve), box-shadow 0.35s var(--kurve);
    }

    .vorteilskarte:hover {
        transform: translateY(-6px) rotateX(3deg);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 1) inset,
            0 -3px 0 rgba(40, 80, 50, 0.07) inset,
            0 4px 8px rgba(23, 36, 27, 0.06),
            0 26px 40px -14px rgba(23, 36, 27, 0.28);
    }
}

.verfahren__fazit {
    max-width: 52rem;
    padding: 0.2rem 0 0.2rem 1.1rem;
    border-left: 4px solid var(--farbe-sonne);
    color: var(--farbe-text-leise);
}

/* ---------- PV-Reinigung: Ablauf ---------- */
/* Dezenter Hintergrund: warmes Sonnenlicht oben links, Reinwasser-Hauch unten rechts, feines Modulraster */

.pv-ablauf {
    isolation: isolate;
    overflow: clip;
    background:
        radial-gradient(ellipse 50% 55% at 10% 30%, rgba(233, 213, 168, 0.5), transparent 70%),
        radial-gradient(ellipse 55% 60% at 96% 62%, rgba(196, 224, 228, 0.55), transparent 70%),
        radial-gradient(ellipse 45% 55% at 55% 45%, rgba(140, 194, 152, 0.14), transparent 75%),
        linear-gradient(180deg, var(--farbe-hintergrund), var(--farbe-flaeche) 45%, var(--farbe-hintergrund));
}

.pv-ablauf::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(40, 80, 50, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 80, 50, 0.06) 1px, transparent 1px);
    background-size: 56px 34px;
    mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 10%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000 10%, transparent 75%);
    pointer-events: none;
}

/* ---------- PV-Reinigung: Eignung & Zeitpunkt ---------- */

.pv-wissen__raster {
    display: grid;
    gap: var(--abstand-xl);
}

.pv-wissen h2 {
    font-size: var(--text-2xl);
    margin-bottom: var(--abstand-md);
}

.pv-wissen article {
    padding-top: var(--abstand-md);
    border-top: 2px solid var(--farbe-tanne);
}

@media (min-width: 860px) {
    .pv-wissen__raster {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 6vw, 5rem);
    }
}

.pv-faq h2 {
    text-align: left;
}

/* ---------- Osmose-Reinigung ---------- */

.osmose .zweispalter__bild {
    max-width: 24rem;
    justify-self: center;
    width: 100%;
}

.osmose .bildrahmen--hoch {
    aspect-ratio: 9 / 14;
}

.osmose__erklaerung {
    display: grid;
    gap: var(--abstand-xl);
    margin-top: var(--abstand-bereich);
}

.osmose__erklaerung h3,
.gebaeude__warum h3,
.strahlen__einsatz h3 {
    margin-bottom: var(--abstand-md);
}

.osmose__kurz {
    align-self: start;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--radius-gross);
    background: var(--farbe-weiss);
    box-shadow: var(--schatten-weich);
}

.osmose__kurz p {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--farbe-tanne);
}

.osmose__kurz .hakenliste {
    margin-top: var(--abstand-md);
}

@media (min-width: 940px) {
    .osmose__erklaerung {
        grid-template-columns: 1.3fr 0.9fr;
        gap: clamp(2.5rem, 6vw, 5rem);
    }
}

/* Vorteile als Pluspunkte: Tropfen mit Haken, jede Zeile eine eigene Karte */
.pluspunkte,
.einsatzpunkte {
    display: grid;
    gap: 0.75rem;
    margin-block: var(--abstand-lg);
}

.pluspunkte li,
.einsatzpunkte li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-mittel);
}

.pluspunkte li {
    border: 1px solid rgba(18, 40, 58, 0.08);
    background: linear-gradient(180deg, #ffffff, #f4fafb);
    box-shadow:
        0 1px 0 #fff inset,
        0 -3px 0 rgba(18, 40, 58, 0.06) inset,
        0 10px 22px -12px rgba(18, 40, 58, 0.28);
}

.pluspunkte__symbol {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    /* Tropfenform: Quadrat mit einer spitzen Ecke, um 45° gedreht */
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #3f93b8, var(--farbe-modul-hell));
    color: #fff;
    box-shadow: 0 6px 12px -5px rgba(18, 40, 58, 0.6);
}

.pluspunkte__symbol svg {
    width: 1.35rem;
    height: 1.35rem;
    transform: rotate(-45deg);
}

.pluspunkte h4,
.einsatzpunkte h4 {
    font-size: var(--text-lg);
}

.pluspunkte p,
.einsatzpunkte p {
    margin-top: 0.2rem;
    font-size: var(--text-sm);
    color: var(--farbe-text-leise);
}

.einsatzpunkte li {
    border: 1.5px dashed rgba(18, 40, 58, 0.22);
    background: rgba(255, 255, 255, 0.55);
}

.einsatzpunkte__symbol {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    background: var(--farbe-weiss);
    color: var(--farbe-modul-hell);
    box-shadow: 0 2px 6px rgba(18, 40, 58, 0.12);
}

.einsatzpunkte__symbol svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* ---------- Gebäudereinigung ---------- */

.gebaeude__einstieg {
    display: grid;
    gap: var(--abstand-xl);
    align-items: center;
}

.gebaeude__einstieg > div:first-child > * + * {
    margin-top: var(--abstand-md);
}

.gebaeude__fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.gebaeude__fotos figure:last-child {
    margin-top: 2.5rem;
}

@media (min-width: 980px) {
    .gebaeude__einstieg {
        grid-template-columns: 1.1fr 0.9fr;
        gap: clamp(2.5rem, 6vw, 5rem);
    }
}

.gebaeude__text {
    display: grid;
    gap: var(--abstand-lg);
    margin-top: var(--abstand-xl);
    padding-top: var(--abstand-lg);
    border-top: 1px solid var(--farbe-linie);
}

@media (min-width: 820px) {
    .gebaeude__text {
        grid-template-columns: 1fr 1fr;
        gap: var(--abstand-xl);
    }

    .gebaeude__text p + p {
        margin-top: 0;
    }
}

.galerie-einbettung {
    max-width: 22rem;
    margin: var(--abstand-xl) auto 0;
    overflow: hidden;
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-tief);
}

.gebaeude__warum {
    margin-top: var(--abstand-bereich);
}

.leistungsliste {
    display: grid;
    gap: 0 var(--abstand-xl);
    margin-block: var(--abstand-lg);
    counter-reset: none;
}

.leistungsliste li {
    padding: 1.15rem 0;
    border-top: 1px solid var(--farbe-linie);
}

.leistungsliste h4 {
    font-size: var(--text-xl);
}

.leistungsliste p {
    margin-top: 0.3rem;
    font-size: var(--text-sm);
    color: var(--farbe-text-leise);
}

@media (min-width: 720px) {
    .leistungsliste {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1040px) {
    .leistungsliste {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- Gebäudereinigung: neues Layout ---------- */

.gebaeude {
    overflow-x: clip;
    background:
        radial-gradient(50rem 30rem at 100% 0%, rgba(140, 194, 152, 0.18), transparent 70%),
        var(--farbe-hintergrund);
}

/* Einstieg: Text links, große Fotocollage rechts */
@media (min-width: 980px) {
    .gebaeude .gebaeude__einstieg {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
        align-items: center;
        gap: clamp(2rem, 4vw, 4rem);
    }
}

.gebaeude .gebaeude__fotos {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    gap: 0;
    padding-bottom: 3rem;
}

.gebaeude .gebaeude__foto:first-child {
    grid-column: 1 / 11;
    grid-row: 1;
    z-index: 1;
}

.gebaeude .gebaeude__foto:last-child {
    grid-column: 7 / 13;
    grid-row: 1;
    align-self: end;
    z-index: 2;
    margin: 0 0 -3rem;
    border: 6px solid var(--farbe-weiss);
    aspect-ratio: 4 / 5;
}

.gebaeude .gebaeude__foto figcaption {
    font-size: var(--text-sm);
}

@media (max-width: 979px) {
    .gebaeude .gebaeude__fotos {
        max-width: 34rem;
        margin: var(--abstand-lg) auto 0;
    }
}

/* Zwei Absätze als hervorgehobenes Textband */
.gebaeude .gebaeude__text {
    margin-top: calc(var(--abstand-xl) + 1rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 0;
    border-left: 5px solid var(--farbe-tanne);
    border-radius: var(--radius-mittel);
    background: var(--farbe-weiss);
    box-shadow: var(--schatten-weich);
}

/* Leistungen als nummerierte Karten */
.leistungsliste--karten {
    gap: var(--abstand-md);
    counter-reset: leistung;
}

.leistungsliste--karten li {
    position: relative;
    padding: 1.5rem 1.4rem 1.4rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-mittel);
    background: var(--farbe-weiss);
    box-shadow: var(--schatten-weich);
    counter-increment: leistung;
    transition: transform 0.35s var(--kurve), box-shadow 0.35s var(--kurve), border-color 0.35s;
}

.leistungsliste--karten li::before {
    content: counter(leistung, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.9rem;
    border-radius: 0.8rem;
    background: linear-gradient(160deg, var(--farbe-blatt), var(--farbe-tanne));
    color: var(--farbe-weiss);
    font-family: var(--schrift-titel);
    font-weight: 700;
    box-shadow: 0 3px 0 #1a3a22, 0 8px 14px -6px rgba(23, 36, 27, 0.5);
}

.leistungsliste--karten li::after {
    content: "";
    position: absolute;
    inset: auto 1.4rem 0;
    height: 3px;
    border-radius: 3px;
    background: var(--farbe-sonne);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--kurve);
}

.leistungsliste--karten li:hover {
    border-color: rgba(40, 80, 50, 0.3);
    box-shadow: var(--schatten-tief);
}

.leistungsliste--karten li:hover::after {
    transform: scaleX(1);
}

/* Warum: dunkles Band mit vier Glas-Karten */
.gebaeude .gebaeude__warum {
    padding: clamp(1.75rem, 5vw, 3.25rem);
    border-radius: var(--radius-gross);
    background:
        linear-gradient(rgba(244, 251, 242, 0.05) 1px, transparent 1px) 0 0 / 100% 3.4rem,
        linear-gradient(90deg, rgba(244, 251, 242, 0.05) 1px, transparent 1px) 0 0 / 5.5rem 100%,
        linear-gradient(150deg, var(--farbe-tanne), var(--farbe-nacht));
    color: var(--farbe-text-hell);
    box-shadow: var(--schatten-tief);
}

.gebaeude .gebaeude__warum h3 {
    color: var(--farbe-weiss);
}

.gebaeude .gebaeude__warum > p {
    max-width: 52rem;
    color: var(--farbe-text-hell-leise);
}

.gebaeude .gebaeude__warum .merkmale {
    gap: var(--abstand-md);
}

.gebaeude .gebaeude__warum .merkmale__punkt {
    padding: 1.3rem 1.25rem;
    border: 1px solid rgba(244, 251, 242, 0.16);
    border-top: 3px solid var(--farbe-sonne);
    border-radius: var(--radius-mittel);
    background: rgba(244, 251, 242, 0.07);
    backdrop-filter: blur(4px);
}

.gebaeude .gebaeude__warum dt {
    color: var(--farbe-sonne-hell);
}

.gebaeude .gebaeude__warum dd {
    color: var(--farbe-text-hell);
}

/* ---------- Trockeneis- & Laserreinigung (Partner) ---------- */

.strahlen {
    overflow: hidden;
    isolation: isolate;
}

.strahlen__kulisse {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: -1;
    height: min(46rem, 100%);
}

.strahlen__kulisse img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    opacity: 0.42;
}

.strahlen__kulisse::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(23, 36, 27, 0.35), var(--farbe-nacht) 96%),
        linear-gradient(to right, rgba(23, 36, 27, 0.85), transparent 80%);
}

.strahlen__einstieg {
    display: grid;
    gap: var(--abstand-xl);
    align-items: end;
}

.strahlen__einstieg > div > * + * {
    margin-top: var(--abstand-md);
}

@media (min-width: 940px) {
    .strahlen__einstieg {
        grid-template-columns: 1.3fr 0.8fr;
        gap: clamp(2.5rem, 6vw, 5rem);
    }
}

.partner {
    padding: 1.5rem;
    border: 1px solid var(--farbe-linie-hell);
    border-radius: var(--radius-mittel);
    background: rgba(23, 36, 27, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--text-sm);
}

.partner__kopf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.partner__kopf img {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    background: var(--farbe-weiss);
}

.partner__kopf h3 {
    font-size: var(--text-xl);
}

.partner__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    font-weight: 600;
}

.strahlen__einsatz {
    margin-top: var(--abstand-bereich);
}

.strahlen .bereich__kopf {
    margin-bottom: var(--abstand-lg);
}

.strahlen .bereich__kopf h3 {
    font-size: var(--text-3xl);
}

/* ---------- Galerie ---------- */

.galerie__status {
    max-width: none;
    margin-bottom: var(--abstand-lg);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-klein);
    background: var(--farbe-hintergrund);
    color: var(--farbe-text-leise);
    font-size: var(--text-sm);
}

.galerie__status[data-zustand='fehler'] {
    background: #fbe6e3;
    color: var(--farbe-fehler);
}

.galerie-film {
    display: grid;
    gap: var(--abstand-lg);
    align-items: center;
}

.galerie-film__buehne {
    position: relative;
    width: min(100%, 21rem);
    aspect-ratio: 9 / 16;
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--radius-gross);
    background: var(--farbe-nacht);
    box-shadow: var(--schatten-tief);
}

.galerie-film__buehne video,
.galerie__video-ersatz {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galerie__video-ersatz {
    max-width: 21rem;
    margin-inline: auto;
    border-radius: var(--radius-gross);
}

.galerie-film__pfeil {
    position: absolute;
    top: 50%;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--farbe-tanne);
    font-size: 1.5rem;
    line-height: 1;
    transform: translateY(-50%);
}

.galerie-film__pfeil--zurueck {
    left: 0.6rem;
}

.galerie-film__pfeil--weiter {
    right: 0.6rem;
}

.galerie-film__punkte {
    position: absolute;
    inset: 0.75rem 0 auto 0;
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.galerie-film__punkt {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 4px, transparent 4.5px);
}

.galerie-film__punkt.ist-aktiv {
    background: radial-gradient(circle, var(--farbe-sonne) 0 5.5px, transparent 6px);
}

.galerie-film figcaption h3 {
    font-size: var(--text-3xl);
}

.galerie-film figcaption p {
    margin-top: var(--abstand-sm);
    font-size: var(--text-xl);
    color: var(--farbe-text-leise);
}

@media (min-width: 820px) {
    .galerie-film {
        grid-template-columns: 21rem 1fr;
        gap: clamp(2.5rem, 6vw, 5rem);
    }

    .galerie-film__buehne {
        margin-inline: 0;
    }
}

/* Galerie-Video: breitere Bühne, Text als Karte daneben – weniger Leerfläche */
.galerie-film__buehne {
    width: min(100%, 32rem);
    aspect-ratio: 4 / 5;
    box-shadow:
        0 3px 0 rgba(23, 36, 27, 0.25),
        0 30px 60px -24px rgba(23, 36, 27, 0.55);
}

.galerie-film figcaption {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--farbe-linie);
    border-left: 5px solid var(--farbe-sonne);
    border-radius: var(--radius-gross);
    background:
        radial-gradient(30rem 16rem at 100% 0%, rgba(140, 194, 152, 0.18), transparent 70%),
        var(--farbe-weiss);
    box-shadow: var(--schatten-weich);
}

@media (min-width: 820px) {
    .galerie-film {
        grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
        gap: clamp(1.5rem, 4vw, 3.5rem);
    }
}

.galerie-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--abstand-bereich);
    padding-bottom: var(--abstand-md);
    border-bottom: 2px solid var(--farbe-tanne);
}

.galerie-tabs button {
    min-height: 2.75rem;
    padding: 0.5rem 1.15rem;
    border: 1.5px solid rgba(40, 80, 50, 0.3);
    border-radius: var(--radius-rund);
    background: var(--farbe-weiss);
    color: var(--farbe-tanne);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve),
        border-color var(--dauer) var(--kurve);
}

.galerie-tabs button:hover {
    border-color: var(--farbe-tanne);
}

.galerie-tabs button[aria-pressed='true'] {
    border-color: var(--farbe-tanne);
    background: var(--farbe-tanne);
    color: var(--farbe-text-hell);
}

.galerie-tabs .galerie-tabs__alle {
    margin-left: auto;
    border-style: dashed;
}

@media (max-width: 560px) {
    .galerie-tabs {
        flex-wrap: nowrap;
        margin-inline: calc(-1 * var(--rand-seite));
        padding-inline: var(--rand-seite);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .galerie-tabs button {
        flex-shrink: 0;
    }

    .galerie-tabs .galerie-tabs__alle {
        margin-left: 0;
    }
}

/* Galerie-Projekte: ein einheitlicher 3D-Container für jede Kategorie */
.galerie-projekt {
    position: relative;
    margin-top: var(--abstand-bereich);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-gross);
    background:
        radial-gradient(40rem 18rem at 100% 0%, rgba(140, 194, 152, 0.16), transparent 70%),
        linear-gradient(180deg, #ffffff, #f5faf2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 3px 0 rgba(40, 80, 50, 0.1),
        0 26px 50px -24px rgba(23, 36, 27, 0.35);
    overflow: hidden;
}

.galerie-projekt::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--farbe-tanne), var(--farbe-blatt) 55%, var(--farbe-sonne));
}

.galerie-tabs ~ .galerie-projekt {
    margin-top: var(--abstand-lg);
}

.galerie-projekt__kopf {
    text-align: center;
}

.galerie-projekt__kopf p {
    max-width: 44rem;
    margin: var(--abstand-sm) auto 0;
    color: var(--farbe-text-leise);
}

/* Hinweis: wie viele Fotos eine Kategorie hat */
.galerie-projekt__anzahl {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-rund);
    background: rgba(204, 138, 63, 0.14);
    color: #8a5520;
    font-size: var(--text-xs);
    font-weight: 600;
}

.galerie-projekt__anzahl::before {
    content: "";
    width: 0.85rem;
    height: 0.7rem;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.galerie-tabs__anzahl {
    display: inline-grid;
    place-items: center;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.45rem;
    padding: 0 0.35rem;
    border-radius: var(--radius-rund);
    background: rgba(40, 80, 50, 0.1);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

[aria-pressed='true'] > .galerie-tabs__anzahl {
    background: var(--farbe-sonne);
    color: var(--farbe-nacht);
}

/* Spalten: vorhandene Bilder füllen die Breite und stehen mittig */
.galerie-projekt__stufen {
    display: grid;
    grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
    gap: clamp(0.9rem, 2vw, 1.5rem);
    margin: var(--abstand-lg) auto 0;
    perspective: 1200px;
}

.galerie-projekt--spalten-1 .galerie-projekt__stufen { --spalten: 1; max-width: 26rem; }
.galerie-projekt--spalten-2 .galerie-projekt__stufen { --spalten: 2; max-width: 52rem; }
.galerie-projekt--spalten-3 .galerie-projekt__stufen { --spalten: 3; }
.galerie-projekt--spalten-4 .galerie-projekt__stufen { --spalten: 4; }

/* Ein oder zwei Fotos behalten die Kartengröße von drei Fotos */
@media (min-width: 701px) {
    .galerie-projekt--spalten-1 .galerie-projekt__stufen,
    .galerie-projekt--spalten-2 .galerie-projekt__stufen {
        --luecke: clamp(0.9rem, 2vw, 1.5rem);
        grid-template-columns: repeat(var(--spalten), calc((100% - 2 * var(--luecke)) / 3));
        justify-content: center;
        gap: var(--luecke);
        max-width: none;
    }
}

@media (max-width: 700px) {
    .galerie-projekt--spalten-3 .galerie-projekt__stufen,
    .galerie-projekt--spalten-4 .galerie-projekt__stufen {
        --spalten: 2;
    }
}

@media (max-width: 420px) {
    .galerie-projekt__stufen {
        --spalten: 1 !important;
    }
}

.galerie-projekt__stufe {
    overflow: hidden;
    border: 1px solid rgba(40, 80, 50, 0.1);
    border-radius: var(--radius-mittel);
    background: var(--farbe-weiss);
    box-shadow: 0 3px 0 rgba(40, 80, 50, 0.1), 0 16px 30px -16px rgba(23, 36, 27, 0.45);
    transform-style: preserve-3d;
    transition: transform 0.45s var(--kurve), box-shadow 0.45s var(--kurve);
}

.galerie-projekt__stufe:hover {
    transform: translateY(-6px) rotateX(4deg);
    box-shadow: 0 5px 0 rgba(40, 80, 50, 0.12), 0 28px 40px -18px rgba(23, 36, 27, 0.5);
}

.galerie-projekt__stufe figcaption {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    font-family: var(--schrift-titel);
    font-weight: 700;
    color: var(--farbe-tanne);
}

.galerie-projekt__stufe figcaption::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--farbe-sonne);
    box-shadow: 0 0 0 4px rgba(204, 138, 63, 0.18);
}

.galerie-projekt__stufe:last-child figcaption::before {
    background: var(--farbe-blatt);
    box-shadow: 0 0 0 4px rgba(47, 123, 70, 0.18);
}

/* Beim Umschalten einer Kategorie klappen die Bilder nacheinander herein */
@keyframes stufe-herein {
    from {
        opacity: 0;
        transform: translateY(1.5rem) rotateX(-14deg) scale(0.97);
    }
}

@keyframes projekt-herein {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
}

.galerie-projekt:not([hidden]) {
    animation: projekt-herein 0.5s var(--kurve) both;
}

.galerie-projekt:not([hidden]) .galerie-projekt__stufe {
    animation: stufe-herein 0.65s var(--kurve) both;
    animation-delay: calc(0.12s + var(--stufe, 0) * 0.12s);
}

@media (prefers-reduced-motion: reduce) {
    .galerie-projekt,
    .galerie-projekt__stufe {
        animation: none !important;
    }

    .galerie-projekt__stufe:hover {
        transform: none;
    }
}

.galerie__leer {
    margin-top: var(--abstand-lg);
    color: var(--farbe-text-leise);
}

/* ---------- Galerie: Video links, Kategorien rechts ---------- */
.galerie__raster {
    display: grid;
    gap: var(--abstand-xl);
    margin-top: var(--abstand-lg);
}

/* Links: Textkarte über dem Video statt daneben */
.galerie__raster .galerie-film {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-md);
}

.galerie__raster .galerie-film figcaption {
    order: -1;
    padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
}

.galerie__raster .galerie-film figcaption h3 {
    font-size: var(--text-2xl);
}

.galerie__raster .galerie-film figcaption p {
    font-size: var(--text-sm);
}

.galerie__raster .galerie-film__buehne {
    width: min(100%, 32rem);
    margin-inline: auto;
}

/* Tabs kompakt in einer Zeile; reicht die Breite nicht, lassen sie sich seitlich wischen */
.galerie__raster .galerie-tabs {
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.galerie__raster .galerie-tabs button {
    flex-shrink: 0;
    min-height: 2.4rem;
    padding: 0.4rem 0.85rem;
    font-size: var(--text-xs);
}

.galerie .galerie__rechts .knopfreihe--mitte {
    justify-content: center;
}

@media (min-width: 1000px) {
    .galerie__raster {
        grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
        align-items: start;
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    /* Video bleibt beim Durchblättern langer Listen („Alle anzeigen") im Blick */
    .galerie__raster .galerie-film {
        position: sticky;
        top: calc(var(--hoehe-kopf) + 1.5rem);
    }

    .galerie__raster .galerie-film__buehne {
        width: 100%;
    }
}

/* „Alle anzeigen": jede Kategorie kompakt untereinander, mit kleinen Bildern */
.ist-alle .galerie-projekt {
    margin-top: var(--abstand-md);
    padding: 1rem 1.25rem 1.15rem;
    border-radius: var(--radius-mittel);
}

.ist-alle .galerie-projekt__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    text-align: left;
}

.ist-alle .galerie-projekt__kopf h3 {
    order: -1;
    font-size: var(--text-lg);
}

.ist-alle .galerie-projekt__anzahl {
    margin: 0 0 0 auto;
}

.ist-alle .galerie-projekt__kopf > p:not(.galerie-projekt__anzahl) {
    display: none;
}

.ist-alle .galerie-projekt__stufen {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.6rem;
    max-width: none;
    margin-top: 0.75rem;
}

@media (max-width: 560px) {
    .ist-alle .galerie-projekt__stufen {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.45rem;
    }

    .ist-alle .bilderwechsel__punkte {
        display: none;
    }
}

.ist-alle .galerie-projekt__stufe {
    border-radius: var(--radius-klein);
}

.ist-alle .galerie-projekt__stufe figcaption {
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: var(--text-xs);
}

.ist-alle .galerie-projekt__stufe figcaption::before {
    width: 0.45rem;
    height: 0.45rem;
    box-shadow: 0 0 0 3px rgba(204, 138, 63, 0.18);
}

.ist-alle .bilderwechsel__pfeil {
    display: none;
}

/* ---------- Über uns ---------- */

.ueber__raster {
    display: grid;
    gap: var(--abstand-xl);
    align-items: center;
}

.ueber__fotos {
    position: relative;
    max-width: 30rem;
    padding: 0 3.5rem 3rem 0;
}

.ueber__portrait {
    width: 100%;
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-tief);
}

.ueber__bus {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 38%;
    border: 5px solid var(--farbe-sand);
    border-radius: var(--radius-mittel);
    box-shadow: var(--schatten-weich);
}

.ueber__text > * + * {
    margin-top: var(--abstand-md);
}

.ueber__zitat {
    padding-left: 1.25rem;
    border-left: 4px solid var(--farbe-sonne);
}

.ueber__zitat p {
    font-family: var(--schrift-titel);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.3;
    color: var(--farbe-tanne);
}

.ueber__unterschrift {
    display: grid;
    margin-top: var(--abstand-lg);
}

.ueber__name {
    font-family: var(--schrift-titel);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--farbe-tanne);
}

.ueber__rolle {
    font-size: var(--text-sm);
    color: var(--farbe-text-leise);
}

.ueber__betrieb {
    display: grid;
    gap: var(--abstand-xl);
    margin-top: var(--abstand-bereich);
    padding-top: var(--abstand-xl);
    border-top: 1px solid rgba(40, 80, 50, 0.22);
}

.ueber__betrieb > div {
    display: grid;
    gap: var(--abstand-md) clamp(2.5rem, 6vw, 5.5rem);
}

.ueber__betrieb h3 {
    margin-top: var(--abstand-sm);
}

@media (min-width: 900px) {
    .ueber__betrieb > div {
        grid-template-columns: 1fr 1fr;
    }

    .ueber__betrieb > div > p:first-child {
        grid-row: span 3;
    }

    .ueber__betrieb h3 {
        margin-top: 0;
    }

    .ueber__betrieb p + p {
        margin-top: 0;
    }
}

@media (min-width: 900px) {
    .ueber__raster {
        grid-template-columns: 0.9fr 1.1fr;
        gap: clamp(2.5rem, 6vw, 5.5rem);
    }

}

/* ---------- Team ---------- */

.team {
    padding-top: 0;
}

.team__status {
    margin-bottom: var(--abstand-md);
    font-size: var(--text-sm);
    color: var(--farbe-text-leise);
}

.team-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--abstand-lg);
}

.team-karte {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.team-karte__foto {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-gross);
    background: var(--farbe-blatt-hell);
}

.team-karte__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-karte h3 {
    margin-top: 0.4rem;
    font-size: var(--text-xl);
}

.team-karte__rolle {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--farbe-blatt);
}

.team-karte blockquote {
    font-size: var(--text-sm);
    color: var(--farbe-text-leise);
}

.team-karte__sozial {
    display: flex;
    gap: 0.5rem;
}

.team-karte__sozial a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--farbe-tanne);
    color: var(--farbe-text-hell);
}

.team-karte__sozial svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* ---------- Warum PERTL / Einsatzgebiet ---------- */

.warum {
    background:
        linear-gradient(rgba(244, 251, 242, 0.045) 1px, transparent 1px) 0 0 / 100% 6rem,
        linear-gradient(90deg, rgba(244, 251, 242, 0.045) 1px, transparent 1px) 0 0 / 6rem 100%,
        var(--farbe-tanne);
}

.warum__raster {
    display: grid;
    gap: var(--abstand-xl);
}

.warum__raster > div > * + * {
    margin-top: var(--abstand-md);
}

.warum .hakenliste {
    margin-top: var(--abstand-lg);
}

.warum__gebiet {
    position: relative;
    align-self: start;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border-radius: var(--radius-gross);
    background: var(--farbe-nacht);
}

.warum__gebiet h2 {
    font-size: var(--text-2xl);
    padding-right: 5.5rem;
}

.warum__siegel {
    position: absolute;
    top: -1.75rem;
    right: 1.5rem;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

.ortsliste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ortsliste li {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--farbe-linie-hell);
    border-radius: var(--radius-rund);
    font-size: var(--text-sm);
}

@media (min-width: 940px) {
    .warum__raster {
        grid-template-columns: 1.15fr 0.85fr;
        gap: clamp(2.5rem, 6vw, 5rem);
    }
}

/* ---------- Kontakt ---------- */

.kontakt__raster {
    display: grid;
    gap: var(--abstand-xl);
}

.kontakt__info > * + * {
    margin-top: var(--abstand-md);
}

.ansprechpartner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: var(--abstand-lg);
}

.ansprechpartner img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.ansprechpartner p {
    font-size: var(--text-sm);
}

.kontaktwege {
    display: grid;
    margin-top: var(--abstand-lg);
    border-top: 2px solid var(--farbe-tanne);
}

.kontaktwege a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.25rem;
    border-bottom: 1px solid var(--farbe-linie);
    color: var(--farbe-text);
    text-decoration: none;
    transition: background-color var(--dauer) var(--kurve), padding var(--dauer) var(--kurve);
}

.kontaktwege a:hover {
    padding-left: 0.85rem;
    background: var(--farbe-flaeche);
}

.kontaktwege svg {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--farbe-blatt);
}

.kontaktwege a > span {
    display: grid;
}

.kontaktwege__art,
.kontaktwege__zusatz {
    font-size: var(--text-xs);
    color: var(--farbe-text-leise);
}

.kontaktwege strong {
    font-size: var(--text-lg);
    color: var(--farbe-tanne);
}

.kontakt__instagram {
    font-size: var(--text-sm);
}

.kontakt__formular {
    align-self: start;
    overflow: hidden;
    border-radius: var(--radius-gross);
    background: var(--farbe-weiss);
    box-shadow:
        0 2px 4px rgba(23, 36, 27, 0.06),
        0 30px 60px -20px rgba(23, 36, 27, 0.35);
}

/* Kopf im Stil eines PV-Moduls: dunkel mit feinem Zellraster */
.kontakt__formular-kopf {
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
    padding-right: 5.5rem;
    background:
        linear-gradient(135deg, rgba(40, 80, 50, 0.94), rgba(23, 36, 27, 0.9)),
        linear-gradient(rgba(255, 255, 255, 0.5) 2px, transparent 2px) 0 0 / 100% 4.5rem,
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 2px, transparent 2px) 0 0 / 4.5rem 100%,
        var(--farbe-tanne);
    color: var(--farbe-text-hell);
}

.kontakt__formular-kopf h3 {
    color: var(--farbe-weiss);
}

.kontakt__formular-kopf p {
    margin-top: 0.6rem;
    font-size: var(--text-sm);
    color: var(--farbe-text-hell-leise);
}

.kontakt__formular-symbol {
    position: absolute;
    top: clamp(1.25rem, 3vw, 1.75rem);
    right: clamp(1.25rem, 3vw, 1.75rem);
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--farbe-sonne);
    color: var(--farbe-nacht);
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.5);
}

.kontakt__formular-symbol svg {
    width: 1.4rem;
    height: 1.4rem;
}

.kontakt__formular .formular {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
}

/* Felder: zart getönt, beim Ausfüllen wächst unten ein Sonnen-Strich */
.kontakt__formular .feld {
    position: relative;
}

.kontakt__formular .feld input,
.kontakt__formular .feld textarea {
    border: 1.5px solid transparent;
    border-bottom-color: rgba(40, 80, 50, 0.28);
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
    background: #f1f7ee;
    transition: background-color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve),
        box-shadow var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}

.kontakt__formular .feld input:hover,
.kontakt__formular .feld textarea:hover {
    background: #e9f3e5;
    border-color: transparent;
    border-bottom-color: var(--farbe-blatt);
}

.kontakt__formular .feld input:focus-visible,
.kontakt__formular .feld textarea:focus-visible {
    background: var(--farbe-weiss);
    border-color: rgba(40, 80, 50, 0.18);
    border-bottom-color: transparent;
    box-shadow: 0 12px 22px -14px rgba(23, 36, 27, 0.45);
    transform: translateY(-2px);
}

.kontakt__formular .feld::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--farbe-sonne), var(--farbe-blatt));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--kurve);
    pointer-events: none;
}

.kontakt__formular .feld:focus-within::after {
    transform: scaleX(1);
}

.kontakt__formular .feld:has(textarea)::after {
    bottom: 6px;
}

.kontakt__formular .feld label {
    transition: color var(--dauer) var(--kurve);
}

.kontakt__formular .feld:focus-within label {
    color: var(--farbe-blatt);
}

/* Laufband wie eine LED-Bande im Stadion */
.laufband {
    position: relative;
    overflow: hidden;
    padding-block: 0.85rem;
    background: #0d1610;
    border-top: 3px solid var(--farbe-sonne);
}

/* LED-Punktraster und weiche Ränder links/rechts */
.laufband::before,
.laufband::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.laufband::before {
    background: radial-gradient(circle, transparent 0 1.1px, rgba(13, 22, 16, 0.32) 1.4px) 0 0 / 4px 4px;
}

.laufband::after {
    background: linear-gradient(90deg, #0d1610, transparent 12%, transparent 88%, #0d1610);
}

.laufband__spur {
    display: flex;
    width: max-content;
    animation: laufband 22s linear infinite;
}

.laufband__gruppe {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.laufband__gruppe span {
    padding-inline: 0.9rem;
    font-family: var(--schrift-titel);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffd98a;
    text-shadow: 0 0 8px rgba(255, 190, 90, 0.75), 0 0 18px rgba(204, 138, 63, 0.5);
}

.laufband__gruppe .laufband__sonne {
    padding-inline: 0.4rem;
    color: #fff3c4;
}

.laufband:hover .laufband__spur {
    animation-play-state: paused;
}

/* Senden-Knopf: Papierflieger, der beim Überfahren abhebt */
.knopf--senden {
    position: relative;
    overflow: hidden;
    min-height: 3.4rem;
    background: linear-gradient(120deg, var(--farbe-tanne), var(--farbe-blatt));
    font-size: var(--text-md);
}

.knopf--senden svg {
    width: 1.2rem;
    height: 1.2rem;
    transition: transform 0.45s var(--kurve);
}

.knopf--senden::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.7s ease;
}

.knopf--senden:hover::before {
    transform: translateX(120%);
}

.knopf--senden:hover svg {
    transform: translate(0.35rem, -0.35rem) rotate(8deg);
}

.knopf--senden.ist-unterwegs svg {
    animation: flieger-ab 0.9s ease-in infinite;
}

@media (min-width: 940px) {
    .kontakt__raster {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 6vw, 5rem);
    }

    .kontakt__formular {
        position: sticky;
        top: calc(var(--hoehe-kopf) + 1.5rem);
    }
}

/* ---------- Rechtliches ---------- */

.rechtliches {
    padding-block: var(--abstand-xl);
}

.rechtliches h2 {
    margin-bottom: var(--abstand-md);
    font-size: var(--text-2xl);
}

.rechtstext {
    font-size: var(--text-sm);
    color: var(--farbe-text-leise);
}

.rechtstext > * + * {
    margin-top: 0.9rem;
}

.rechtstext h4 {
    margin-top: 1.5rem;
    font-size: var(--text-md);
}

.rechtstext__stand {
    font-style: italic;
}

/* Bildausschnitte der Leistungskarten: das Wesentliche zeigen */
.leistung--neben:nth-child(2) .leistung__bild img {
    object-position: center 75%;
}

.leistung--neben:nth-child(3) .leistung__bild img {
    object-position: center 15%;
}

/* Gebäudereinigung am Handy/Tablet: Fotos nebeneinander statt überlappend, damit beide Bildtexte lesbar bleiben */
@media (max-width: 979px) {
    .gebaeude .gebaeude__fotos {
        gap: 0.75rem;
        padding-bottom: 0;
    }

    .gebaeude .gebaeude__foto:first-child {
        grid-column: 1 / 7;
    }

    .gebaeude .gebaeude__foto:last-child {
        grid-column: 7 / 13;
        align-self: stretch;
        margin: 2rem 0 0;
        border: 0;
        aspect-ratio: 3 / 4;
    }
}

/* Diashows in PV-Reinigung und Gebäudereinigung */
.pv-verfahren__diashow {
    aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
    .pv-verfahren__diashow {
        aspect-ratio: 5 / 6;
    }
}

/* Bildtext oben, damit er nicht mit Pfeilen und Punkten unten kollidiert */
.pv-verfahren__diashow figcaption,
.gebaeude__foto:first-child figcaption {
    inset: 0 0 auto 0;
    z-index: 2;
    padding: 0.9rem 3.5rem 2.25rem 1rem;
    background: linear-gradient(rgba(23, 36, 27, 0.75), transparent);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Gebäudereinigung: Steuerung links, damit das überlappende zweite Foto sie nicht verdeckt */
.gebaeude__foto:first-child .bilderwechsel__steuerung {
    justify-content: flex-start;
    padding-left: 1rem;
}

/* Fotos behalten ihr Seitenverhältnis schon vor dem Laden – kein Nachrutschen beim Scrollen */
.gebaeude .gebaeude__foto:first-child {
    align-self: start;
}

@media (max-width: 979px) {
    .gebaeude .gebaeude__foto:last-child {
        align-self: start;
    }
}

@media (max-width: 979px) {
    .gebaeude .gebaeude__fotos {
        width: 100%;
    }
}


/* ---------- Trockeneis & Laser: kompakte Fassung ---------- */
.strahlen .strahlen__einstieg {
    align-items: center;
}

.strahlen__vorteile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.strahlen__vorteile li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(233, 213, 168, 0.35);
    border-radius: var(--radius-rund);
    background: rgba(233, 213, 168, 0.1);
    color: var(--farbe-sonne-hell);
    font-size: var(--text-sm);
    font-weight: 600;
}

.strahlen__vorteile li::before {
    content: "✓";
    color: var(--farbe-sonne);
}

.strahlen__raster {
    display: grid;
    gap: var(--abstand-md);
    margin-top: var(--abstand-xl);
}

@media (min-width: 900px) {
    .strahlen__raster {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.strahlen__karte {
    padding: 1.4rem 1.4rem 1.3rem;
    border: 1px solid var(--farbe-linie-hell);
    border-top: 3px solid var(--farbe-sonne);
    border-radius: var(--radius-mittel);
    background: rgba(23, 36, 27, 0.7);
    backdrop-filter: blur(6px);
    font-size: var(--text-sm);
    transition: transform 0.3s var(--kurve), box-shadow 0.3s var(--kurve);
}

.strahlen__karte:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 36px -18px rgba(0, 0, 0, 0.6);
}

.strahlen__karte h3 {
    margin-bottom: 0.5rem;
    font-size: var(--text-xl);
    color: var(--farbe-weiss);
}

.strahlen__karte p {
    color: var(--farbe-text-hell-leise);
}

.strahlen__karte ul {
    margin-top: 0.75rem;
    padding: 0;
    list-style: none;
}

.strahlen__karte ul li {
    position: relative;
    padding: 0.25rem 0 0.25rem 1.1rem;
    color: var(--farbe-text-hell);
}

.strahlen__karte ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--farbe-sonne);
}

.strahlen__schritte {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

.strahlen__schritte li {
    position: relative;
    padding-left: 2.1rem;
    color: var(--farbe-text-hell-leise);
    counter-increment: schritt;
}

.strahlen__schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: 0.05rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--farbe-sonne);
    color: var(--farbe-nacht);
    font-size: 0.75rem;
    font-weight: 700;
}

.strahlen__schritte strong {
    color: var(--farbe-weiss);
}

.strahlen .strahlen__einsatz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: var(--abstand-lg);
}

.strahlen .strahlen__einsatz h3 {
    margin: 0;
    font-size: var(--text-md);
    color: var(--farbe-sonne-hell);
}

.strahlen__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0;
    list-style: none;
}

.strahlen__chips li {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--farbe-linie-hell);
    border-radius: var(--radius-rund);
    color: var(--farbe-text-hell);
    font-size: var(--text-xs);
}

.strahlen .strahlen__kulisse {
    height: 100%;
}

/* ---------- Handy: kompaktere Darstellung ---------- */
@media (max-width: 720px) {
    /* Vorteilskarten der PV-Reinigung 2 × 2 statt untereinander */
    .pv-verfahren .vorteilskarten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .pv-verfahren .vorteilskarte {
        padding: 1rem 0.85rem;
    }

    .pv-verfahren .vorteilskarte h3 {
        font-size: var(--text-md);
    }

    .pv-verfahren .vorteilskarte p {
        font-size: var(--text-xs);
    }

    .pv-verfahren .vorteilskarte__symbol {
        width: 2.4rem;
        height: 2.4rem;
        margin-bottom: 0.6rem;
    }

    /* Leistungsüberblick: weitere Leistungen nebeneinander zum Wischen */
    .leistungen__raster {
        grid-template-columns: repeat(3, 78%);
        grid-auto-flow: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(-1 * var(--rand-seite));
        padding: 0.25rem var(--rand-seite) 1rem;
        scrollbar-width: none;
    }

    .leistungen__raster::-webkit-scrollbar {
        display: none;
    }

    .leistung--haupt {
        grid-column: 1 / -1;
        width: calc(100vw - 2 * var(--rand-seite));
        position: sticky;
        left: 0;
    }

    .leistung--neben {
        scroll-snap-align: center;
    }

    .leistung--neben .leistung__bild {
        height: 7rem;
    }
}

@media (max-width: 720px) {
    .pv-verfahren .vorteilskarte h3 {
        font-size: 0.9rem;
        hyphens: manual;
    }
}


/* Kleiner Wisch-Hinweis unter den Leistungskarten (nur Handy) */
.wisch-hinweis {
    display: none;
}

@media (max-width: 720px) {
    .wisch-hinweis {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        margin-top: 0.25rem;
        color: var(--farbe-text-leise);
        font-size: var(--text-xs);
        transition: opacity 0.5s ease;
    }

    .wisch-hinweis svg {
        width: 1.15rem;
        height: 1.15rem;
        color: var(--farbe-sonne);
        animation: wisch-hand 2.2s ease-in-out infinite;
    }

    .wisch-hinweis.ist-erledigt {
        opacity: 0;
    }

    @keyframes wisch-hand {
        0%, 100% { transform: translateX(6px) rotate(0); }
        50% { transform: translateX(-8px) rotate(-12deg); }
    }

    /* Die Kartenreihe „stupst" einmal kurz an, wenn sie ins Bild kommt */
    .leistungen__raster.stupsen .leistung--neben {
        animation: wisch-stups 1.1s ease-in-out 0.4s 1;
    }

    @keyframes wisch-stups {
        0%, 100% { transform: none; }
        40% { transform: translateX(-2.5rem); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .wisch-hinweis svg,
    .leistungen__raster.stupsen .leistung--neben {
        animation: none;
    }
}

/* ---------- Leistungen als Kurzfassung (Osmose, Gebäude, Trockeneis & Laser) ----------
   Ausführliche Inhalte stehen auf den Unterseiten (/osmose-reinigung usw.). */

.kurzleistung {
    display: grid;
    gap: var(--abstand-xl);
    align-items: center;
}

@media (min-width: 900px) {
    .kurzleistung {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: clamp(2.5rem, 6vw, 5.5rem);
    }

    .kurzleistung--bild-rechts {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }

    .kurzleistung--bild-rechts .kurzleistung__medien {
        order: 2;
    }
}

.kurzleistung__medien {
    position: relative;
    width: 100%;
    max-width: 28rem;
    justify-self: center;
}

/* Versetzter Rahmen hinter dem Foto */
.kurzleistung__medien::before {
    content: '';
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    z-index: 0;
    border: 2px solid var(--farbe-sonne);
    border-radius: var(--radius-gross);
    opacity: 0.55;
    transition: transform 0.6s var(--kurve);
}

.kurzleistung--bild-rechts .kurzleistung__medien::before {
    inset: 1.25rem 1.25rem -1.25rem -1.25rem;
}

.kurzleistung:hover .kurzleistung__medien::before {
    transform: translate(-0.4rem, -0.4rem);
}

.kurzleistung--bild-rechts:hover .kurzleistung__medien::before {
    transform: translate(0.4rem, -0.4rem);
}

.kurzleistung__bild {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 5;
}

.osmose .kurzleistung__bild img,
#osmose-reinigung .kurzleistung__bild img {
    object-position: center 60%;
}

/* Osmose auf der Startseite: heller Wasserverlauf mit Lichtreflex, Wellenlinien unten und Luftbläschen */
#osmose-reinigung {
    background:
        radial-gradient(ellipse 45% 55% at 82% 18%, rgba(255, 255, 255, 0.75), transparent 70%),
        radial-gradient(ellipse 50% 50% at 8% 58%, rgba(160, 206, 214, 0.45), transparent 70%),
        linear-gradient(180deg, var(--farbe-flaeche), var(--farbe-wasser) 22%, #dbebed 62%, var(--farbe-hintergrund) 94%);
}

#osmose-reinigung::before,
#osmose-reinigung::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

#osmose-reinigung::before {
    inset: auto 0 6% 0;
    height: 160px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' fill='none' stroke-linecap='round'%3E%3Cpath d='M0 70 Q180 35 360 70 T720 70 T1080 70 T1440 70' stroke='%23ffffff' stroke-opacity='0.85' stroke-width='2'/%3E%3Cpath d='M0 100 Q180 125 360 100 T720 100 T1080 100 T1440 100' stroke='%232f7b8c' stroke-opacity='0.14' stroke-width='1.5'/%3E%3Cpath d='M0 130 Q180 110 360 130 T720 130 T1080 130 T1440 130' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='1.5'/%3E%3C/svg%3E")
        0 0 / 1440px 160px repeat-x;
    animation: osmose-wellen 60s linear infinite;
}

#osmose-reinigung::after {
    inset: 0;
    background:
        radial-gradient(circle at 6% 22%, transparent 0 5px, rgba(255, 255, 255, 0.9) 5.5px 7px, transparent 7.5px),
        radial-gradient(circle at 9% 34%, transparent 0 2.5px, rgba(255, 255, 255, 0.9) 3px 4px, transparent 4.5px),
        radial-gradient(circle at 4% 46%, transparent 0 8px, rgba(255, 255, 255, 0.75) 8.5px 10px, transparent 10.5px),
        radial-gradient(circle at 93% 30%, transparent 0 6px, rgba(255, 255, 255, 0.9) 6.5px 8px, transparent 8.5px),
        radial-gradient(circle at 96% 44%, transparent 0 3px, rgba(255, 255, 255, 0.9) 3.5px 4.5px, transparent 5px),
        radial-gradient(circle at 90% 58%, transparent 0 4px, rgba(255, 255, 255, 0.8) 4.5px 5.5px, transparent 6px),
        radial-gradient(circle at 52% 12%, transparent 0 3px, rgba(255, 255, 255, 0.8) 3.5px 4.5px, transparent 5px);
    animation: osmose-blasen 9s ease-in-out infinite alternate;
}

@keyframes osmose-wellen {
    to {
        background-position-x: -1440px;
    }
}

@keyframes osmose-blasen {
    to {
        transform: translateY(-14px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #osmose-reinigung::before,
    #osmose-reinigung::after {
        animation: none;
    }
}

.kurzleistung__text > * + * {
    margin-top: var(--abstand-md);
}

.kurzleistung__text .knopfreihe {
    margin-top: var(--abstand-lg);
}

.kurzleistung__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.kurzleistung__chips li {
    padding: 0.35rem 0.85rem;
    border: 1.5px dashed rgba(18, 40, 58, 0.25);
    border-radius: var(--radius-rund);
    background: rgba(255, 255, 255, 0.6);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--farbe-modul-hell);
}

.kurzleistung__mehr svg {
    width: 1.1rem;
    height: 1.1rem;
    transition: transform var(--dauer) var(--kurve);
}

.kurzleistung__mehr:hover svg {
    transform: translateX(4px);
}

.kurzbereich.strahlen .kurzleistung__medien::before {
    border-color: var(--farbe-sonne-hell);
    opacity: 0.35;
}

/* Trockeneis-Pellets im Hintergrund: helle Striche mit Bewegungsunschärfe fliegen von rechts oben schräg nach links unten,
   werden kleiner und verblassen (Sublimation). Werte pro Pellet setzt js/effekte.js. */
.pellets {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.pellets span {
    position: absolute;
    top: var(--y);
    left: 0;
    width: var(--l);
    height: var(--d);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(225, 242, 250, 0.95), transparent);
    opacity: 0;
    animation: pellet-flug var(--t) linear var(--v) infinite paused;
}

.pellets.laeuft span {
    animation-play-state: running;
}

@keyframes pellet-flug {
    0% {
        opacity: 0;
        transform: translate(105vw, 0) rotate(-8deg) scale(1);
    }
    12%, 70% {
        opacity: var(--o);
    }
    100% {
        opacity: 0;
        transform: translate(-5vw, 15vw) rotate(-8deg) scale(0.35);
    }
}

/* Bokeh-Lichter in der Galerie: weiche, unscharfe Kreise wie bei einem Objektiv steigen langsam auf
   und verblassen. Werte pro Licht setzt js/effekte.js. */
.bokeh {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
}

.bokeh span {
    position: absolute;
    top: 100%;
    left: var(--x);
    width: var(--g);
    aspect-ratio: 1;
    margin-left: calc(var(--g) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 184, 112, 0.5) 0%, rgba(232, 184, 112, 0.28) 45%, rgba(232, 184, 112, 0.14) 62%, transparent 70%);
    opacity: 0;
    animation: bokeh-steigen var(--t) ease-in-out var(--v) infinite paused;
}

.bokeh span.bokeh--gruen {
    background: radial-gradient(circle, rgba(120, 170, 120, 0.42) 0%, rgba(120, 170, 120, 0.22) 45%, rgba(120, 170, 120, 0.1) 62%, transparent 70%);
}

.bokeh.laeuft span {
    animation-play-state: running;
}

@keyframes bokeh-steigen {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0.8);
    }
    20%, 75% {
        opacity: var(--o);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), calc(-100cqh - 100%)) scale(1.1);
    }
}

/* Schräges Laufband „Partnerleistung" in der Ecke rechts unten.
   Die Laufschrift enthält den Text zweimal hintereinander, damit -50 % nahtlos weiterläuft. */
.partnerband {
    position: absolute;
    right: -4.75rem;
    bottom: 2.75rem;
    z-index: 1;
    width: 22rem;
    overflow: hidden;
    padding-block: 0.4rem;
    border-block: 1px solid rgba(204, 138, 63, 0.35);
    background: rgba(204, 138, 63, 0.12);
    transform: rotate(-45deg);
    transform-origin: center;
    pointer-events: none;
}

.partnerband__lauf {
    display: flex;
    width: max-content;
    animation: partnerband-lauf 22s linear infinite;
}

.partnerband__lauf span {
    flex-shrink: 0;
    padding-inline: 0.9rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--farbe-sonne-hell);
    opacity: 0.7;
}

.partnerband__lauf span::after {
    content: '✦';
    margin-left: 1.8rem;
    color: var(--farbe-sonne);
}

@keyframes partnerband-lauf {
    from {
        transform: translateX(-50%);
    }
}

@media (max-width: 720px) {
    .partnerband {
        right: -5.5rem;
        bottom: 1.6rem;
        width: 18rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .partnerband__lauf {
        animation: none;
    }
}

@media (max-width: 899px) {
    .kurzleistung__medien {
        max-width: none;
    }

    .kurzleistung__medien::before {
        display: none;
    }

    .kurzleistung__bild {
        aspect-ratio: 16 / 10;
    }

    /* Osmose auf der Startseite: das Hochformat-Foto vollständig und groß zeigen */
    #osmose-reinigung .kurzleistung__bild {
        aspect-ratio: 901 / 1600;
    }

    #osmose-reinigung .kurzleistung__bild img {
        object-fit: contain;
        object-position: center;
    }

    /* Bild am Handy immer oben */
    .kurzleistung--bild-rechts .kurzleistung__medien {
        order: 0;
    }
}

/* ---------- Warum reinigen? Firmen-Haus als Hintergrund am linken Rand ---------- */
.pv-warum {
    position: relative;
    isolation: isolate;
}

.pv-warum > .rahmen {
    position: relative;
    z-index: 1;
}

.pv-warum__haus {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.pv-warum__haus img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    max-width: none;
    filter: brightness(0) invert(1);
    opacity: 0.06;
}