/* Freunde-Seite: Ergänzungen zu app.css (Hub-Styles) */
html,body{overflow:auto;height:auto;min-height:100%}
.topbar .meta{pointer-events:auto}
.p-main{padding:80px 24px 48px}
.p-main .srv{display:grid;gap:16px}
.p-main h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);font-weight:600}
.p-main h3 svg{width:16px;height:16px}
.p-main .srv-head{margin-bottom:0}
.p-user{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.p-user #pWho{color:var(--muted);margin-right:4px}

/* Anmeldung */
.p-auth{min-height:calc(100vh - 140px);display:grid;place-items:center;align-content:center;gap:16px}
.p-auth-card{width:min(400px,100%);padding:28px;border-radius:calc(var(--r-card) + 4px);background:var(--glass2);border:1px solid var(--line2);box-shadow:var(--shadow);display:grid;gap:6px}
.p-auth-logo{width:52px;height:52px;border-radius:var(--r-card);display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);margin-bottom:6px}
.p-auth-logo svg{width:28px;height:28px}
.p-auth-card h1{margin:0;font-size:24px;font-family:var(--display)}
.p-auth-card p{margin:0 0 8px;color:var(--muted);font-size:13.5px;line-height:1.5}
.p-auth-card form,.p-pw form{display:grid;gap:12px}
.p-auth-card label,.p-pw label{display:grid;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
.p-auth-card input,.p-pw input{padding:11px 13px;border-radius:var(--r-ctl);border:1px solid var(--line2);background:var(--soft);color:var(--text);font:inherit;font-size:15px;outline:none}
.p-auth-card input:focus,.p-pw input:focus{border-color:var(--accent)}
.p-big{padding:11px 16px!important;font-size:14.5px!important;justify-content:center}
.p-err{min-height:18px;color:var(--err);font-size:13px}
.p-err:empty{min-height:0}
.p-hint{font-size:12px!important;margin-top:8px!important}
.p-auth-foot{font-size:12px;color:var(--muted)}
.p-meter{height:6px;border-radius:99px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden}
.p-meter i{display:block;height:100%;width:0;transition:width .25s,background .25s}
.p-meter i[data-s="0"]{width:8%;background:var(--err)} .p-meter i[data-s="1"]{width:30%;background:var(--err)}
.p-meter i[data-s="2"]{width:55%;background:var(--warn)} .p-meter i[data-s="3"]{width:80%;background:#4ade80} .p-meter i[data-s="4"]{width:100%;background:#22c55e}
.p-pw{width:min(420px,100%);padding:22px}
.p-pw h2{margin:0 0 14px;font-size:20px}
.p-row{display:flex;justify-content:flex-end;gap:8px}


/* Reiter in der Kopfzeile */
.topbar .tabs{pointer-events:auto}
.p-stack{display:grid;gap:16px}
.p-page{display:grid;gap:16px}

/* Karte als eigene Seite */
body[data-page="map"] .p-main{padding:72px 16px 16px}
.p-mappage{display:grid;grid-template-rows:auto 1fr;gap:10px;height:calc(100vh - 88px);height:calc(100dvh - 88px)}
.p-maphead{display:flex;align-items:center;gap:10px}
.p-maphead .sp{flex:1}
.p-maphead .btn-sm{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--text)}
.p-maphead .btn-sm svg{width:14px;height:14px}
.p-mappage iframe{width:100%;height:100%;border:0;border-radius:var(--r-card);background:#000;box-shadow:var(--shadow)}

/* How to play */
.p-play{max-width:1000px}
.p-notice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-card);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 9%,var(--glass));font-size:14px;line-height:1.55}
.p-notice svg{width:24px;height:24px;flex:none;color:var(--accent);margin-top:2px}
.p-dls{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.p-dl{border:1px solid var(--line);border-radius:var(--r-card);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:16px;display:grid;gap:14px;position:relative;overflow:hidden}
.p-dl::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--tc)}
.p-dl-head{display:flex;align-items:center;gap:12px}
.p-dl-head>div:nth-child(2){flex:1;display:grid}
.p-dl-head b{font-size:17px}
.p-dl-head span{font-size:12.5px;color:var(--muted)}
.p-dl-head .t-ic{width:42px;height:42px;border-radius:var(--r-ctl);display:grid;place-items:center;background:color-mix(in srgb,var(--tc) 18%,transparent);color:var(--tc)}
.p-dl-head .t-ic svg{width:22px;height:22px}
.p-dl-pack{display:grid;gap:10px;padding:12px;border-radius:var(--r-ctl);background:var(--soft);border:1px solid var(--line)}
.p-dl-pack>div{display:grid;gap:3px}
.p-dl-pack b small{font-weight:500;color:var(--muted)}
.p-dl-pack span{font-size:12.5px;color:var(--muted);line-height:1.45}
.empty-pack span{font-style:italic}
.p-dlbtn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;padding:10px 14px!important;font-size:14px!important;text-decoration:none}
.p-dlbtn svg{width:16px;height:16px}
.p-dl-addr{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
.p-dl-addr .btn-sm{display:inline-flex;align-items:center;gap:6px}
.p-dl-addr svg{width:14px;height:14px}
.p-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.p-steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;position:relative;padding-bottom:18px}
.p-steps li:not(:last-child)::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:color-mix(in srgb,var(--accent) 25%,transparent)}
.p-n{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:16px;color:var(--on-accent);background:var(--accent);box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.p-steps h4{margin:8px 0 6px;font-size:15.5px}
.p-steps p{margin:0 0 6px;font-size:14px;line-height:1.6;color:var(--text)}
.p-steps p.p-tip{font-size:13px;color:var(--muted);padding:8px 12px;border-left:3px solid color-mix(in srgb,var(--accent) 50%,transparent);background:var(--soft);border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.p-steps a,.p-facts a{color:var(--accent);font-weight:600}
.p-steps code{font-size:12.5px;padding:1px 6px;border-radius:5px;background:var(--soft);border:1px solid var(--line)}
.p-facts{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14px;line-height:1.55}

@media (max-width: 760px){
  .p-main{padding:72px 14px 110px} .p-user #pWho{display:none} .p-user .btn-sm{padding:6px 10px}
  body[data-page="map"] .p-main{padding:68px 10px 96px}
  .p-mappage{height:calc(100dvh - 170px)}
  .p-dls{grid-template-columns:1fr}
  .p-steps li{grid-template-columns:32px 1fr;gap:10px} .p-n{width:32px;height:32px;font-size:14px} .p-steps li:not(:last-child)::before{left:15px;top:32px}
}

/* Besucherzähler im 90er-Stil (Easter Egg) */
.p-counter{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 6px;font-size:12px;color:var(--muted);user-select:none}
.p-digits{display:inline-flex;gap:2px;padding:3px;border-radius:4px;background:#111;box-shadow:inset 0 0 0 1px #444,0 2px 6px rgba(0,0,0,.25)}
.p-digits i{font-style:normal;font-family:ui-monospace,"Courier New",monospace;font-weight:700;font-size:15px;line-height:1;width:14px;padding:4px 0;text-align:center;color:#7CFF4F;background:linear-gradient(#1c1c1c,#050505);border-radius:2px;text-shadow:0 0 6px rgba(124,255,79,.7)}
.p-blink{color:#f5c542;animation:p-blink 1.2s steps(2,start) infinite}
@keyframes p-blink{to{visibility:hidden}}
@media (prefers-reduced-motion: reduce){ .p-blink{animation:none} }