.explorer-trigger{margin-top:1rem;display:inline-flex;align-items:center;border:1px solid #42759b;border-radius:999px;background:#18334b;color:#d8eeff;padding:.55rem .9rem;font:inherit;font-size:.86rem;cursor:pointer}.explorer-trigger:hover,.explorer-trigger:focus-visible{background:#245176;outline-offset:3px}.explorer-modal{width:min(920px,calc(100vw - 2rem));max-height:min(85vh,850px);border:1px solid #42688b;border-radius:18px;padding:0;background:#0b1b2b;color:#ecf5ff;box-shadow:0 25px 80px #000a}.explorer-modal::backdrop{background:#000b;backdrop-filter:blur(5px)}.explorer-shell{padding:clamp(1rem,3vw,2rem)}.explorer-header{display:flex;justify-content:space-between;align-items:start;gap:1rem;position:sticky;top:0;z-index:1;background:#0b1b2b}.explorer-header h2{margin:.3rem 0 1.2rem}.explorer-close{background:#19364e;color:white;border:1px solid #50708a;border-radius:50%;font-size:1.4rem;width:2.4rem;height:2.4rem;cursor:pointer}.explorer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.explorer-item{border:1px solid #30526d;border-radius:12px;padding:1rem;background:#10263a}.explorer-item h3{margin:0 0 .6rem}.explorer-item p{line-height:1.5;margin:.5rem 0}.explorer-item small{color:#9bc7e6}.explorer-contribution{color:#cad8e5;font-size:.9rem}@media(max-width:640px){.explorer-list{grid-template-columns:1fr}.explorer-modal{max-height:94dvh;width:calc(100vw - 1rem)}}
.explorer-item{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.explorer-item h3{margin:.1rem 0 .25rem;font-size:1.15rem;line-height:1.35}
.explorer-item p{margin:.15rem 0 .6rem}
.explorer-tech{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .6rem}
.explorer-tech span{font-size:.76rem;line-height:1.3;color:#cbe8ff;background:#1c3c55;border:1px solid #315c78;padding:.28rem .55rem;border-radius:999px}
.explorer-contribution-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:#a6c8e1}
.explorer-item .explorer-contribution{margin-top:0}
.explorer-featured{border-color:#548ab1;background:linear-gradient(155deg,#17384e,#10263a 75%)}
.explorer-featured-label{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:#f1d6a1;border:1px solid #9b7a45;border-radius:999px;padding:.25rem .6rem;margin-bottom:.25rem}
.explorer-video{color:#a8dcff;text-underline-offset:3px;font-size:.9rem;margin-top:auto}
.explorer-video:focus-visible,.explorer-close:focus-visible{outline:2px solid #a8dcff;outline-offset:3px}

/* Projektbilder erscheinen direkt im Projekt, ohne Galerie/Lightbox.
   Auf dem Desktop vergroessert Hover das jeweilige Bild sanft. */
.project-images{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.65rem;width:100%;margin:.5rem 0 .85rem;isolation:isolate}
.project-image{position:relative;z-index:0;display:block;flex:0 1 120px;max-width:calc((100% - 1.3rem)/3);margin:0;outline-offset:4px}
.project-image img{display:block;width:100%;height:90px;object-fit:contain;border:1px solid #42688b;border-radius:7px;background:#0b1b2b;box-shadow:0 3px 10px #0005;transform:scale(1);transform-origin:left center;transition:transform 360ms cubic-bezier(.2,.8,.2,1),box-shadow 360ms ease}
@media(hover:hover) and (pointer:fine){
 .project-image:hover img,.project-image:focus-visible img{border-color:#8bdcff;box-shadow:0 0 0 2px #19b9ff80}
}
.project-photo-preview[hidden]{display:none}
.project-photo-preview{
 position:fixed;left:50%;top:50%;z-index:100;
 transform:translate(-50%,-47%) scale(.94);
 opacity:0;pointer-events:none;
 width:min(70vw,780px);max-height:74dvh;
 margin:0;padding:14px;border:1px solid #4e8fb5;border-radius:12px;
 background:#081b2bec;box-shadow:0 20px 70px #000e;
 display:flex;flex-direction:column;align-items:center;gap:8px;
 transition:opacity 1000ms ease-in-out,transform 1000ms ease-in-out;
}
.project-photo-preview.visible{opacity:1;transform:translate(-50%,-50%) scale(1);transition-duration:1200ms;transition-timing-function:ease-in-out}
.project-photo-preview img{display:block;max-width:100%;width:auto;max-height:calc(74dvh - 65px);height:auto;object-fit:contain;border-radius:5px}
.project-photo-preview figcaption{text-align:center;font-size:.82rem;line-height:1.3;color:#d5e6f3}
@media(max-height:580px){.project-photo-preview{max-height:65dvh}.project-photo-preview img{max-height:calc(65dvh - 65px)}}

.project-image:focus-visible{outline:2px solid #a8dcff;border-radius:7px}
@media(max-width:640px){.project-image{flex-basis:105px}.project-image img{height:80px}}
@media(prefers-reduced-motion:reduce){.project-image img,.project-photo-preview{transition:none}}