.reference-page{min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 95% 12%,#0649a3a6,transparent 52%),linear-gradient(118deg,#031332 0%,#082a65 59%,#073574 100%);position:relative}.reference-page:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(112deg,#020e284a 0%,#020e284a 24%,transparent 24.1%);z-index:0}.reference-page header,.reference-page main,.reference-page footer{position:relative;z-index:1}.reference-page header{border:0;padding-top:32px;padding-bottom:20px}.reference-page main{width:100%;max-width:1300px;padding:24px 6.4vw 42px;flex:1}.reference-page h1{font-size:clamp(27px,3.2vw,43px);font-weight:400;letter-spacing:-.035em;line-height:1.2;margin:0 0 35px;color:#dee7f1;text-wrap:balance}.reference-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:30px;row-gap:30px;max-width:1100px;margin:0 auto}.reference-item{grid-column:span 2;text-align:center;display:flex;flex-direction:column;align-items:center;text-decoration:none;min-width:0}.reference-item:nth-child(4){grid-column:2 / span 2}.reference-item:nth-child(5){grid-column:4 / span 2}.orb{position:relative;width:min(100%,235px);aspect-ratio:1;flex:none;transition:transform .25s ease}.orb img{position:absolute;inset:9%;width:82%;height:82%;object-fit:cover;border-radius:50%;display:block}.orb.document img{object-fit:cover;object-position:center 42%;background:#edf1f4}.orb-ring{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 5px 6px #010b214a)}.reference-item h2{font-size:17px;font-weight:400;line-height:1.35;letter-spacing:-.01em;margin:7px 0 5px;max-width:320px;color:#f2f5f8;text-wrap:balance}.ref-arrow{font-size:14px;display:inline-block;margin-left:6px;color:#bbd0e9}.reference-item p{font-size:13px;line-height:1.5;margin:0;color:#b0c6e1;letter-spacing:.01em}.reference-item:hover .orb{transform:translateY(-4px)}.reference-item:hover h2{color:#fff}.reference-item:focus-visible{outline:2px solid #bed5ed;outline-offset:8px;border-radius:5px}.reference-page footer{border:0;margin-top:auto;padding-top:20px;padding-bottom:23px;font-size:10px}.compact-reference{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;margin:45px 0 50px}.compact-reference figure img{width:100%;height:auto;max-height:440px;object-fit:contain;object-position:left top}.compact-reference p{color:#b6c8df;font-size:17px}.compact-reference h2{font-size:30px}@media(min-width:1600px){.orb{width:250px}.reference-grid{row-gap:35px}.reference-page main{padding-top:34px}.reference-page h1{margin-bottom:46px}}@media(max-width:850px){.reference-page main{padding-left:6vw;padding-right:6vw}.reference-grid{column-gap:16px;row-gap:24px}.orb{width:min(100%,195px)}.reference-item h2{font-size:15px}.reference-item p{font-size:12px}}@media(max-width:650px){.reference-page main{padding:25px 7vw 35px}.reference-page h1{font-size:29px;margin-bottom:28px}.reference-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 16px}.reference-item{grid-column:span 2}.reference-item:nth-child(4){grid-column:span 2}.reference-item:nth-child(5){grid-column:2/span 2}.orb{width:min(100%,210px)}.reference-item h2{font-size:15px}.reference-item p{font-size:12px}.reference-page header{padding:25px 7vw 12px}.compact-reference{grid-template-columns:1fr;gap:28px}.reference-page footer{row-gap:12px}.reference-page .brand{font-size:11px}}@media(max-width:380px){.reference-grid{grid-template-columns:1fr;gap:30px}.reference-item,.reference-item:nth-child(4),.reference-item:nth-child(5){grid-column:1}.orb{width:210px}.reference-item h2{font-size:17px}.reference-item p{font-size:13px}}@media(prefers-reduced-motion:reduce){.orb{transition:none}}
/* Abschließende Ausrichtung von Titel und Projektbeschriftungen. */
.reference-page h1{text-align:center;margin-left:auto;margin-right:auto;max-width:100%}.reference-item h2{min-height:2.7em;display:flex;align-items:center;justify-content:center;gap:5px}.ref-arrow{flex:none;margin-left:2px}.reference-page footer .links{align-items:center}.reference-page footer .links a{display:inline-flex;align-items:center;min-height:44px}.reference-page footer{align-items:center;gap:8px 20px}@media(max-width:650px){.reference-page h1{font-size:clamp(25px,6.8vw,29px)}.reference-grid{row-gap:28px}.reference-item h2{min-height:2.7em}.reference-page footer{padding-left:7vw;padding-right:7vw}}@media(max-width:380px){.reference-item h2{min-height:0}}
@media(min-width:851px) and (max-width:1500px){.orb{width:min(100%,220px)}.reference-grid{row-gap:24px}.reference-page h1{margin-bottom:28px}.reference-page main{padding-bottom:28px}}