/* Schriften lokal (aus node_modules/@fontsource, vom Server unter /fonts ausgeliefert) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/cormorant/cormorant-garamond-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/cormorant/cormorant-garamond-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter/inter-latin-600-normal.woff2') format('woff2')}

:root{--bg:#f7f2ea;--card:#fffdf9;--ink:#2f2a24;--muted:#8a8073;--line:#e6ddd0;--sage:#6f8460;--sage-d:#56684a;--gold:#b08d57;--rose:#c46a5a;--radius:18px;--serif:'Cormorant Garamond',Georgia,serif;--sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:#e9e1d4;font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit}
[hidden]{display:none!important}

#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg);position:relative;padding-bottom:100px;box-shadow:0 0 40px rgba(0,0,0,.08)}
#app.no-nav{padding-bottom:32px}

header.top{padding:22px 20px 14px;text-align:center;border-bottom:1px solid var(--line);position:relative}
header.top .names{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:.5px}
header.top .date{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-top:2px}
header.top .out{position:absolute;top:12px;right:12px;background:none;border:0;font-size:13px;color:var(--muted);cursor:pointer;padding:8px}
main{padding:18px 16px}

h2{font-family:var(--serif);font-size:27px;font-weight:600;margin-bottom:6px;line-height:1.1}
h3{font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:4px}
p.sub{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:14px}
.center{text-align:center}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 18px;font:600 15px var(--sans);cursor:pointer;background:var(--sage);color:#fff;transition:transform .12s;text-decoration:none}
.btn:active{transform:scale(.97)}
.btn.block{width:100%}
.btn.big{padding:17px 18px;font-size:17px}
.btn.ghost{background:transparent;color:var(--sage-d);border:1.5px solid var(--sage)}
.btn.gold{background:var(--gold)}
.btn.sm{padding:9px 13px;font-size:13px}
.btn.danger{background:#b5594b}
.btn.plain{background:none;border:0;color:var(--muted)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn + .btn.block{margin-top:10px}

input[type=text],input[type=password]{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font:16px var(--sans);background:#fff;color:var(--ink);outline-color:var(--sage)}
label.l{display:block;font-size:13px;font-weight:600;margin:14px 0 6px;color:var(--muted)}
label.l:first-child{margin-top:0}
.err{color:#a0503f;font-size:14px;margin-top:10px;min-height:20px;line-height:1.4}

/* Willkommen */
.video{position:relative;aspect-ratio:9/16;max-height:60vh;margin:0 auto 16px;border-radius:var(--radius);overflow:hidden;background:#3b3a33;display:flex;align-items:center;justify-content:center;color:#f3e9d6;text-align:center}
.video video{width:100%;height:100%;object-fit:cover;background:#000}
.video .ph{padding:24px}
.video .play{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;border:2px solid rgba(255,255,255,.5)}
.video .play svg{width:28px;height:28px;fill:#f3e9d6;margin-left:4px}
.welcome{text-align:center;font-size:15px;line-height:1.6;margin-bottom:18px}

/* Navigation unten */
nav.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:rgba(255,253,249,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;align-items:flex-end;padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:20}
nav.bottom a{flex:1;background:none;border:0;font:500 12px var(--sans);color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:4px 0;text-decoration:none}
nav.bottom a svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
nav.bottom a.on{color:var(--sage-d);font-weight:600}
nav.bottom a.on svg{opacity:1}
nav.bottom a.up{color:var(--sage-d);font-weight:600}
nav.bottom a.up svg{width:56px;height:56px;padding:14px;border-radius:50%;background:var(--sage);stroke:#fff;stroke-width:2.2;opacity:1;margin-top:-26px;box-shadow:0 6px 16px rgba(86,104,74,.35);border:4px solid var(--bg);box-sizing:border-box}

.empty{text-align:center;color:var(--muted);padding:40px 10px;font-size:14px;line-height:1.6}

#toast{position:fixed;top:16px;left:50%;transform:translateX(-50%) translateY(-160%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:16px;font-size:14px;z-index:60;transition:transform .3s,visibility .3s;max-width:92%;width:max-content;text-align:center;line-height:1.4}
#toast{visibility:hidden}
#toast.on{transform:translateX(-50%) translateY(0);visibility:visible}

/* Pillen / Status */
.pill{display:inline-block;font-size:12px;padding:4px 10px;border-radius:999px;background:#ece3d5;color:var(--muted);font-weight:600;white-space:nowrap}
.pill.ok{background:var(--sage);color:#fff}
.pill.gold{background:var(--gold);color:#fff}
.pill.soon{background:#efe6d6;color:#8a6a3c}

/* Missionen */
.section-title{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-weight:600;margin:22px 4px 10px}
.section-title:first-of-type{margin-top:6px}
.mission .mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mission h3{margin-bottom:6px}
.mission .check{flex:none;width:28px;height:28px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.mission .mmeta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:10px}
.mission .when{font-size:13px;color:var(--muted)}
.mission .tip{font-size:14.5px;line-height:1.55;background:#f3ebde;border-radius:12px;padding:11px 13px}
.mission .mfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.mission .mfoot:empty{display:none}
.mission .mine{font-size:13px;color:var(--sage-d);font-weight:600}
.mission.upcoming{opacity:.6}
.mission.upcoming .tip{background:#f1ece4}
.mission.closed{opacity:.55}
.mission.closed .tip{display:none}

/* Hochladen – Ziel wählen */
.targets{display:grid;gap:10px;margin-bottom:16px}
.target{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;font:inherit;transition:transform .12s,border-color .12s}
.target:active{transform:scale(.98);border-color:var(--sage)}
.target .tx{flex:1;min-width:0}
.target .t{display:block;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.15}
.target .s{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.target .go{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sage);display:flex;align-items:center;justify-content:center}
.target .go svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round}
.target.free{border-style:dashed}
.target.free .go{background:var(--gold)}
.hint{font-size:13px;color:var(--muted);line-height:1.55;text-align:center;padding:0 8px}

/* Upload-Liste (Detail) */
.qlist .qrow{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.qlist .qrow:last-child{border:0}
.qlist .qrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qlist .qrow .st{color:var(--muted);text-align:right;max-width:60%}
.qlist .qrow.error .st{color:#a0503f}
.qlist .qrow.done .st{color:var(--sage-d)}

/* Upload-Anzeige über der Navigation */
#queue{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));width:calc(100% - 24px);max-width:456px;z-index:15;pointer-events:none}
#queue .qi{pointer-events:auto;display:flex;gap:10px;align-items:center;background:var(--ink);color:#fff;border-radius:14px;padding:10px 12px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.2)}
#queue .qi .ic{flex:none;width:40px;height:40px;border-radius:8px;background:#55504a center/cover no-repeat;display:flex;align-items:center;justify-content:center}
#queue .qi .ic svg{width:20px;height:20px;fill:#f3e9d6}
#queue .qi .tx{flex:1;min-width:0}
#queue .qi .l1{display:flex;justify-content:space-between;gap:8px}
#queue .qi .l1 span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#queue .qi .l1 .cnt{opacity:.65;flex:none}
#queue .qi .l2{opacity:.8;font-size:11.5px;margin-top:2px}
#queue .bar{height:4px;background:rgba(255,255,255,.2);border-radius:4px;margin-top:6px;overflow:hidden}
#queue .bar i{display:block;height:100%;background:var(--gold);transition:width .25s}
#queue .qi.off .bar i{background:#d27a6a}

/* Galerie */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin:0 -16px 12px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:500 13px var(--sans);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.gal .ph{aspect-ratio:1;border-radius:6px;position:relative;cursor:pointer;border:0;padding:0;background:#ddd4c6;overflow:hidden}
.gal .ph img{width:100%;height:100%;object-fit:cover;display:block}
.gal .me{position:absolute;top:5px;left:5px;font-size:10.5px;font-weight:600;background:rgba(47,42,36,.78);color:#fff;padding:2px 7px;border-radius:999px}
.gal .vd{position:absolute;bottom:5px;right:5px;font-size:11px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);padding:2px 6px 2px 4px;border-radius:999px;display:flex;align-items:center;gap:2px}
.gal .vd svg{width:12px;height:12px;fill:#fff}
.gal .pd{position:absolute;inset:0;background:rgba(255,253,249,.62);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;text-align:center;padding:4px;line-height:1.3}

/* Overlays */
#ov{position:fixed;inset:0;z-index:50;display:none}
#ov.on{display:block}
.lb{position:absolute;inset:0;background:rgba(20,18,15,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 12px calc(24px + env(safe-area-inset-bottom))}
.lb .media{display:flex;align-items:center;justify-content:center;max-width:100%;min-height:0;flex:0 1 auto}
.lb img,.lb video{max-width:100%;max-height:68vh;max-height:68dvh;border-radius:10px;display:block}
.lb video{background:#000;width:100%}
.lb .cap{color:#f3e9d6;text-align:center;margin-top:14px;font-size:14px;line-height:1.55}
.lb .x{position:absolute;top:8px;right:10px;background:none;border:0;color:#fff;font-size:34px;cursor:pointer;width:48px;height:48px;line-height:1}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;width:44px;height:64px;border-radius:12px;cursor:pointer;font-size:26px}
.lb .nav.p{left:6px}
.lb .nav.n{right:6px}
.lb .acts{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px}
.lb .btn.ghost{color:#f3e9d6;border-color:rgba(243,233,214,.7)}
.lb .note{color:rgba(243,233,214,.65);font-size:12.5px;text-align:center}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:22px 16px calc(20px + env(safe-area-inset-bottom));animation:up .25s ease}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet .btn{margin-top:8px}

/* Abstimmung */
.notice{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;background:#f3ebde;border-color:#e8dcc8}
.notice .nheart svg{width:22px;height:22px;fill:#c46a5a;flex:none;margin-top:1px}
.gal .vt{position:absolute;bottom:5px;left:5px;display:flex;align-items:center;gap:2px;font-size:11px;font-weight:700;color:#fff;background:rgba(196,106,90,.9);padding:2px 7px 2px 5px;border-radius:999px}
.gal .vt svg{width:11px;height:11px;fill:#fff}
.hearts{display:flex;gap:4px}
.hearts button{background:none;border:0;cursor:pointer;padding:6px;line-height:0;transition:transform .12s}
.hearts button svg{width:34px;height:34px;fill:none;stroke:#f3e9d6;stroke-width:1.6}
.hearts button.on svg{fill:#e0796a;stroke:#e0796a}
.hearts button:active{transform:scale(1.2)}
.likebtn svg{width:18px;height:18px;fill:currentColor}
.lb .btn.gold{color:#fff}

/* Scoreboard (Gäste) */
.board .brow{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line)}
.board .brow:last-child{border:0}
.board .rk{font-family:var(--serif);font-size:24px;font-weight:600;width:34px;text-align:center;color:var(--muted)}
.board .brow.top .rk{color:var(--gold)}
.board .nm{flex:1;min-width:0;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .ms{font-size:12px;color:var(--muted);white-space:nowrap}
.board .pt{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--sage-d);min-width:52px;text-align:right}
.board .brow.me{background:#eef2e8;margin:0 -14px;padding-left:18px;padding-right:18px;border-radius:12px;border-color:transparent}
.board .you{display:inline-block;font-size:10.5px;font-weight:600;background:var(--sage);color:#fff;padding:1px 7px;border-radius:999px;vertical-align:2px;margin-left:4px}

/* Tastatur-Bedienung: sichtbarer Fokus */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:0}

/* Archiv-Hinweis */
.archive-note{background:#efe6d6;border-color:#e0d2b8}