/* Referenzkatalog: gleiche Aufteilung und Bedienung wie der Leistungskatalog. */
.reference-directory{background:#e6e9e5}
.reference-directory-layout{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,3fr);gap:clamp(30px,3.5vw,70px);align-items:start}
.reference-navigation{position:sticky;top:28px;display:flex;flex-direction:column;border-top:1px solid #b9c6c9;max-height:calc(100svh - 56px);overflow-y:auto;overscroll-behavior:contain}
.reference-navigation .reference-toggle{grid-template-columns:26px minmax(0,1fr) 18px;border-top:0;gap:12px;padding:18px 12px}
.reference-menu-icon{width:25px;height:25px;color:var(--blue);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#reference-catalogue{min-width:0;min-height:180px}
#reference-catalogue .reference-category{display:block;border:0;padding:0;scroll-margin-top:var(--reference-scroll-offset)}
#reference-catalogue .reference-category[hidden]{display:none!important}
#reference-catalogue .reference-category-head{position:static;border-top:1px solid #b9c6c9;padding-top:24px;margin-bottom:36px;scroll-margin-top:var(--reference-scroll-offset);outline-offset:8px}
#reference-catalogue .reference-category-head:focus{outline:none}
#reference-catalogue .reference-category-head h3{font-size:clamp(26px,2.3vw,38px);margin:0 0 14px;line-height:1.2;overflow-wrap:anywhere;hyphens:auto}
#reference-catalogue .reference-description{color:var(--muted);max-width:70ch;font-size:17px;line-height:1.65;margin:0}
#reference-catalogue .reference-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px}
#reference-catalogue .reference-list li{padding:0;background:none;border:0;border-radius:0;box-shadow:none;font-size:17px;line-height:1.5;overflow:visible;transform:none}
#reference-catalogue .reference-thumbnail{aspect-ratio:3/2;object-fit:contain;background:var(--paper)}
#reference-catalogue .reference-item-name{padding:15px 0 0;font-weight:500}
#reference-catalogue .reference-item-note{padding:8px 0 0;font-size:14px;line-height:1.5}
#reference-catalogue .reference-list li:target{outline:2px solid var(--blue);outline-offset:8px}
.reference-empty{color:var(--muted);font-size:18px;border-top:1px solid #b9c6c9;padding-top:26px}
.reference-empty[hidden]{display:none}
.reference-reveal{animation:reference-reveal .45s ease both}
@keyframes reference-reveal{from{opacity:0;translate:0 10px}to{opacity:1;translate:0}}
@media(max-width:1199px){.reference-directory-layout{grid-template-columns:minmax(215px,.8fr) minmax(0,2fr);gap:28px}#reference-catalogue .reference-list{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-navigation .reference-toggle{padding:15px 10px;gap:10px}}
@media(max-width:800px){.reference-directory-layout{grid-template-columns:1fr;gap:30px}.reference-navigation{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;max-height:none;overflow:visible}.reference-navigation .reference-toggle{min-height:66px}#reference-catalogue .reference-category-head{margin-bottom:28px}#reference-catalogue .reference-description{font-size:16px}}
@media(max-width:540px){.reference-navigation,#reference-catalogue .reference-list{grid-template-columns:1fr}.reference-navigation .reference-toggle{min-height:58px}#reference-catalogue .reference-list{gap:30px}}
@media(prefers-reduced-motion:reduce){.reference-reveal{animation:none}}
@media print{.reference-directory-layout{display:block}.reference-navigation{display:none}#reference-catalogue .reference-list li{break-inside:avoid}.reference-reveal{animation:none}}