/* Nur der neue Kundenreferenzbereich; bestehende Homepage-Regeln bleiben erhalten. */
.kundenreferenz { position: relative; overflow: hidden; background: var(--paper); }
.kundenreferenz::before { content: ""; position: absolute; width: 550px; height: 550px; top: -180px; right: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,188,.65), rgba(255,214,188,0) 68%); pointer-events: none; }
.kundenreferenz .ref-head { position: relative; max-width: 850px; margin-bottom: 38px; }
.kundenreferenz .ref-head h2 { font-size: clamp(2rem, 4vw, 3.4rem); max-width: 850px; }
.kundenreferenz .ref-head .lead { max-width: 800px; }
.kundenreferenz .ref-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,.92fr); gap: 30px; align-items: start; }
.kundenreferenz .ref-film { min-width: 0; margin: 0; }
.kundenreferenz .ref-video-frame { position: relative; overflow: hidden; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 20px 45px rgba(48,27,15,.10); }
.kundenreferenz .ref-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 18px; background: #dfece3; }
.kundenreferenz .ref-film figcaption { padding: 17px 5px 0; color: var(--muted-text); font-size: .9rem; line-height: 1.6; }
.kundenreferenz .ref-film figcaption strong { display: block; color: var(--ink); font-weight: 750; }
.kundenreferenz .ref-quote-shell { min-width: 0; }
.kundenreferenz .ref-quote { position: relative; margin: 0; padding: 34px 32px 28px; overflow: hidden; border: 1px solid rgba(243,107,33,.24); border-radius: var(--radius-lg); background: var(--white); box-shadow: 0 15px 40px rgba(48,27,15,.07); transition: transform 260ms cubic-bezier(.23,1,.32,1), box-shadow 260ms ease, border-color 260ms ease; }
.kundenreferenz .ref-quote::before { content: "“"; position: absolute; left: 20px; top: -14px; font-family: Georgia,serif; font-size: 150px; line-height: 1; color: rgba(243,107,33,.07); pointer-events: none; }
.kundenreferenz .ref-spark { position: absolute; top: 21px; right: 24px; color: #b77919; font-size: 35px; line-height: 1; text-shadow: 0 0 22px rgba(237,170,69,.25); transition: transform 280ms ease, text-shadow 280ms ease; }
.kundenreferenz .ref-quote-label { display: inline-flex; position: relative; margin: 0 45px 20px 0; color: var(--orange-dark); font-size: .72rem; font-weight: 850; letter-spacing: .10em; text-transform: uppercase; }
.kundenreferenz .ref-quote blockquote { position: relative; margin: 0; }
.kundenreferenz .ref-quote blockquote p { font-size: clamp(1.08rem,1.65vw,1.28rem); line-height: 1.68; color: var(--ink); font-weight: 550; }
.kundenreferenz .ref-author { position: relative; display: flex; align-items: center; gap: 13px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.kundenreferenz .ref-avatar { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--orange-dark); background: var(--paper); font-size: .82rem; font-weight: 850; }
.kundenreferenz .ref-logo { display: block; object-fit: contain; background: transparent; }
.kundenreferenz .ref-author .ref-attribution { line-height: 1.4; }
.kundenreferenz .ref-author cite { display: block; font-style: normal; font-weight: 850; color: var(--ink); }
.kundenreferenz .ref-author span:not(.ref-avatar) { display: block; margin-top: 5px; color: var(--muted-text); font-size: .84rem; }
.kundenreferenz .ref-consent { margin-top: 16px; font-size: .8rem; line-height: 1.55; color: var(--muted-text); }
.kundenreferenz .ref-next { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.kundenreferenz .ref-next > p { color: var(--muted-text); max-width: 650px; }
@media (hover:hover) and (pointer:fine) { .kundenreferenz .ref-quote:hover { transform: translateY(-6px) rotate(-.45deg); border-color: rgba(243,107,33,.5); box-shadow: 0 24px 52px rgba(48,27,15,.13); } .kundenreferenz .ref-quote:hover .ref-spark { transform: rotate(18deg) scale(1.10); text-shadow: 0 0 25px rgba(237,170,69,.7); } }
@media (max-width: 900px) { .kundenreferenz .ref-grid { grid-template-columns: 1fr; gap: 28px; } .kundenreferenz .ref-head { margin-bottom: 30px; } .kundenreferenz .ref-quote blockquote p { font-size: 1.17rem; } }
@media (max-width: 520px) { .kundenreferenz .ref-quote { padding: 28px 23px 24px; } .kundenreferenz .ref-video-frame { padding: 8px; border-radius: 22px; } .kundenreferenz .ref-video-frame video { border-radius: 15px; } .kundenreferenz .ref-next { align-items: stretch; flex-direction: column; } .kundenreferenz .ref-next .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .kundenreferenz .fade-in { opacity: 1; transform: none; } .kundenreferenz .ref-quote, .kundenreferenz .ref-spark { transition: none; } .kundenreferenz .ref-quote:hover, .kundenreferenz .ref-quote:hover .ref-spark { transform: none; } }

/* Separate Kundenprojektseite und kleiner Verweis auf der Startseite. */
.ref-page-intro { background: var(--white); padding: 58px 0 54px; }
.ref-page-intro h1 { max-width: 920px; font-size: clamp(2.15rem,4.6vw,3.65rem); }
.ref-page-intro .lead { max-width: 850px; }
.kundenreferenz .ref-story { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line); max-width: 900px; }
.kundenreferenz .ref-story h3 { margin-bottom: 18px; font-size: clamp(1.4rem,2.4vw,2rem); }
.kundenreferenz .ref-story > p:not(.eyebrow) { margin-top: 14px; color: var(--muted-text); max-width: 850px; }
.ref-start-teaser { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ref-start-teaser h2 { font-size: clamp(1.35rem,2vw,1.85rem); margin-bottom: 8px; }
.ref-start-teaser p { max-width: 750px; color: var(--muted-text); font-size: .95rem; }
.ref-start-teaser .text-link { flex-shrink: 0; }
.ref-teaser-section { padding: 0 0 54px; }
@media (max-width: 720px) { .ref-page-intro { padding: 38px 0 40px; } .ref-start-teaser { align-items: flex-start; flex-direction: column; gap: 18px; } .ref-teaser-section { padding-bottom: 40px; } }