/* Stadtquartier · p77.css · Paket 77 (14.10.2026): Fotos sortieren, Vorprüfung, Team-Anmeldung in der App, Offline-Hinweis */

/* ---------- Cockpit: Fotos sortieren ---------- */
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;user-select:none;-webkit-user-select:none}
.pm-tile{position:relative;border-radius:14px;background:var(--card);border:1px solid var(--line);overflow:hidden;cursor:grab;transition:box-shadow .25s,border-color .25s,opacity .25s;outline:none}
.pm-tile:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.pm-tile:focus-visible{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.pm-tile:first-child:not(.off){border-color:var(--orange);box-shadow:0 0 0 2px var(--orange-soft)}
.pm-tile.off{opacity:.5}
.pm-tile.off .pm-ph img{filter:grayscale(1)}
.pm-tile.pm-drag{opacity:.25;box-shadow:none}
.pm-tile.pm-dropped{animation:pmdrop .6s var(--ease)}
@keyframes pmdrop{0%{box-shadow:0 0 0 0 rgba(255,81,0,.5)}100%{box-shadow:0 0 0 14px rgba(255,81,0,0)}}
.pm-ph{position:relative;aspect-ratio:4/3;background:var(--paper-2)}
.pm-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.pm-n{position:absolute;left:8px;top:8px;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:rgba(0,22,34,.72);color:#fff;font:600 12px/24px var(--sans);text-align:center}
.pm-cover{position:absolute;left:8px;bottom:8px;padding:3px 9px;border-radius:999px;background:var(--orange);color:#fff;font:600 11px/1.4 var(--sans)}
.pm-offtag{position:absolute;left:8px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(0,22,34,.78);color:#fff;font:600 11px/1.4 var(--sans)}
.pm-grip{position:absolute;right:6px;top:6px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.88);color:#00263A;cursor:grab;touch-action:none}
.pm-grip svg{width:16px;height:16px}
.pm-tools{display:flex;justify-content:space-between;gap:2px;padding:6px}
.pm-b{flex:1;height:30px;border:0;border-radius:9px;background:transparent;color:var(--charcoal);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.pm-b:hover{background:var(--paper-2);color:var(--ink)}
.pm-b:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.pm-b.warn:hover,.pm-b.sure{background:var(--err-soft);color:var(--err)}
.pm-b.sure{font-weight:700}
.pm-ghost{position:fixed;z-index:9500;pointer-events:none;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--orange);box-shadow:0 30px 60px -20px rgba(0,22,34,.45);transform:scale(1.04) rotate(-1.5deg);transition:transform .15s}
.pm-ghost .pm-tools{display:none}
@media (pointer:coarse){.pm-tile{cursor:default}.pm-grip{width:38px;height:38px}}

/* ---------- Vorprüfung ---------- */
.p77-block .mt0{margin-top:0}
.p77-list,.p77-ready ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.p77-list li,.p77-ready li{display:flex;gap:10px;align-items:flex-start}
.p77-list li>span:last-child,.p77-ready li>span{display:grid;gap:2px}
.p77-list b,.p77-ready b{font-weight:600;color:var(--ink);font-size:14.5px}
.p77-list em,.p77-ready em{font-style:normal;color:var(--muted);font-size:13.5px;line-height:1.45}
.p77-ic{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.p77-list li.ok .p77-ic{background:var(--ok-soft);color:var(--ok)}
.p77-list li.no .p77-ic{background:var(--orange-soft);color:var(--orange-text)}
.p77-ready{padding:14px 16px;border-radius:14px;background:var(--orange-soft);border:1px solid rgba(255,81,0,.25)}
.p77-ready>b{font-size:14px}
.p77-ready li svg{flex:none;margin-top:2px}
.p77-ready li.ok svg{color:var(--ok)}.p77-ready li.no svg{color:var(--orange-text)}
.p77-ready li.ok b{font-weight:500;color:var(--muted)}
.mb12{margin-bottom:12px}

/* ---------- App: Anmelde-Animation im Telefon, Team-Anmeldung ---------- */
.sqa-screen .afx.in-app{position:absolute;inset:0;z-index:60;border-radius:inherit}
.sqa-screen .afx.in-app .afx-card{min-width:0;width:calc(100% - 40px);padding:28px 22px 24px}
.sqa-tlogin form{text-align:left}
.sqa-tlogin .err-msg{color:var(--err);min-height:1.2em;margin:8px 0 0}
.sqa-tl-back{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:14px;color:var(--orange-text);text-decoration:none}

/* ---------- Offline-Hinweis ---------- */
#p77-off{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top));z-index:9800;display:flex;gap:10px;align-items:center;max-width:min(560px,calc(100vw - 24px));padding:10px 16px;border-radius:14px;background:#00263A;color:#F4EFE8;font:500 13.5px/1.4 var(--sans);box-shadow:0 18px 40px -16px rgba(0,0,0,.45);transform:translate(-50%,-140%);transition:transform .45s var(--ease)}
#p77-off.on{transform:translate(-50%,0)}
#p77-off svg{flex:none;color:#ff7a3d}
@media (prefers-reduced-motion:reduce){.pm-tile.pm-dropped{animation:none}#p77-off{transition:none}.pm-ghost{transition:none}}

/* ---------- Cockpit: Besucher & Statistik ---------- */
.s7{--s7-1:#E8581F;--s7-2:#2A78D6;--s7-3:#1BAF7A;--s7-4:#EDA100;--s7-5:#8A63D2;--s7-o:#9AA6AD;--s7-seq:232,88,31}
[data-theme=dark] .s7{--s7-1:#EB5A20;--s7-2:#3987E5;--s7-3:#199E70;--s7-4:#C98500;--s7-5:#9085E9;--s7-o:#6E7F8A;--s7-seq:255,122,61}
.s7-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.s7-kick{display:inline-flex;gap:6px;align-items:center;font:600 12px/1 var(--sans);color:var(--orange-text);margin-bottom:8px}
.s7-ctl{display:flex;gap:8px;align-items:center}
.s7-ctl .seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.s7-body{min-height:240px;transition:opacity .25s}
.s7-body.busy{opacity:.45}
.s7-body.in>*{animation:s7in .55s var(--ease) both}
.s7-body.in>*:nth-child(2){animation-delay:.06s}.s7-body.in>*:nth-child(3){animation-delay:.12s}.s7-body.in>*:nth-child(4){animation-delay:.18s}.s7-body.in>*:nth-child(5){animation-delay:.24s}
@keyframes s7in{from{opacity:0;transform:translateY(12px)}}
.s7-load{display:flex;gap:10px;align-items:center;color:var(--muted);padding:40px 0}
.s7-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.s7-kpi{position:relative;display:grid;gap:4px;padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--line);overflow:hidden}
.s7-kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);transform:scaleY(0);transform-origin:top;animation:s7bar .8s .2s var(--ease) forwards}
@keyframes s7bar{to{transform:none}}
.s7-kl{font-size:13px;color:var(--muted)}
.s7-kv{font:400 34px/1.05 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.s7-ks{font-size:12.5px;color:var(--muted)}
.s7-d{display:inline-flex;align-items:center;gap:4px;width:max-content;font:600 12px/1 var(--sans);padding:4px 8px;border-radius:999px;background:var(--paper-2);color:var(--muted)}
.s7-d.up{background:var(--ok-soft);color:var(--ok)}.s7-d.up svg{transform:rotate(-45deg)}
.s7-d.down{background:var(--err-soft);color:var(--err)}.s7-d.down svg{transform:rotate(-45deg)}
.s7-d.n{font-weight:500}
.s7-grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.s7-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1100px){.s7-grid2,.s7-grid3{grid-template-columns:minmax(0,1fr)}}
.s7-card .s7-ch{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.s7-card .s7-ch p{margin-top:4px}
.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}
.s7-empty{display:flex;gap:10px;align-items:center;padding:18px;border-radius:12px;background:var(--paper-2);color:var(--muted);font-size:14px}
.s7-cap{font-size:12px;color:var(--muted);margin:10px 0 0}
/* Fläche */
.s7-area{width:100%;height:auto;overflow:visible;display:block}
.s7-tk line{stroke:var(--line);stroke-width:1}
.s7-tk text,.s7-xl{font:500 11px var(--sans);fill:var(--muted)}
.s7-af{fill:rgba(var(--s7-seq),.12);opacity:0;animation:s7fade .8s .5s var(--ease) forwards}
.s7-al{fill:none;stroke:var(--s7-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:s7draw 1.2s var(--ease) forwards}
.s7-area.alt .s7-al{stroke:var(--s7-2)}.s7-area.alt .s7-af{fill:rgba(42,120,214,.12)}.s7-area.alt .s7-last{fill:var(--s7-2)}
.s7-last{fill:var(--s7-1);stroke:var(--card);stroke-width:2;opacity:0;animation:s7fade .3s 1.1s forwards}
.s7-cross{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.s7-cross.on{opacity:.4}
.s7-dot{fill:var(--card);stroke:var(--s7-1);stroke-width:2.5;opacity:0}.s7-dot.on{opacity:1}
.s7-hit{fill:transparent;outline:none}
@keyframes s7draw{to{stroke-dashoffset:0}}
@keyframes s7fade{to{opacity:1}}
/* Balken */
.s7-bars{display:grid;gap:8px}
.s7-bar{display:grid;grid-template-columns:minmax(90px,40%) minmax(0,1fr) auto;gap:10px;align-items:center;outline:none;border-radius:8px}
.s7-bar:focus-visible{box-shadow:0 0 0 2px var(--orange-soft)}
.s7-bl{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s7-bt{height:10px;border-radius:5px;background:var(--paper-2);overflow:hidden}
.s7-bt i{display:block;height:100%;width:var(--w);border-radius:0 4px 4px 0;background:var(--c,var(--s7-1));transform:scaleX(0);transform-origin:left;animation:s7grow .8s calc(var(--i) * .05s + .1s) var(--ease) forwards}
.s7-bar:hover .s7-bt i{filter:brightness(1.08)}
@keyframes s7grow{to{transform:none}}
.s7-bv{font:600 13.5px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.s7-bv em{font-style:normal;font-weight:500;color:var(--muted);margin-left:6px;font-size:12px}
/* Ring */
.s7-donut{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:center}
.s7-donut svg{width:132px;height:132px;transform:rotate(-90deg)}
.s7-donut text{transform:rotate(90deg);transform-origin:60px 60px}
.s7-ring{fill:none;stroke:var(--paper-2);stroke-width:14}
.s7-seg{fill:none;stroke:var(--c);stroke-width:14;stroke-dashoffset:var(--off);animation:s7sweep .9s calc(var(--i) * .08s + .1s) var(--ease) forwards;outline:none;cursor:default}
.s7-seg:hover,.s7-seg:focus-visible{stroke-width:17}
@keyframes s7sweep{to{stroke-dasharray:var(--len) 400}}
.s7-dc{font:400 22px var(--serif);fill:var(--ink)}.s7-ds{font:500 9.5px var(--sans);fill:var(--muted)}
.s7-leg{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.s7-leg li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:13.5px;color:var(--ink)}
.s7-leg li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s7-leg i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.s7-leg b{font-weight:600;font-variant-numeric:tabular-nums}.s7-leg em{font-style:normal;color:var(--muted);font-size:12px;min-width:3ch;text-align:right}
/* Heatmap */
.s7-heat{display:grid;gap:3px;overflow-x:auto}
.s7-hh,.s7-hr{display:grid;grid-template-columns:28px repeat(24,minmax(12px,1fr));gap:3px;align-items:center}
.s7-hh span{font:500 10.5px var(--sans);color:var(--muted);text-align:left}
.s7-hr>span{font:600 12px var(--sans);color:var(--muted)}
.s7-hr i{aspect-ratio:1;border-radius:4px;background:rgba(var(--s7-seq),var(--a));box-shadow:inset 0 0 0 1px var(--line);opacity:0;animation:s7fade .4s calc(var(--k) * 4ms) forwards;outline:none}
.s7-hr i:hover,.s7-hr i:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
/* Funnel */
.s7-fun{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.s7-fun li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 12px;align-items:center;outline:none}
.s7-fl{grid-column:1 / -1;font-size:13.5px;color:var(--ink)}
.s7-fb{height:26px;border-radius:8px;background:var(--paper-2);overflow:hidden}
.s7-fb i{display:block;height:100%;width:var(--w);border-radius:8px;background:linear-gradient(90deg,var(--s7-1),#ff8a4d);transform:scaleX(0);transform-origin:left;animation:s7grow .9s calc(var(--i) * .12s + .1s) var(--ease) forwards}
.s7-fun li:nth-child(n+3) .s7-fb i{background:linear-gradient(90deg,#00263A,#2b5671)}
[data-theme=dark] .s7-fun li:nth-child(n+3) .s7-fb i{background:linear-gradient(90deg,#3987E5,#6aa6ee)}
.s7-fun b{font:400 22px var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.s7-fun em{font-style:normal;font:600 12px var(--sans);color:var(--muted);min-width:5ch;text-align:right}
/* Live */
.s7-live{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.s7-live b{font:400 46px/1 var(--serif);color:var(--ink)}
.s7-live>span:last-child{color:var(--muted);font-size:14px}
.s7-pulse{width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(46,107,79,.5);animation:s7pulse 1.8s infinite}
@keyframes s7pulse{0%{box-shadow:0 0 0 0 rgba(46,140,100,.55)}80%,100%{box-shadow:0 0 0 14px rgba(46,140,100,0)}}
.s7-livel{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.s7-livel li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:8px 10px;border-radius:10px;background:var(--paper-2)}
/* Empfehlungen */
.s7-ins{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.s7-ins li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;padding:12px;border-radius:14px;background:var(--paper-2);animation:s7in .5s calc(var(--i) * .07s + .2s) var(--ease) both}
.s7-ins b{font-size:14.5px;color:var(--ink);font-weight:600}
.s7-ins p{margin:4px 0 8px;font-size:13.5px;color:var(--muted);line-height:1.45}
.s7-ii{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--muted)}
.s7-ins li.warn .s7-ii{color:var(--err)}.s7-ins li.ok .s7-ii{color:var(--ok)}.s7-ins li.or .s7-ii{color:var(--orange-text)}.s7-ins li.info .s7-ii{color:var(--s7-2)}
/* Quadrant */
.s7-quad{width:100%;height:auto;display:block}
.s7-q{fill:var(--paper-2)}.s7-q.hi{fill:rgba(46,140,100,.09)}.s7-q.warn{fill:rgba(var(--s7-seq),.08)}
.s7-qt{font:600 11.5px var(--sans);fill:var(--muted)}
.s7-ax{stroke:var(--line-2);stroke-width:1.2}
.s7-pt{fill:var(--s7-1);fill-opacity:.85;stroke:var(--card);stroke-width:2;transform-box:fill-box;transform-origin:center;transform:scale(0);animation:s7pop .5s calc(var(--i) * .025s + .2s) cubic-bezier(.3,1.4,.5,1) forwards;outline:none}
.s7-pt:hover,.s7-pt:focus-visible{fill-opacity:1;stroke:var(--ink)}
@keyframes s7pop{to{transform:none}}
/* Tabelle */
.s7-tbl td.num,.s7-tbl th{white-space:nowrap}
.s7-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.s7-tbl tr.s7-warn td:first-child{box-shadow:inset 3px 0 0 var(--err)}
.s7-tbl tr.s7-hot td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.s7-sort{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0}
.s7-sort.on{color:var(--orange-text)}
/* Wien-Kacheln */
.s7-vie{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,auto);gap:6px;max-width:520px}
.s7-vt{grid-column:calc(var(--x) + 1);grid-row:calc(var(--y) + 1);aspect-ratio:1;border-radius:12px;background:rgba(var(--s7-seq),var(--a));box-shadow:inset 0 0 0 1px var(--line);display:grid;place-content:center;text-align:center;gap:2px;outline:none;transform:scale(.6);opacity:0;animation:s7tile .5s calc(var(--i) * .03s) var(--ease) forwards}
.s7-vt b{font:400 20px/1 var(--serif);color:var(--ink)}
.s7-vt span{font:600 11px var(--sans);color:var(--muted)}
.s7-vt.chance{box-shadow:inset 0 0 0 2px var(--orange)}
.s7-vt:hover,.s7-vt:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
@keyframes s7tile{to{transform:none;opacity:1}}
.s7-gap{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.s7-gap li{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:var(--paper-2)}
.s7-gap b{font-size:14px;color:var(--ink)}.s7-gap span{font-size:12.5px;color:var(--muted)}
.s7-gap i{height:4px;border-radius:2px;background:var(--orange);width:var(--w);transform:scaleX(0);transform-origin:left;animation:s7grow .8s .2s var(--ease) forwards}
/* Wege */
.s7-paths{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.s7-paths li{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13.5px;padding:8px 10px;border-radius:10px;background:var(--paper-2);animation:s7in .45s calc(var(--i) * .05s) var(--ease) both}
.s7-paths i{color:var(--orange-text)}
/* Tooltip */
.s7-tip{position:fixed;left:0;top:0;z-index:9600;max-width:300px;padding:8px 11px;border-radius:10px;background:#00263A;color:#F4EFE8;font:500 12.5px/1.4 var(--sans);box-shadow:0 14px 30px -12px rgba(0,0,0,.45);pointer-events:none;opacity:0;transition:opacity .12s}
.s7-tip.on{opacity:1}
@media (max-width:700px){.s7-donut{grid-template-columns:1fr;justify-items:center}.s7-kv{font-size:28px}.s7-bar{grid-template-columns:minmax(80px,38%) minmax(0,1fr) auto}}
@media (prefers-reduced-motion:reduce){.s7 *,.s7-body.in>*{animation:none!important}.s7-al{stroke-dashoffset:0}.s7-af,.s7-last,.s7-hr i,.s7-vt{opacity:1;transform:none}.s7-bt i,.s7-fb i,.s7-gap i{transform:none}.s7-pt{transform:none}.s7-seg{stroke-dasharray:var(--len) 400}.s7-kpi::after{transform:none}}
.s7-vt.dk b,.s7-vt.dk span{color:#fff}