#nav-links a[aria-current=page]{color:var(--blue);text-decoration:underline;text-underline-offset:9px}
.references-hero{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,22vw,390px);gap:24px;padding-bottom:48px}
.reference-stage{position:relative;min-width:0;aspect-ratio:4/3;isolation:isolate;background:var(--paper)}
.reference-city{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:-1}
.reference-hero-copy{position:relative;width:40%;padding-top:6%;z-index:2}
.reference-hero-copy h1{font-size:clamp(38px,3.85vw,77px);line-height:1.04;letter-spacing:-.05em;margin-bottom:26px}
.reference-hero-copy .eyebrow{font-size:12px;margin-bottom:30px}
.reference-hero-copy>p:not(.eyebrow){font-size:clamp(15px,1.15vw,20px);line-height:1.55;color:var(--muted);max-width:370px}
.reference-hero-copy .button{margin-top:28px}
.reference-hotspots{position:absolute;inset:0;pointer-events:none}
.reference-marker{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%);display:flex;flex-direction:column-reverse;align-items:center;gap:0;border:0;padding:0 0 0;background:none;color:var(--graphite);pointer-events:auto;cursor:pointer;min-height:64px;z-index:3}
.reference-dot{width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid var(--blue)}
.reference-dot:before{content:'';display:block;position:absolute;bottom:13px;left:calc(50% - 1px);height:20px;width:2px;background:var(--blue)}
.reference-label{background:var(--paper);padding:9px 12px;margin-bottom:20px;font-size:clamp(11px,.9vw,16px);line-height:1.25;font-weight:600;box-shadow:0 2px 10px #151c2220;white-space:nowrap}
.reference-marker[aria-pressed=true] .reference-label{background:var(--selected)}
.reference-marker[aria-pressed=true] .reference-dot{background:var(--selected);border-color:#a77c13}
.reference-marker:focus-visible{outline:3px solid #9c7715;outline-offset:5px}
.reference-illustration{position:absolute;bottom:0;right:0;font-size:11px;color:var(--muted);background:#f2f3eeee;padding:5px 8px}
.reference-rail{min-width:0;padding:30px 25px;background:var(--graphite);color:var(--paper)}
.reference-rail-inner{position:sticky;top:24px;max-height:calc(100vh - 48px);display:flex;flex-direction:column}
.reference-rail .eyebrow{color:var(--pale);font-size:10px;margin:0 0 34px}
#reference-selection h2{font-size:clamp(27px,2.4vw,43px);line-height:1.1;letter-spacing:-.035em;color:var(--signal);margin-bottom:16px}
#reference-selection p{color:#c7d4da;font-size:14px;line-height:1.6}
#hero-project-list{list-style:none;margin:24px 0 20px;padding:0;overflow:auto;scrollbar-width:thin;max-height:45vh;min-height:60px;border-top:1px solid #405461}
#hero-project-list a{display:block;padding:13px 8px 13px 0;border-bottom:1px solid #405461;font-size:14px;line-height:1.4}
#hero-project-list a:hover{color:var(--signal)}.reference-rail a:focus-visible,#hero-project-list:focus-visible{outline:2px solid var(--selected);outline-offset:3px}
.rail-all{font-size:13px;color:var(--pale);padding-block:8px}.rail-all span{float:right}
.selected-projects .section-heading>p{color:#bccbd3}.reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.reference-card{min-width:0;background:#1c2932;border:1px solid #3b4b57;display:flex;flex-direction:column}.reference-card:first-child{grid-column:span 2}
.reference-card>img{width:100%;height:clamp(230px,22vw,400px);object-fit:cover;background:#d8dedc}
.reference-card-body{padding:28px}.reference-card-body>span{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--pale)}
.reference-card h3{font-size:clamp(23px,2vw,34px);line-height:1.2;letter-spacing:-.025em;margin:15px 0 24px;overflow-wrap:anywhere}
.reference-facts{margin:0 0 22px;display:grid;gap:12px}.reference-fact dt{color:var(--pale);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.reference-fact dd{margin:3px 0 0;font-size:15px;color:#e3e9eb;line-height:1.5}.reference-services{border-top:1px solid #435561;padding-top:18px;font-size:15px;color:#c5d4dd;line-height:1.65}.reference-services strong{display:block;color:var(--paper);font-weight:600;margin-bottom:8px}
.project-loader{margin-top:38px;display:flex;align-items:center;justify-content:space-between;gap:24px}.project-loader p{font-size:14px;color:var(--pale)}.project-loader button{border:0;cursor:pointer}
.reference-index{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:0 0 60px;padding:0}.reference-index a{display:block;padding:12px 16px;border:1px solid #c2ced1;font-size:14px}.reference-index a:hover{color:var(--blue);border-color:var(--blue)}
.reference-category{display:grid;grid-template-columns:minmax(220px,1fr) 2.5fr;gap:55px;border-top:1px solid #bbcbd0;padding-block:42px;scroll-margin-top:30px}
.reference-category-head h3{font-size:clamp(24px,2.2vw,35px);line-height:1.15;letter-spacing:-.035em;margin-bottom:18px}.reference-category-head>p:last-child{color:var(--muted);font-size:15px}.reference-category-head .eyebrow{font-size:11px}
.reference-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:0 28px;margin:0;padding:0}.reference-list li{border-bottom:1px solid #d1dbde;padding:12px 0;font-size:14px;line-height:1.5;overflow-wrap:anywhere;scroll-margin-top:40px}.reference-list li:target{background:#ffe9a3;outline:8px solid #ffe9a3}
.reference-contact{display:flex;align-items:center;justify-content:space-between;gap:30px}
@media(max-width:1279px){.references-hero{grid-template-columns:minmax(0,1fr) 280px;gap:16px}.reference-stage{aspect-ratio:auto;min-height:780px}.reference-city{height:auto;top:auto;bottom:25px}.reference-hero-copy{width:75%;padding-top:20px}.reference-hero-copy h1{font-size:48px}.reference-hero-copy>p:not(.eyebrow){max-width:400px}.reference-hotspots{top:auto;bottom:25px;aspect-ratio:4/3}.reference-label{font-size:11px;padding:7px}.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-card:first-child{grid-column:span 1}.reference-list{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-category{gap:35px}}
@media(max-width:900px){.references-hero{grid-template-columns:1fr}.reference-stage{min-height:790px}.reference-city{bottom:25px}.reference-hero-copy{width:52%}.reference-hero-copy h1{font-size:54px}.reference-rail-inner{position:static;max-height:none}#hero-project-list{max-height:300px}.reference-rail{padding:28px}.reference-rail .eyebrow{margin-bottom:22px}}
@media(max-width:700px){.reference-stage{display:flex;flex-direction:column;min-height:0;aspect-ratio:auto}.reference-hero-copy{order:0;width:100%;padding-top:18px}.reference-hero-copy h1{font-size:clamp(42px,10vw,62px)}.reference-hero-copy .eyebrow{margin-bottom:22px}.reference-hero-copy>p:not(.eyebrow){font-size:16px;max-width:500px}.reference-city{position:relative;inset:auto;z-index:0;order:1;width:100%;height:auto;margin-top:24px}.reference-hotspots{order:2;position:static;aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}.reference-marker{position:static;transform:none;display:flex;flex-direction:row;gap:8px;min-height:48px;background:var(--paper);border:1px solid #c2ced1;padding:8px;justify-content:center}.reference-dot{width:10px;height:10px;flex:none}.reference-dot:before{display:none}.reference-label{margin:0;padding:0;background:none;box-shadow:none;font-size:13px}.reference-marker[aria-pressed=true]{background:var(--selected);border-color:#a77c13}.reference-illustration{position:static;order:3;text-align:left;font-size:10px;padding:10px 0}.reference-grid{grid-template-columns:1fr;gap:24px}.reference-card>img{height:auto;aspect-ratio:1.6}.reference-card-body{padding:22px}.project-loader{align-items:start;flex-direction:column}.reference-category{grid-template-columns:1fr;gap:20px}.reference-list{gap:0 20px}.reference-index{gap:8px;margin-bottom:32px}.reference-index a{font-size:12px;padding:10px 12px}.reference-contact{align-items:start;flex-direction:column}}
@media(max-width:390px){.reference-list{grid-template-columns:1fr}.reference-rail{padding:24px 20px}.reference-hero-copy h1{font-size:42px}}
@media(prefers-reduced-motion:no-preference){.project-card-enter{animation:project-enter .4s ease both}@keyframes project-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
/* Das vollständige Campusbild und seine Punkte teilen stets dasselbe Seitenverhältnis. */
@media(min-width:1280px){.reference-stage{aspect-ratio:1.2}.reference-city{top:auto;bottom:22px;height:auto;aspect-ratio:1.5}.reference-hotspots{top:auto;bottom:22px;aspect-ratio:1.5}.reference-hero-copy{width:36%;padding-top:4%}.reference-hero-copy h1{font-size:clamp(38px,3.5vw,72px)}.reference-hero-copy>p:not(.eyebrow){font-size:clamp(15px,1.05vw,19px);background:#f2f3eefa}.reference-hero-copy .eyebrow{font-size:11px}}
@media(min-width:701px) and (max-width:1279px){.reference-hotspots{aspect-ratio:1.5}}
@media(min-width:1280px){.reference-stage{aspect-ratio:1.45}.reference-hero-copy h1{font-size:clamp(38px,3.85vw,77px)}}
@media(min-width:701px) and (max-width:1279px){.reference-stage{display:flex;flex-direction:column;min-height:0;padding-bottom:25px}.reference-hero-copy{width:90%;padding:20px 0 0}.reference-city{position:relative;inset:auto;z-index:-1;width:100%;height:auto;margin-top:12px}.reference-hotspots{bottom:25px}.reference-hero-copy h1{font-size:48px}.reference-hero-copy>p:not(.eyebrow){max-width:460px}}
@media(min-width:701px) and (max-width:1279px){.reference-hero-copy{order:0}.reference-city{order:1}}

/* Gleichmäßige Projektübersicht und ruhiger, mitlaufender Referenzkatalog. */
.reference-card:first-child{grid-column:auto}
.reference-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.reference-list li{padding:20px 22px;background:#fafbf8;border:1px solid #d8e1e3;border-left:3px solid #b7dded;font-size:clamp(17px,1.15vw,20px);line-height:1.55;cursor:default;box-shadow:0 2px 8px #151c2204}
.reference-list li:target{background:#fff0ba;outline:2px solid #c99d37;outline-offset:2px}
.reference-category{align-items:start}
.reference-category-head{position:sticky;top:40px;align-self:start}
.reference-category-head>p:last-child{font-size:17px;line-height:1.65}
@media(hover:hover){.reference-list li:hover{background:#fff;border-color:#8bc7e1;box-shadow:0 7px 20px #151c2210;transform:translateY(-2px)}}
@media(max-width:700px){.reference-category-head{position:static}.reference-list{grid-template-columns:1fr}.reference-list li{padding:18px 20px;font-size:17px}}
@media(prefers-reduced-motion:no-preference){
 .reference-list li{transition:background .25s,border-color .25s,box-shadow .25s,transform .35s,opacity .45s}
 .reference-category-head{transition:opacity .45s,translate .45s}
 .reference-list li.scroll-muted{opacity:.38;translate:0 8px}
 .reference-category-head.scroll-muted{opacity:.45;translate:0 5px}
 .reference-list li:not(.scroll-muted){translate:0 0;transition:background .25s,border-color .25s,box-shadow .25s,transform .35s,opacity .45s,translate .45s}
 .reference-list li:target{opacity:1;translate:0 0}
}
@media(prefers-reduced-motion:reduce){.reference-list li,.reference-category-head{transition:none!important;transform:none!important;translate:none!important;opacity:1!important}}

/* Kompakte Illustrationen nur in den bereits bebilderten Katalogbereichen. */
.reference-list-illustrated{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.reference-list .reference-item-illustrated{padding:0;overflow:hidden;font-size:16px;line-height:1.45}
.reference-thumbnail{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#eef5f8}
.reference-item-note{display:block;padding:0 12px 12px;font-size:13px;line-height:1.45;color:#53616a}
.reference-credits{margin-top:32px;border-top:1px solid #d1dbde;padding-top:16px;font-size:14px;line-height:1.6;color:#53616a}.reference-credits summary{cursor:pointer}.reference-credits ul{padding-left:20px}.reference-credits li{margin-top:12px}.reference-credits a{color:inherit;text-decoration:underline}
.reference-item-name{display:block;padding:14px 16px}
@media(min-width:1600px){.reference-list-illustrated{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){.reference-list-illustrated{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.reference-list-illustrated{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.reference-list .reference-item-illustrated{padding:0;font-size:16px}.reference-item-name{padding:12px}}
@media(max-width:390px){.reference-list-illustrated{grid-template-columns:1fr}}

/* Referenzkategorien: gleiches Einzelauswahl-Prinzip und Tastenbild wie Leistungen. */
#reference-catalogue{--reference-scroll-offset:24px;overflow-anchor:none}
#reference-catalogue .reference-category{padding-block:24px;scroll-margin-top:var(--reference-scroll-offset);min-width:0}
#reference-catalogue .reference-category-head{min-width:0;top:var(--reference-scroll-offset);opacity:1;translate:none}
#reference-catalogue .reference-category:not(.is-open) .reference-category-head{grid-column:1/-1;position:static}
#reference-catalogue .reference-category-head h3{margin:0;font-size:inherit}
#reference-catalogue .reference-category-head .eyebrow{margin-bottom:10px}
#reference-catalogue .reference-description{margin-top:14px}
#reference-catalogue .reference-category:not(.is-open) .reference-description{display:none}
.reference-toggle{font:inherit;color:var(--graphite);background:none;border:0;border-block:1px solid #b9c6c9;display:grid;grid-template-columns:minmax(0,1fr) 24px;align-items:center;gap:16px;text-align:left;padding:18px 12px;min-height:62px;width:100%;cursor:pointer;scroll-margin-top:var(--reference-scroll-offset);transition:color .2s,background .2s}
.reference-toggle-label{font-size:clamp(17px,1.25vw,21px);font-weight:600;line-height:1.35;overflow-wrap:anywhere;hyphens:auto}
.reference-toggle-sign{font-size:24px;color:var(--blue);font-weight:400;line-height:1;text-align:center}
.reference-toggle:hover{background:#f2f3ee99}
.reference-toggle[aria-expanded=true]{background:var(--paper);color:var(--blue);box-shadow:inset 3px 0 var(--blue)}
.reference-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:3px;position:relative;z-index:1}
#reference-catalogue .reference-list[hidden]{display:none!important}
#reference-catalogue .reference-list{min-width:0}
#reference-catalogue .reference-list li{scroll-margin-top:var(--reference-scroll-offset);min-width:0}
#reference-catalogue .reference-list li:focus-visible{outline:3px solid var(--blue);outline-offset:3px;opacity:1;translate:none}
@media(max-width:700px){#reference-catalogue .reference-category{gap:20px;padding-block:18px}#reference-catalogue .reference-category-head{position:static}.reference-toggle{padding:16px 12px}}
@media(prefers-reduced-motion:reduce){.reference-toggle{transition:none}}

.reference-illustration-notice{margin:0 0 28px;max-width:900px;font-size:14px;line-height:1.6;color:#53616a}