/* Shared styles for "Vechta einst und jetzt" */
:root{--bg:#f6f3ee;--fg:#222;--accent:#8a4b2a;--max:960px}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--fg);line-height:1.5}
header,main,footer{max-width:var(--max);margin:0 auto;padding:1rem}
a{color:var(--accent)}
h1{font-size:1.6rem;margin:.3rem 0}
.sub{color:#666;margin:0 0 1rem}
.tabs{display:flex;gap:.5rem;margin:1rem 0}
.tabs button{flex:1;padding:.7rem;border:2px solid var(--accent);background:#fff;color:var(--accent);font-size:1rem;border-radius:8px;cursor:pointer}
.tabs button[aria-pressed=true]{background:var(--accent);color:#fff}
.stack figure{margin:0 0 1rem}
.stack img{width:100%;height:auto;display:block;border-radius:6px}
figcaption{font-size:.9rem;color:#555;margin-top:.3rem}
.cmp{position:relative;width:100%;aspect-ratio:var(--ar);overflow:hidden;border-radius:6px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .top{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.cmp .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 4px #0008;pointer-events:none}
.cmp .handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--accent);display:grid;place-items:center;font-size:1.4rem;box-shadow:0 0 6px #0008}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp .tag{position:absolute;top:8px;padding:2px 8px;background:#000a;color:#fff;font-size:.8rem;border-radius:4px}
.cmp .tag.l{left:8px}.cmp .tag.r{right:8px}
hr{border:0;border-top:1px solid #ccc;margin:1.5rem 0}
[hidden]{display:none!important}
footer{font-size:.9rem;color:#666}
.cmp.fade .top{clip-path:none;opacity:calc(1 - var(--pos,50%) / 100%)}
.cmp.fade .handle{display:none}
.cmp.fade input{opacity:1;inset:auto 5% 10px;width:90%;height:28px;cursor:pointer}
h2{font-size:1.2rem;margin:1.5rem 0 .5rem}
.thumbs{display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem}
.thumb{flex:0 0 46%;scroll-snap-align:start;text-decoration:none;color:#444;font-size:.85rem}
.thumb img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;display:block;background:#ddd}
@media(min-width:700px){.thumbs{flex-wrap:wrap;overflow:visible}.thumb{flex:0 0 calc(25% - .45rem)}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
@media(min-width:700px){.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
.tile{position:relative;display:block;background:#fff;border-radius:8px;overflow:hidden;text-decoration:none;color:var(--fg);box-shadow:0 1px 4px #0002}
.tile img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:#ddd}
.tile .t{display:block;padding:.4rem .6rem;font-size:.95rem}
.tile .n{position:absolute;top:6px;right:6px;background:var(--accent);color:#fff;font-size:.75rem;padding:1px 7px;border-radius:10px}
.lb{border:0;padding:0;background:#000e;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.lb::backdrop{background:#000c}
.lb figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem .5rem 1rem}
.lb img{max-width:100%;max-height:calc(100% - 3rem);object-fit:contain}
.lb figcaption{color:#ddd;text-align:center;padding:.5rem}
.lb figcaption a{color:#fc9}
.lb button{position:absolute;background:#0008;color:#fff;border:0;font-size:2rem;width:48px;height:48px;border-radius:50%;cursor:pointer;z-index:1}
.lb .x{top:8px;right:8px}.lb .prev{left:8px;top:50%}.lb .next{right:8px;top:50%}
nav.top{font-size:.95rem}
.onmap{font-size:.95rem}