/* Referenz-Unterseite (Fallstudie) */
.rf-wrap{max-width:1280px;margin:0 auto;padding-inline:24px;box-sizing:border-box;width:100%}
.rf-dot{color:#16A279}
.rf-hero .rf-dot,.rf-value .rf-dot,.rf-end .rf-dot{color:#4FD1A5}
.rf-eyebrow{display:flex;align-items:center;gap:10px;margin:0;font:600 13px/1 'Figtree',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#4FD1A5!important}
.rf-eyebrow::before{content:"";flex:none;width:28px;height:2px;background:currentColor}
.rf-eyebrow--violet{color:#7B1FA2!important}
.rf-value .rf-eyebrow--violet{color:#4FD1A5!important}
section.rf-hero.nx-sh{justify-content:flex-end!important;padding-top:calc(78px + 40px)!important;padding-bottom:clamp(56px,8vw,110px)!important;min-height:100svh}
section.rf-hero.nx-sh::before{display:none!important}
.rf-hero{position:relative;isolation:isolate;color:#fff}
.rf-hero__bg{position:absolute!important;top:0;bottom:0;left:50%;width:100vw!important;transform:translateX(-50%);z-index:-1;overflow:hidden}
.rf-hero__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 58%;transform:scale(1.08);animation:rf-zoom 16s cubic-bezier(.23,1,.32,1) forwards}
.rf-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,0,66,.6) 0%,rgba(33,0,66,.12) 32%,rgba(33,0,66,.3) 58%,rgba(33,0,66,.92) 100%),linear-gradient(90deg,rgba(33,0,66,.72) 0%,rgba(33,0,66,0) 70%)}
@keyframes rf-zoom{to{transform:scale(1)}}
.rf-hero h1{margin:18px 0 0;color:#fff!important;font:800 clamp(44px,6.2vw,96px)/.95 'Bricolage Grotesque',sans-serif!important;letter-spacing:-.035em;max-width:14ch}
.rf-lead{margin:24px 0 0!important;max-width:52ch;font-size:clamp(17px,1.35vw,20px)!important;line-height:1.55!important;color:rgba(255,255,255,.92)!important}
.rf-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:32px}
.rf-btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;font:700 16px/1 'Figtree',sans-serif;text-decoration:none;transition:background-color .2s ease,color .2s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.rf-btn:active{transform:scale(.97)}
.rf-btn--green{background:#16A279;color:#fff!important}
.rf-btn--white{background:#fff;color:#210042!important}
.rf-btn--ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff!important}
.rf-link{color:#fff!important;font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:3px}
.rf-link--dark{color:#7B1FA2!important;display:inline-block;margin-top:22px}
@media (hover:hover) and (pointer:fine){.rf-btn--green:hover{background:#0F7D5C}.rf-btn--white:hover{background:#4FD1A5}.rf-btn--ghost:hover{background:rgba(255,255,255,.12)}.rf-link:hover{color:#4FD1A5!important}.rf-link--dark:hover{color:#16A279!important}}
.rf-quote{background:#F5F2F9;padding-block:clamp(80px,10vw,150px)}
.rf-quote__in{max-width:1040px}
.rf-quote blockquote{margin:28px 0 0}
.rf-quote blockquote p{margin:0;font:800 clamp(34px,4.6vw,68px)/1.04 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;color:#210042}
.rf-quote blockquote footer{margin-top:18px;font-size:15px;color:#4A4158;background:none!important;padding:0!important}
.rf-quote__txt{margin-top:30px!important;max-width:62ch;font-size:18px;line-height:1.65;color:#3A3148}
.rf-family{padding-block:clamp(80px,10vw,140px);background:#fff}
.rf-family__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:center}
.rf-family__img{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:3/2}
.rf-family__img img{display:block;width:100%;height:100%;object-fit:cover}
.rf-family h2{margin:18px 0 0;color:#210042;font:800 clamp(32px,3.4vw,50px)/1.04 'Bricolage Grotesque',sans-serif!important;letter-spacing:-.03em}
.rf-family p{margin-top:18px!important;font-size:18px;line-height:1.6;color:#3A3148}
.rf-family .rf-note{color:#7B1FA2;font-weight:600}
.rf-gallery{padding-bottom:clamp(80px,10vw,140px);background:#fff}
.rf-gallery__track{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:14px;max-width:1600px;margin:0 auto;padding-inline:24px;box-sizing:border-box}
.rf-g{position:relative;margin:0;height:clamp(240px,27vw,420px);border-radius:20px;overflow:hidden;background:#F5F2F9}
.rf-g img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .8s cubic-bezier(.23,1,.32,1)}
.rf-g::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,0,66,0) 55%,rgba(33,0,66,.65) 100%)}
.rf-g figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;color:#fff;font:600 14px/1.3 'Figtree',sans-serif}
@media (hover:hover) and (pointer:fine){.rf-g:hover img{scale:1.06}}
.rf-value{background:#210042;color:#fff;padding-block:clamp(80px,10vw,140px)}
.rf-value h2{margin:18px 0 0;color:#fff;font:800 clamp(34px,4vw,60px)/1.02 'Bricolage Grotesque',sans-serif!important;letter-spacing:-.03em;max-width:18ch}
.rf-value__lead{margin-top:20px!important;max-width:58ch;font-size:18px;line-height:1.6;color:#D9D0E6}
.rf-cards{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rf-card{display:flex;flex-direction:column;gap:14px;padding:32px 30px 28px;border-radius:22px;background:rgba(255,255,255,.07);transition:transform .4s cubic-bezier(.23,1,.32,1),background-color .25s ease}
.rf-card--green{background:#16A279}
.rf-card--ink{background:linear-gradient(135deg,#7B1FA2,#C2129B)}
.rf-card__n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.14);color:#4FD1A5;font:800 14px/1 'Bricolage Grotesque',sans-serif}
.rf-card--green .rf-card__n,.rf-card--ink .rf-card__n{color:#fff;background:rgba(255,255,255,.2)}
.rf-card h3{margin:4px 0 0;color:#fff;font:700 clamp(22px,2vw,28px)/1.15 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.rf-card p{margin:0!important;font-size:16px;line-height:1.55;color:rgba(255,255,255,.88)}
.rf-tag{margin-top:auto;align-self:flex-start;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);font:600 11px/1 'Figtree',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8)}
@media (hover:hover) and (pointer:fine){.rf-card:hover{transform:translateY(-4px)}}
.rf-facts{background:#210042;color:#fff;padding-bottom:clamp(70px,9vw,120px)}
.rf-facts__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:40px;border-top:1px solid rgba(255,255,255,.18)}
.rf-facts b{display:block;color:#4FD1A5;font:800 clamp(34px,3.8vw,58px)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em}
.rf-facts span{display:block;margin-top:10px;font-size:14px;line-height:1.4;color:#C8BCDA}
.rf-tech{padding-block:clamp(64px,8vw,110px);background:#fff}
.rf-tech__in{max-width:1040px}
.rf-tech__h{margin:18px 0 0;color:#210042;font:800 clamp(32px,3.4vw,50px)/1.04 'Bricolage Grotesque',sans-serif!important;letter-spacing:-.03em}
.rf-tech__plus{position:relative;width:38px;height:38px;border-radius:50%;background:#210042}
.rf-tech__plus::before,.rf-tech__plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:#fff;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.rf-tech__plus::after{transform:rotate(90deg)}
.rf-faq{margin-top:36px;display:flex;flex-direction:column;gap:10px}
.rf-faq details{background:#F5F2F9;border-radius:20px;padding:0;transition:background-color .2s ease}
.rf-faq details[open]{background:#EFEAF6}
.rf-faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px 26px}
.rf-faq summary::-webkit-details-marker{display:none}
.rf-faq__n{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:#fff;color:#7B1FA2;font:800 14px/1 'Bricolage Grotesque',sans-serif}
.rf-faq details[open] .rf-faq__n{background:linear-gradient(135deg,#7B1FA2,#C2129B);color:#fff}
.rf-faq__q{color:#210042;font:700 clamp(18px,1.6vw,22px)/1.3 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em}
.rf-faq details[open] .rf-tech__plus::after{transform:rotate(0)}
.rf-faq__a{padding:0 26px 26px 82px}
.rf-faq__a p{margin:0!important;font-size:17px;line-height:1.65;color:#3A3148;max-width:72ch}
.rf-faq__a figure{margin:22px 0 0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(33,0,66,.06)}
.rf-faq__a img{display:block;width:100%;height:auto}
.rf-end{background:linear-gradient(165deg,#210042 0%,#2E0055 38%,#1B5A63 72%,#16A279 100%);color:#fff;padding-block:clamp(80px,10vw,140px)}
.rf-end h2{margin:0;color:#fff;font:800 clamp(36px,4.6vw,68px)/1 'Bricolage Grotesque',sans-serif!important;letter-spacing:-.035em;max-width:16ch}
.rf-end p{margin-top:22px!important;max-width:56ch;font-size:18px;line-height:1.6;color:#D9D0E6}
.rf-back{display:inline-block;margin-top:44px;color:rgba(255,255,255,.8)!important;text-decoration:none;font-weight:600}
@media (hover:hover) and (pointer:fine){.rf-back:hover{color:#4FD1A5!important}}
@media (max-width:900px){
.rf-family__in{grid-template-columns:1fr}
.rf-cards{grid-template-columns:1fr}
.rf-facts__in{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
.rf-gallery__track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.rf-gallery__track::-webkit-scrollbar{display:none}
.rf-g{scroll-snap-align:start;height:300px}
}
@media (max-width:760px){
.rf-hero h1{font-size:clamp(38px,11vw,54px)!important}
.rf-card{padding:26px 22px 22px}
.rf-faq summary{gap:12px;padding:18px}
.rf-faq__a{padding:0 18px 20px}
}
@media (prefers-reduced-motion:reduce){.rf-hero__bg img{animation:none;transform:none}}
.rf-g--pack{background:#fff;box-shadow:inset 0 0 0 1px rgba(33,0,66,.08)}
.rf-g--pack::after{display:none}
.rf-pack{display:flex;align-items:center;justify-content:center;height:100%;padding:5% 3% 14%;box-sizing:border-box}
.rf-g .rf-pack img{width:50%;height:100%;object-fit:contain}
.rf-g--pack figcaption{color:#210042}
@media (max-width:900px){.rf-gallery__track{padding-inline:24px!important;scroll-padding-inline:24px}.rf-gallery__track::after{content:"";width:10px}}

/* Referenz loipe.live: Ampel, System-Screens */
.rf-hero--ll .rf-hero__bg img{object-position:center 45%}
.rf-amp{background:#210042;color:#fff;padding-block:clamp(80px,10vw,140px)}
.rf-amp h2{margin:18px 0 0;color:#fff;font:800 clamp(34px,4vw,60px)/1.02 'Bricolage Grotesque',sans-serif!important;letter-spacing:-.03em;max-width:18ch}
.rf-amp .rf-dot{color:#4FD1A5}
.rf-amp__lead{margin-top:20px!important;max-width:58ch;font-size:18px;line-height:1.6;color:#D9D0E6}
.rf-amp__list{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.rf-st{display:flex;flex-direction:column;gap:10px;padding:24px 22px 26px;border-radius:22px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rf-lamp{display:inline-flex;align-self:flex-start;gap:7px;padding:8px 10px;border-radius:999px;background:#14212B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);margin-bottom:8px}
.rf-lamp i{width:16px;height:16px;border-radius:50%;background:#2A3947}
.rf-st--r .rf-lamp i:nth-child(1){background:#D8362B;box-shadow:0 0 12px rgba(216,54,43,.7)}
.rf-st--y .rf-lamp i:nth-child(2){background:#EFBE1B;box-shadow:0 0 12px rgba(239,190,27,.7);animation:rf-blink 1.2s ease-in-out infinite}
.rf-st--o .rf-lamp i:nth-child(2){background:#F59A3C;box-shadow:0 0 12px rgba(245,154,60,.6)}
.rf-st--g .rf-lamp i:nth-child(3){background:#3DBE6E;box-shadow:0 0 12px rgba(61,190,110,.7)}
@keyframes rf-blink{50%{opacity:.25;box-shadow:none}}
.rf-st__time{font:600 12px/1 'Figtree',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#4FD1A5}
.rf-st h3{margin:0;color:#fff;font:700 22px/1.15 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.rf-st h3 span{display:inline-block;width:1.1em;color:rgba(255,255,255,.7)}
.rf-st p{margin:0!important;font-size:15px;line-height:1.55;color:rgba(255,255,255,.82)}
.rf-g--shot{background:#F2F5F7;box-shadow:inset 0 0 0 1px rgba(33,0,66,.08)}
.rf-g--shot img{object-position:top center}
.rf-credit{margin-top:28px!important;font-size:13px!important;color:rgba(255,255,255,.6)!important}
@media (max-width:1100px){.rf-amp__list{grid-template-columns:repeat(2,minmax(0,1fr))}.rf-st:last-child{grid-column:1/-1}}
@media (max-width:620px){.rf-amp__list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.rf-st--y .rf-lamp i:nth-child(2){animation:none}}
/* Screens als eingepasste Ausschnitte */
.rf-g--crop{--th:clamp(240px,27vw,420px);display:flex;align-items:center;justify-content:center;padding:18px 18px 52px;box-sizing:border-box;background:#E9EEF1}
.rf-g--crop::after{display:none}
.rf-g--crop figcaption{color:#210042}
.rf-crop{position:relative;flex:none;overflow:hidden;border-radius:12px;width:min(100%,calc((var(--th) - 70px) * var(--ar)));aspect-ratio:var(--ar);background:#fff;box-shadow:0 18px 40px -22px rgba(14,23,32,.5),0 0 0 1px rgba(14,23,32,.06)}
.rf-g .rf-crop img{position:absolute;max-width:none;width:var(--w);height:auto;left:var(--x);top:var(--y)}
@media (max-width:900px){.rf-g--crop{--th:300px}}
/* Umbrüche: kein einzelnes Wort in der letzten Zeile */
.rf-hero h1,.rf-quote blockquote p,.rf-family h2,.rf-value h2,.rf-amp h2,.rf-tech__h,.rf-end h2,.rf-card h3,.rf-st h3,.rf-faq__q{text-wrap:balance}
.rf-wrap p,.rf-card p,.rf-st p,.rf-faq__a p,.rf-facts span{text-wrap:pretty}
/* loipe.live Hero: Nico rechts neben dem Text */
.rf-hero--ll .rf-hero__bg img{object-position:62% 40%}
@media (min-width:901px){.rf-hero--ll .rf-hero__bg img{width:150%!important;max-width:none;margin-left:-4%;object-position:50% 30%}}
/* Galerie zwischen dunklen Abschnitten: oben und unten gleicher Abstand */
.rf-gallery--shots{padding-block:clamp(80px,10vw,140px)}

/* Raster darf nicht durch lange Wörter breiter werden */
@media (max-width:900px){.rf-family__in{grid-template-columns:minmax(0,1fr)!important}}