:root{color-scheme:light;--paper:#fff;--ink:#232629;--muted:#62676d;--line:#dfe2e5;--soft:#f4f5f6;--heart:#b52b50;--heart-soft:#fcebf0;--focus:#235ac3;--radius:12px;--space:24px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.5}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button,input,a{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}::selection{background:var(--heart-soft);color:var(--ink)}[hidden]{display:none!important}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,p{margin:0}h1{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.2;text-wrap:balance}h2{font-size:1.25rem;line-height:1.3;letter-spacing:-.015em}.page-header{max-width:1600px;margin:auto;padding:32px var(--space) 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.page-header p{color:var(--muted);margin-top:8px}.summary{color:var(--muted);font-size:.875rem;font-variant-numeric:tabular-nums;white-space:nowrap}main{max-width:1600px;margin:auto;padding:0 var(--space)}.toolbar{position:sticky;top:0;background:var(--paper);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line)}.toolbar p{font-size:.8125rem;color:var(--muted)}.filters{display:flex;gap:6px;align-items:center}.filter{border:0;background:transparent;color:var(--muted);padding:10px 14px;min-height:44px;border-radius:8px;font-weight:600;white-space:nowrap}.filter:hover{background:var(--soft)}.filter.active{background:var(--ink);color:#fff}.filter span{margin-left:6px;font-variant-numeric:tabular-nums}.gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.photo{position:relative;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 250px}.photo-open{display:block;position:relative;width:100%;padding:0;border:0;border-radius:var(--radius);overflow:hidden;background:var(--soft);aspect-ratio:4/3;color:var(--muted)}.photo-open:hover img{filter:brightness(.96)}.photo-open img{width:100%;height:100%;object-fit:cover;display:block}.image-failed .photo-open::after{content:'Bild laden';position:absolute;inset:0;display:grid;place-items:center;font-size:.875rem;background:var(--soft)}.image-failed img{visibility:hidden}.image-failed .photo-open:hover::after{color:var(--ink)}.photo-footer{display:flex;justify-content:space-between;align-items:center;min-height:48px;gap:8px;padding-left:3px}.photo-number{color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums}.heart-button{display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:8px;min-width:48px;min-height:44px;padding:8px 12px;background:transparent;color:var(--muted)}.heart-button:hover{background:var(--heart-soft);color:var(--heart)}.heart-button[aria-pressed=true]{color:var(--heart)}.heart-button[aria-pressed=true] svg{fill:var(--heart);stroke:var(--heart)}.heart-button.pending svg{opacity:.45}.vote-count{display:flex;gap:6px;align-items:center;color:var(--heart);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums}.vote-count svg{width:19px;height:19px;fill:currentColor}.rank{position:absolute;left:9px;top:9px;z-index:1;background:#fff;color:var(--ink);border-radius:6px;padding:3px 9px;font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums;pointer-events:none}.owner-panel{padding:24px;background:var(--soft);border-radius:var(--radius);margin-bottom:24px}.owner-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.owner-links{display:flex;gap:16px;flex-wrap:wrap}.text-button{padding:4px 0;min-height:36px;background:transparent;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px;font-size:.875rem}.text-button:hover{color:var(--heart)}.owner-panel>p{margin-top:10px;color:var(--muted)}.export-form{display:flex;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}.export-form label{display:flex;align-items:center;gap:10px}.export-form input{width:85px;min-height:44px;padding:7px 10px;border:1px solid #a6abb1;border-radius:8px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums;caret-color:var(--heart)}.primary-button{padding:10px 18px;border:0;border-radius:8px;min-height:44px;color:#fff;background:var(--ink);font-weight:600}.primary-button:hover{background:#41464c}.small-copy{font-size:.8125rem;color:var(--muted);max-width:75ch}.exports{display:grid;gap:12px;margin-top:16px}.export-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);font-size:.875rem}.export-row p{flex:1;min-width:160px}.export-row progress{width:160px;accent-color:var(--heart);height:8px}.notice{padding:14px 16px;background:var(--heart-soft);color:#84203b;border-radius:8px;margin-bottom:20px;font-size:.9375rem}.notice button{margin-left:12px}.load-state,.empty{text-align:center;padding:60px 20px;color:var(--muted)}.empty h2{color:var(--ink)}.empty p{margin:10px 0 20px}footer{max-width:1600px;margin:32px auto 0;padding:24px var(--space);color:var(--muted);font-size:.8125rem;border-top:1px solid var(--line)}.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#151719;color:#fff;overflow:hidden}.viewer::backdrop{background:#151719}.viewer-layout{height:100%;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.viewer-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;font-size:.875rem;font-variant-numeric:tabular-nums}.viewer-control{width:48px;height:48px;border:0;border-radius:8px;display:grid;place-items:center;background:#303438;color:#fff}.viewer-control:hover{background:#454b51}.viewer-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 80px;touch-action:pan-y pinch-zoom}.viewer-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain;color:#fff;font-size:.875rem}.viewer-stage .previous,.viewer-stage .next{position:absolute;top:calc(50% - 24px);z-index:1}.previous{left:16px}.next{right:16px}.viewer-bottom{display:flex;justify-content:space-between;align-items:center;padding:16px 24px max(16px,env(safe-area-inset-bottom));font-size:.875rem;font-variant-numeric:tabular-nums;min-height:80px}.viewer-heart{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 20px;color:#fff;background:#303438;border:0;border-radius:8px;font-weight:600}.viewer-heart[aria-pressed=true]{background:var(--heart)}.viewer-heart[aria-pressed=true] svg{fill:#fff}.viewer-heart:hover{filter:brightness(1.15)}#viewer-error{position:absolute;max-width:70%;text-align:center}body:has(dialog[open]){overflow:hidden}
@media(min-width:1500px){.gallery{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1200px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.toolbar p{display:none}}
@media(max-width:850px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.page-header{align-items:flex-start;flex-direction:column;gap:12px}.owner-heading{align-items:flex-start;flex-direction:column;gap:8px}}
@media(max-width:560px){:root{--space:16px}.page-header{padding-top:24px;padding-bottom:20px}.page-header p{font-size:.875rem}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo-open{aspect-ratio:1;border-radius:10px}.photo-footer{min-height:46px}.toolbar{padding:12px 0}.filter{padding:10px 12px;font-size:.875rem}.owner-panel{padding:18px 16px}.owner-links{gap:12px}.export-form{gap:12px}.export-form input{width:72px}.viewer-stage{padding:0 8px}.viewer-stage .viewer-control{top:auto;bottom:12px;background:#303438}.viewer-bar{padding:8px 12px}.viewer-bottom{padding-left:16px;padding-right:16px}.viewer-heart{padding:10px 14px}.export-row progress{width:100%}}
@media(prefers-reduced-motion:no-preference){.heart-button svg,.viewer-heart svg{transition:fill .15s ease-out,stroke .15s ease-out}.viewer[open]{animation:appear .15s ease-out}@keyframes appear{from{opacity:.7}to{opacity:1}}}