.live{width:100%;margin:1.2rem 0 2rem;padding:1.6rem clamp(1rem,3vw,2rem);background:rgba(8,20,47,.72);border:1px solid rgba(255,211,107,.25);border-radius:18px;box-shadow:0 10px 40px rgba(0,0,0,.35);text-align:left;color:#fff}
.live-badge{margin:0 0 .4rem;text-align:center;font-size:.8rem;letter-spacing:.12em;font-weight:700;color:#ff6b70}.live-badge em{font-style:normal;letter-spacing:0;font-weight:400;color:#cbd5e1}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:#ff2b33;box-shadow:0 0 0 0 rgba(255,43,51,.7);animation:lp 1.6s infinite;vertical-align:middle;margin-right:.3rem}@keyframes lp{70%{box-shadow:0 0 0 10px rgba(255,43,51,0)}100%{box-shadow:0 0 0 0 rgba(255,43,51,0)}}
.count{margin:.2rem 0 0;text-align:center;font-size:clamp(1.5rem,4vw,2.3rem);font-weight:700}.count strong{display:block;font-size:clamp(3.4rem,11vw,6rem);line-height:1;color:#ffd36b;text-shadow:0 2px 18px rgba(255,211,107,.35)}
.count-note{text-align:center;margin:.5rem 0 1.6rem;font-size:.85rem;color:#cbd5e1}
.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}.live-grid .live-side{order:1;min-width:0}.live-grid .journal{order:2;min-width:0}
.map{margin:0}.map img{width:100%;height:auto;border-radius:12px;display:block;border:1px solid rgba(255,255,255,.12)}.map figcaption{font-size:.85rem;color:#ffd36b;margin-top:.5rem;text-align:center}
.journal h3{margin:0 0 .8rem;font-size:1.15rem}.journal ol{list-style:none;margin:0;padding:0 0 0 1rem;border-left:2px solid rgba(255,211,107,.4)}
.j{position:relative;margin:0 0 1.2rem;padding:.8rem 1rem;background:rgba(255,255,255,.07);border-radius:12px}.j::before{content:"";position:absolute;left:calc(-1rem - 7px);top:1.05rem;width:12px;height:12px;border-radius:50%;background:#d71f26;border:2px solid #fff}
.j:first-child::before{background:#ff2b33;box-shadow:0 0 8px #ff2b33}.jm{font-size:.8rem;color:#cbd5e1}.jm time{color:#ffd36b;font-weight:600}.j p{margin:.3rem 0;line-height:1.45}.j small{color:#94a3b8}
.j img,.ph{width:100%;border-radius:8px;margin:.4rem 0;display:block;aspect-ratio:16/9;object-fit:cover}.ph{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,rgba(255,255,255,.06) 0 10px,rgba(255,255,255,.1) 10px 20px);color:#cbd5e1;font-size:.85rem}
@media (max-width:760px){.live-grid{grid-template-columns:1fr}}
.live[hidden],.live [hidden]{display:none!important}
.map-box{position:relative}.map-box svg{position:absolute;inset:0;width:100%;height:100%}
.map-box .r{fill:none;stroke:#ffd36b;stroke-width:2.4;stroke-dasharray:6 5;stroke-linecap:round;stroke-linejoin:round}
.map-box .pulse{fill:#ff2b33;transform-box:fill-box;transform-origin:center;animation:pu 1.8s ease-out infinite}@keyframes pu{0%{transform:scale(.6);opacity:.8}100%{transform:scale(3.2);opacity:0}}
.map-box .home{fill:#fff;stroke:#d71f26;stroke-width:2}.map-box .truck{fill:#ff2b33;stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 6px #ff2b33)}.map-box text{font:600 13px system-ui,sans-serif;fill:#fff;paint-order:stroke;stroke:#0b1a38;stroke-width:3px}
@media (prefers-reduced-motion:reduce){.map-box .pulse,.dot{animation:none}}
.live-archive{margin:-.6rem 0 1.6rem;font-size:.9rem;color:#cbd5e1}.live-archive button{background:none;border:0;padding:.2rem .3rem;font:inherit;color:#ffd36b;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.live-archive button:hover{color:#fff}
.archive-dialog{width:min(62rem,calc(100% - 1.5rem));max-height:92dvh;padding:0;border:0;background:transparent;color:#fff;overflow:auto}.archive-dialog::backdrop{background:rgba(3,8,22,.75)}
.archive-inner{position:relative;margin:0;background:rgba(8,20,47,.97)}.archive-close{position:absolute;top:.6rem;right:.8rem;background:none;border:0;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.archive-inner .count span{display:block}#archive-head{font-size:1rem;letter-spacing:.1em;color:#ff6b70;font-weight:700;text-transform:uppercase;margin-bottom:.4rem}#archive-sub{margin-bottom:1.4rem}
.archive-inner .map{position:static}
/* Mehrere Fotos pro Eintrag: wischbare Galerie (scroll-snap) mit Punkten */
.jg{margin:.4rem 0}.jg-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.jg-track::-webkit-scrollbar{display:none}
.jg-track:focus-visible{outline:2px solid #ffd36b;outline-offset:2px}.jg-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}.jg .jg-slide img{margin:0;border-radius:0}
.jg-dots{display:flex;justify-content:center;gap:6px;margin-top:.45rem}.jg-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer}.jg-dots button.on{background:#ffd36b}
.j img{height:auto}

/* Live-Tagebuch: Desktop = Scrollbox (Höhe per JS an Karte angepasst), Handy = neueste 5 + Button */
.journal{position:relative}
.j-scroll{overflow-y:auto;overscroll-behavior:contain;padding-right:.5rem;border-radius:12px;scrollbar-width:thin;scrollbar-color:rgba(255,211,107,.45) transparent}
.j-scroll:focus-visible{outline:2px solid #ffd36b;outline-offset:4px}
.j-scroll::-webkit-scrollbar{width:6px}.j-scroll::-webkit-scrollbar-track{background:transparent}.j-scroll::-webkit-scrollbar-thumb{background:rgba(255,211,107,.4);border-radius:6px}.j-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,211,107,.7)}
.j-scroll ol .j:last-child{margin-bottom:.4rem}
.journal::after{content:"";position:absolute;left:0;right:.5rem;bottom:0;height:3.5rem;pointer-events:none;background:linear-gradient(rgba(8,20,47,0),rgba(8,20,47,.95));opacity:0;transition:opacity .2s;border-radius:0 0 12px 12px}
.journal.j-more-below::after{opacity:1}
.j-more-wrap{margin:.4rem 0 0;text-align:center}
.j-more-wrap[hidden],.j-more-wrap:has(> [hidden]){display:none}
@media (min-width:761px){.j-more-wrap{display:none!important}}
@media (max-width:760px){.j-scroll{overflow:visible;max-height:none!important;padding-right:0}.journal::after{display:none}.j-collapsed>.j:nth-child(n+6){display:none}}

/* v6: Punkt in der Zeitleiste nicht mehr abschneiden (Scrollbox clippt links) */
.j-scroll{padding-left:14px}
.j::before{left:calc(-1rem - 9px)}
/* v6: Einträge deckender, damit Hintergrund (Schneewelle) nicht durchscheint */
.j{background:rgba(32,46,82,.92)}
/* v6: Fade oben+unten per Maske statt Overlay -> keine angeschnittene Kartenkante ("feine Linie") oben */
.journal::after{display:none}
@media (min-width:761px){
 .j-scroll{--ft:0px;--fb:0px;-webkit-mask-image:linear-gradient(transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent);mask-image:linear-gradient(transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent)}
 .journal.j-more-above .j-scroll{--ft:2rem}.journal.j-more-below .j-scroll{--fb:3.5rem}
}
/* v6: Fotogalerie unter der Karte (Polaroids wie im Rückblick, .rb-photo) – nur Desktop */
.live-gal{margin-top:1.4rem}
.lg-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.2rem}.lg-head h3{margin:0;font-size:1.15rem}
.lg-nav{display:flex;gap:.4rem}.lg-btn{width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid rgba(255,211,107,.45);background:rgba(255,255,255,.08);color:#ffd36b;font-size:1.4rem;line-height:1;cursor:pointer}
.lg-btn:hover:not(:disabled){background:rgba(255,211,107,.2)}.lg-btn:disabled{opacity:.3;cursor:default}
.lg-track{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:1rem .6rem 1.1rem;scrollbar-width:thin;scrollbar-color:rgba(255,211,107,.45) transparent}
.lg-track:focus-visible{outline:2px solid #ffd36b;outline-offset:2px}
.lg-track .rb-photo{flex:0 0 auto;width:auto;margin:0;scroll-snap-align:start;cursor:zoom-in;padding:6px 6px 18px}
.lg-track .rb-photo img{width:auto;height:150px;aspect-ratio:var(--ar);object-fit:cover}
.lg-track .rb-photo:focus-visible{outline:3px solid #ffd36b;outline-offset:3px}
@media (max-width:760px){.live-gal{display:none!important}}
.live-lb{z-index:200}

/* v7: Überschrift nur für Screenreader -> Zeitstrahl bündig mit Karte */
.j-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* v7: Fotos im Eintrag nicht mehr auf 16:9 zuschneiden; Hochkant komplett (contain), Höhe begrenzt */
.j img{aspect-ratio:auto;max-height:min(440px,70vh);object-fit:contain;background:rgba(0,0,0,.35)}
.jg-track{aspect-ratio:var(--jar,16/9);max-height:min(440px,70vh)}.jg .jg-slide img{width:100%;height:100%;max-height:none}

/* v8: Instagram-Prinzip – Hochkant höchstens 4:5 (höhere Bilder zugeschnitten, Fokuspunkt per object-position), Quer/Quadrat vollständig */
.j img{aspect-ratio:var(--iar,auto);object-fit:cover;max-height:none;background:rgba(0,0,0,.35)}
.jg-track{max-height:none}.jg .jg-slide img{aspect-ratio:auto;object-fit:contain}.jg .jg-slide img.j-tall{object-fit:cover}
@media (max-height:560px){.j img{max-height:85vh}.jg-track{max-height:85vh}}
.lg-track .rb-photo img{object-fit:cover}

/* v9: Desktop-Spalte höher, linke Seite luftig verteilt; Mehr-Button im Gold-Stil; Nach-oben-Button (Handy) */
@media (min-width:761px){.live-grid .live-side{display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem}}
.j-more-btn{background:rgba(8,20,47,.75);color:#ffd36b;border:2px solid #ffd36b;font:inherit;font-weight:700;cursor:pointer;min-height:2.75rem}
.j-more-btn:hover{background:#ffd36b;color:#0f1d3a}
.live-top{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:20;width:48px;height:48px;border-radius:50%;border:2px solid #0f1d3a;background:#ffd36b;color:#0f1d3a;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.45);cursor:pointer;padding:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s,transform .2s,visibility .2s}
.live-top.on{opacity:1;visibility:visible;transform:none}
.live-top:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (min-width:761px){.live-top{display:none}}
@media (prefers-reduced-motion:reduce){.live-top{transition:none}}

/* v10: größere Polaroids (Desktop) */
.lg-track .rb-photo img{height:200px}

/* v11: Desktop-Karte hochformatiger (picture) */
.map-box picture{display:block}