*{box-sizing:border-box} :root{color-scheme:dark;font-family:Inter,"SF Pro Display",system-ui,sans-serif;color:#faf8ef;background:#111b22}body{margin:0;overflow:hidden}button{font:inherit}.screen{height:100vh;height:100dvh;padding:2.2vh 1.5vw;display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);gap:1.3vw;background:radial-gradient(ellipse at 0 100%,#24463980,transparent 65%),#111b22;overflow:hidden}.photo-stage{min-width:0;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,2.1fr) minmax(0,1fr);gap:1.1vw;transition:grid-template-rows 1.4s cubic-bezier(.2,.8,.2,1)}.photo-stage.focused{grid-template-rows:minmax(0,3.4fr) minmax(0,1fr)}.photo-frame{position:relative;min-height:0;overflow:hidden;border-radius:1.7vw;background:#263d3b;isolation:isolate;box-shadow:0 8px 30px #0003}.hero{grid-column:1/-1}.photo-layers,.photo-layer,.photo-backdrop{position:absolute;inset:0}.photo-layer{opacity:0;transition:opacity 1.8s ease;overflow:hidden}.photo-layer.visible{opacity:1}.photo-backdrop{background-position:center;background-size:cover;filter:blur(25px) brightness(.65);transform:scale(1.15)}.photo-image{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--focus,50% 40%);animation:photoDrift 18s ease-in-out infinite alternate;transform-origin:var(--focus,50% 40%)}.hero .photo-image{object-fit:contain;padding:1.4vh 1vw 7vh;animation:heroDrift 18s ease-in-out infinite alternate}.hero:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,#0a1a21e0,transparent 42%)}@keyframes photoDrift{from{transform:scale(1)}to{transform:scale(1.055)}}@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.035)}}.photo-caption{position:absolute;left:2.3vw;right:2vw;bottom:2.5vh;z-index:3;text-shadow:0 2px 12px #0007;pointer-events:none}.eyebrow{font-size:clamp(12px,1vw,22px);font-weight:750;letter-spacing:.15em;color:#e7eee4}.photo-caption h1{font-size:clamp(26px,2.5vw,54px);font-weight:730;letter-spacing:-.045em;line-height:1.02;margin:.25em 0 0}.photo-pagination{position:absolute;right:0;bottom:.3vh;display:flex;gap:.4vw}.photo-pagination span{width:.35vw;min-width:5px;height:.35vw;min-height:5px;border-radius:50%;background:#fff5;transition:width .5s,background .5s}.photo-pagination span.current{width:1.8vw;background:#fff}.image-progress{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:4;background:#ffffff18}.image-progress span{display:block;height:100%;width:100%;background:#e5eec8;transform:scaleX(0);transform-origin:left}.image-progress span.running{animation:progress 12s linear forwards}@keyframes progress{to{transform:scaleX(1)}}.info-rail{display:grid;grid-template-rows:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr);gap:1.1vw;min-width:0;min-height:0;transition:grid-template-rows 1.1s cubic-bezier(.2,.8,.2,1)}.info-card{position:relative;min-height:0;overflow:hidden;border-radius:1.7vw;padding:1.7vw;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 1px #ffffff25,0 8px 24px #0002;transition:filter .8s}.info-card.all{background:linear-gradient(130deg,#70445e,#4e3048);--accent:#ffc9dc}.info-card.grosse{background:linear-gradient(130deg,#3c5a90,#283d68);--accent:#d4e3ff}.info-card.abc{background:linear-gradient(130deg,#8b7037,#5d4825);--accent:#ffe6b1}.info-card.kleine{background:linear-gradient(130deg,#367e6b,#245344);--accent:#cbffe9}.card-head{display:flex;align-items:center;justify-content:space-between;gap:.6vw;font-size:clamp(12px,1vw,22px);font-weight:780;letter-spacing:.09em;color:var(--accent);flex-shrink:0}.kind{display:inline-flex;align-items:center;gap:.55em}.kind svg{height:1.25em;width:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.group{white-space:nowrap;font-size:1em}.info-card h2{font-size:clamp(22px,2.05vw,43px);letter-spacing:-.045em;line-height:1.1;margin:.4em 0 0;overflow-wrap:break-word}.info-card.active{justify-content:flex-start;padding-top:2.3vw}.info-card.active h2{font-size:clamp(30px,3.25vw,67px);line-height:1.05;margin-top:.65em}.card-details{display:none;font-size:clamp(18px,1.5vw,32px);line-height:1.35;color:#fffde5e0;margin-top:auto;padding-top:1.8vh}.info-card.active .card-details{display:block;animation:detailReveal 1.1s ease both}.card-details p{margin:.65em 0 0}.card-date{font-weight:750;font-size:1.25em;letter-spacing:-.035em}.card-footnote{font-size:.72em;letter-spacing:.09em;margin-top:1.8vh;color:var(--accent);font-weight:700}.info-card.entering{animation:cardEnter 1s cubic-bezier(.2,.8,.2,1) both}@keyframes detailReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes cardEnter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.demo-controls{position:fixed;bottom:2.7vh;right:2vw;z-index:20;display:flex;gap:6px;opacity:.14;transition:opacity .3s}.demo-controls:hover,.demo-controls:focus-within{opacity:1}.demo-controls button{cursor:pointer;font-size:12px;font-weight:650;border:1px solid #fff4;border-radius:99px;background:#101b26b0;color:#fff;padding:7px 11px}.demo-controls button:focus-visible{outline:3px solid #ffe6b1;outline-offset:3px}.paused *{animation-play-state:paused!important}.screen.photo-moment{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}.screen{transition:grid-template-columns 1.4s cubic-bezier(.2,.8,.2,1)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-aspect-ratio:1/1){.screen{grid-template-columns:1.5fr 1fr}.info-card h2{font-size:2.7vw}.info-card.active h2{font-size:3.8vw}.card-head{font-size:1.3vw}.card-details{font-size:2vw}}