/* Eigenständige Leistungsseiten. Radial-Galerie nach Watermelon RadialCarousel. */
.reference-hero { padding-top: clamp(138px, 13vw, 190px); padding-bottom: 64px; }
.reference-back { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; padding: 10px 17px; margin-bottom: 44px; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; touch-action: manipulation; }
.reference-back-icon { display: block; flex: 0 0 22px; width: 22px; height: 22px; transform: none; }
.reference-back:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .reference-back:hover { background: var(--accent); border-color: var(--accent); } }
.reference-hero > .eyebrow { display: block; }
.reference-hero h1 { font-size: clamp(48px, 7.6vw, 108px); line-height: .98; letter-spacing: -.045em; max-width: 15ch; margin: 20px 0 25px; }
.reference-hero > p { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; max-width: 49ch; color: var(--ink-soft); }
.reference-hero .ref-switch { margin-top: 30px; }
.reference-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(24px, 6vw, 90px); border-top: 1px solid var(--line-strong); padding-block: clamp(58px, 7vw, 104px); }
.reference-row:nth-child(even) .reference-copy { order: 2; }
.reference-copy h2 { font-size: clamp(43px, 5.2vw, 72px); line-height: 1; margin: 23px 0; letter-spacing: -.045em; overflow-wrap: normal; }
.reference-copy > p { font-size: 18px; line-height: 1.65; max-width: 39ch; color: var(--ink-soft); }
.reference-tags { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 24px 0 0; list-style: none; }
.reference-tags li { padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 12px; }
.reference-visit { display: inline-flex; align-items: center; gap: 20px; margin-top: 30px; font-weight: 700; }
.reference-visit span { background: var(--accent); color: var(--ink); border-radius: 50%; display: grid; place-items: center; width: 42px; height: 42px; font-size: 24px; transition: transform .2s; }
.reference-visit:hover span { transform: rotate(45deg); }
.reference-cta { border-top: 1px solid var(--line-strong); padding-block: 80px 110px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.reference-cta h2 { font-size: clamp(40px, 5.3vw, 72px); margin-top: 18px; line-height: 1; }
.reference-cta .cta-glow { flex-shrink: 0; }
.reference-website { display: block; width: 100%; border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 16px 45px rgba(0,0,0,.1); }
.reference-website img { display: block; width: 100%; height: auto; }
.reference-website:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
/* Ring and selected photograph share a square stage, so nothing jumps on selection. */
.radial-gallery { width: 100%; max-width: 570px; margin-inline: auto; min-width: 0; }
.radial-stage { --radius: 150px; position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; overflow-anchor: none; touch-action: pan-y pinch-zoom; user-select: none; }
.radial-ring, .radial-track { position: absolute; inset: 0; }
.radial-ring { touch-action: pinch-zoom; cursor: grab; overflow: clip; contain: layout paint; }
.radial-ring.is-dragging { cursor: grabbing; }
.radial-track { transform: none; }
.radial-gallery.is-visible .radial-item { will-change: transform; }
.radial-item { width: var(--card-width, 26%); aspect-ratio: var(--ratio, 2/3); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))); border: 0; border-radius: 12px; background: transparent; padding: 0; cursor: pointer; touch-action: pinch-zoom; }
.radial-item img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; box-shadow: 0 3px 9px rgba(0,0,0,.12); transition: transform 180ms cubic-bezier(.2,.7,.2,1); pointer-events: none; -webkit-user-drag: none; }
.radial-item:focus-visible, .radial-gallery button:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.radial-item:focus-visible, .radial-item.is-front { z-index: 50; }
@media (hover: hover) and (pointer: fine) {
 .radial-item:hover { z-index: 70; }
 /* Only the image lifts; the button's orbit and hit area stay untouched. */
 .radial-ring:not(.is-dragging) .radial-item:hover img { transform: translateY(-3px) scale(1.025); animation: radial-front 180ms ease-out; }
 .radial-ring.is-dragging .radial-item img { transition: none; }
}
/* Controls stay on the square stage, independent of photo format and photo transforms. */
.radial-focus { position: absolute; inset: 0; z-index: 80; isolation: isolate; }
.radial-glass { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 30px; border: 1px solid rgba(255,255,255,.78); background: linear-gradient(145deg,rgba(255,255,255,.67),rgba(255,255,255,.3) 55%,rgba(237,255,234,.4)); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.4), 0 12px 34px rgba(29,42,24,.08); }
.radial-photo { position: absolute; z-index: 1; border-radius: 14px; transform-origin: 0 0; }
.radial-large { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; box-shadow: 0 8px 24px rgba(0,0,0,.13); }
.radial-close, .radial-paging button { position: absolute; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.68)); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(20,35,20,.12); cursor: pointer; font-size: 23px; line-height: 1; }
.radial-close { right: 8px; top: 8px; font-size: 27px; }
.radial-paging { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.radial-paging button { top: 50%; transform: translateY(-50%); pointer-events: auto; }
.radial-paging [data-prev] { left: 8px; }
.radial-paging [data-next] { right: 8px; }
.radial-position { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); border-radius: 20px; background: rgba(255,255,255,.76); color: var(--ink); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 2px 8px rgba(20,35,20,.07); padding: 5px 10px; min-width: 44px; box-sizing: border-box; text-align: center; font-variant-numeric: tabular-nums; font-size: 11px; line-height: 1.3; }
.radial-focus button:focus-visible { outline-color: var(--ink); outline-offset: 3px; }
.radial-ring .radial-item.is-selected { visibility: hidden; }
.radial-outgoing { position: absolute; z-index: 1; pointer-events: none; border-radius: 14px; object-fit: contain; }
.radial-gallery [hidden] { display: none !important; }
.social-support { padding-block: clamp(70px, 9vw, 130px); display: grid; grid-template-columns: 1fr 1.1fr; gap: 8%; }
.social-support h2 { font-size: clamp(48px, 5.8vw, 82px); line-height: 1; margin: 22px 0; }
.social-support-intro > p { max-width: 38ch; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.social-support-list article { display: flex; gap: 20px; padding-block: 28px; border-top: 1px solid var(--line-strong); }
.social-support-list article > span { font-size: 13px; padding-top: 6px; color: var(--ink-soft); }
.social-support h3 { font-size: clamp(25px, 2.7vw, 36px); margin-bottom: 12px; letter-spacing: -.025em; }
.social-support-list p { line-height: 1.6; color: var(--ink-soft); font-size: 17px; }
@keyframes radial-front { from { opacity: .72; } to { opacity: 1; } }
@media (max-width: 800px) {
 .reference-hero { padding-top: 125px; padding-bottom: 45px; }
 .reference-back { margin-bottom: 32px; }
 .reference-hero h1 { font-size: clamp(43px, 9vw, 72px); }
 .reference-row { grid-template-columns: minmax(0,1fr); gap: 22px; padding-block: 48px; }
 .reference-row:nth-child(even) .reference-copy { order: 0; }
 .reference-copy h2 { font-size: clamp(42px, 10vw, 65px); }
 .reference-copy > p { font-size: 17px; }
 .radial-gallery { max-width: 470px; }
 .reference-cta { flex-direction: column; align-items: flex-start; padding-block: 55px 75px; }
 .social-support { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 400px) {
 .reference-hero .ref-switch { gap: 6px; }
 .reference-hero .ref-switch a { padding: 8px 11px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
 .radial-focus { animation: none; }
 .radial-ring .radial-item img, .radial-ring:not(.is-dragging) .radial-item:hover img { animation: none; transition: none; transform: none; }
 .radial-item, .reference-visit span { transition: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 .radial-glass { background: rgba(255,255,255,.82); }
}
@media (prefers-reduced-transparency: reduce) {
 .radial-glass { background: rgba(255,255,255,.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}