/* Scrollytelling der Startseite: kompakte Streifen. Text zuerst, Animation nur als Verstärkung (transform und opacity). */
.scrolly{padding-block:28px 8px}
.scrolly>.container>h2{font-size:clamp(1.4rem,3vw,2rem);line-height:1.15;margin:0 0 4px;text-wrap:balance}
.scene{padding-block:0;border-top:1px solid #E7E5E1}
.scene:first-of-type{margin-top:12px}
.scene-grid{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:16px;align-items:center;padding-block:14px}
.scene-text{min-width:0}
.scene-text p{max-width:66ch;margin:0 0 8px}
.scene-text p:last-child{margin-bottom:0}
.scene-text ul{margin:4px 0 8px;padding-left:1.2em}
.scene h3{font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.25;margin:4px 0 6px;text-wrap:balance}
.scene-n{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;border-radius:50%;background:#B0106A;color:#fff;font-weight:900;font-size:.85rem}
.scene-k{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;color:#02727A}
.scene-visual{min-width:0}
.scene-visual svg{display:block;width:100%;height:auto;max-width:96px;margin-inline:auto;border-radius:12px}
.scene .btn{padding:8px 16px;min-height:44px}
@media (min-width:800px){
  .scene-grid{grid-template-columns:minmax(0,1fr) 150px;gap:28px}
  .scene-visual svg{max-width:150px}
}
@media (prefers-reduced-motion:no-preference){
  .js-scrolly .scene-text,.js-scrolly .scene-visual{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
  .js-scrolly .scene.is-in .scene-text,.js-scrolly .scene.is-in .scene-visual{opacity:1;transform:none}
  .js-scrolly .scene.is-in .scene-visual{transition-delay:.1s}
}
@media print{.scene-visual{display:none}.scene{break-inside:avoid}}

/* Startseite: Abschnitte nach dem Scrollytelling kompakter (nur Layout, kein Inhalt entfällt) */
.scrolly~.section{padding-block:40px}
.scrolly~.section .section-head{margin-bottom:16px}
.scrolly~.section--alt:first-of-type,.scrolly~.section--alt:nth-of-type(1){padding-block:24px}
.scrolly~#angebot .card{padding:18px;gap:8px}
.scrolly~#angebot .card-img{aspect-ratio:16/9}
@media (max-width:640px){
  .scrolly~.section{padding-block:28px}
  .scrolly~.section .grid-4,.scrolly~#angebot .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .scrolly~.section .grid-4 .card{padding:12px}
  .scrolly~.section .grid-4 .card-img{aspect-ratio:1/1!important}
  .scrolly~.section .grid-4 figcaption h3,.scrolly~.section .grid-4 .card h3{font-size:1rem;line-height:1.25}
  .scrolly~.section .grid-4 figcaption p{font-size:.85rem}
  .scrolly~#angebot .card{padding:12px}
  .scrolly~#angebot .card h3{font-size:1rem;line-height:1.25}
  .scrolly~#angebot .card p{font-size:.85rem}
  .scrolly~#angebot .card .btn,.scrolly~.section .grid-4 .card .btn{padding:8px 14px;min-height:44px}
}