/* Anmeldeseite des Hubs (/login) im STYLE-EXPORT-Design – eigenständig, ohne core.css. */
:root{
  --bg:#07080c;--s2:rgba(255,255,255,.06);--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);
  /* Akzent = Marken-Orange von „Peber[hub]“ (11.11.2026; vorher Violett→Cyan). Dunkle Schrift auf Orange wie im Logo-Kasten. */
  --text:#eef0f6;--dim:#8b93a7;--dim2:#5f6679;--a1:255,153,0;--am:#ffa51f;--a2:255,196,77;--bad:#fb7185;--on-acc:#17120a;
  --accg:linear-gradient(135deg,#ff8a00,var(--am) 45%,rgb(var(--a2)));
  --ease:cubic-bezier(.2,.8,.2,1);--shadow:0 18px 50px -18px rgba(0,0,0,.85);--c:#ffb347;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--text);background:var(--bg);
  font:14px/1.5 "Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 600px at 15% -10%,rgba(var(--a1),.13),transparent 60%),radial-gradient(800px 600px at 110% 10%,rgba(var(--a2),.07),transparent 60%)}
html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}   /* am Handy nie seitlich verschiebbar */
.login{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;
  padding:20px max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.lcard{width:min(400px,100%);padding:30px;border-radius:22px;border:1px solid var(--line2);background:linear-gradient(180deg,#181b26,#12141c);
  box-shadow:var(--shadow);animation:in .45s var(--ease)}
.lg{width:58px;height:58px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;color:#fff;background:var(--accg);
  box-shadow:0 10px 28px -6px rgba(var(--a1),.65);transition:background .3s}
.lg svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
h1{margin:0;text-align:center;font-size:24px;font-weight:800;letter-spacing:-.02em}
#sub{text-align:center;margin:4px 0 20px;color:var(--dim)}
.fl{display:block;margin:0 0 12px}
.fl span{display:block;font-size:12px;font-weight:600;color:var(--dim);margin:0 0 5px}
.fl span i{font-style:normal;font-weight:500;color:var(--dim2)}.fl span i::before{content:"· "}
.fl.need input{border-color:rgba(var(--a1),.7);box-shadow:0 0 0 3px rgba(var(--a1),.22)}
.fh{margin:-6px 0 12px;font-size:12px;color:var(--dim)}
input{width:100%;height:42px;padding:0 13px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--text);
  font:inherit;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}   /* 16px: darunter zoomt das iPhone beim Antippen hinein */
input::placeholder{color:var(--dim2);font-size:14px}
input:focus{border-color:rgba(var(--a1),.75);box-shadow:0 0 0 3px rgba(var(--a1),.2)}
button.primary:focus-visible{outline:2px solid #fff;outline-offset:2px}
button.primary{width:100%;height:44px;margin-top:8px;border:0;border-radius:12px;background:var(--accg);color:var(--on-acc);font:inherit;font-size:14px;font-weight:750;
  cursor:pointer;box-shadow:0 10px 26px -10px rgba(var(--a1),.7);transition:filter .2s,transform .1s}
button.primary:hover{filter:brightness(1.1)}
button.primary:active{transform:scale(.98)}
button.primary:disabled{opacity:.6;cursor:default}
.err{min-height:0;color:var(--bad);font-size:13px;margin:2px 0 4px}
.err:empty{display:none}
.msg{text-align:center;color:var(--text);margin:0 0 6px}
.msg.bad{color:var(--bad)}
.spin{display:block;width:26px;height:26px;margin:4px auto 14px;border-radius:50%;border:3px solid var(--s2);border-top-color:var(--c);animation:sp .8s linear infinite}
.apps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.apps span{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:99px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.apps span.cur{box-shadow:inset 0 0 0 1px var(--c)}
[hidden]{display:none!important}
@keyframes in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lcard{animation:none}.spin{animation-duration:2s}}

/* ---------- Marke „Peber[hub]“ (11.11.2026): Kasten zeigt die App (Peber[flix], Peber[musik] …). Stil für alle über
   [data-pbh] = klassik | glanz | neon | glut (Hub: Konto → Darstellung, nur Admins). Die Stile setzen nur Variablen – das nächste
   Element mit data-pbh gewinnt (Seite, Vorschau-Karte). Gleiches Aussehen für die Kästen im App-Schieber (.hub-slide). ---------- */
[data-pbh]{--pb-bg:#f90;--pb-fg:#121212;--pb-pill:#121212;--pb-ring:0 0 0 1px rgba(255,255,255,.08);--pb-sh:none;--pb-ts:none;--pb-sweep:none;
  --pb-anim:none;--pb-size:auto;--pb-padl:.42em;--pb-gap:.26em;--pb-peber:#fff;--pb-menu:var(--pb-bg)}
[data-pbh=glanz]{--pb-sweep:block}
[data-pbh=neon]{--pb-bg:transparent;--pb-fg:#ffb347;--pb-pill:transparent;--pb-ring:none;--pb-padl:0;--pb-gap:.42em;--pb-peber:var(--tx,#fff);--pb-menu:rgba(12,12,16,.78);
  --pb-sh:0 0 0 2px #f90,0 0 6px #f90,inset 0 0 5px rgba(255,153,0,.45);--pb-ts:0 0 7px rgba(255,153,0,.7);--pb-anim:pbhGlow 2.6s ease-in-out infinite}
[data-pbh=glut]{--pb-bg:linear-gradient(110deg,var(--acc,#ff5a3c),var(--am,#ff9d2e),var(--acc2,#ffcc4d),var(--acc,#ff5a3c));--pb-fg:#fff;--pb-size:300% 100%;
  --pb-ts:0 1px 2px rgba(0,0,0,.35);--pb-anim:pbhMove 6s linear infinite}
html .pbh{display:inline-flex;align-items:center;gap:var(--pb-gap,.26em);padding:.2em .26em .2em var(--pb-padl,.42em);border-radius:.34em;background:var(--pb-pill,#121212);color:#fff;
  font:800 17px/1 Arial,Helvetica,sans-serif;letter-spacing:-.03em;box-shadow:var(--pb-ring,none);white-space:nowrap;-webkit-text-fill-color:currentColor;text-transform:none}
html .pbh span{color:var(--pb-peber,#fff);font:inherit;background:none}
html .pbh em,.hub-slide em{display:inline-block;position:relative;overflow:hidden;font:inherit;font-style:normal;color:var(--pb-fg,#121212);background:var(--pb-bg,#f90);
  background-size:var(--pb-size,auto);border-radius:.22em;padding:.14em .26em .16em;box-shadow:var(--pb-sh,none);text-shadow:var(--pb-ts,none);animation:var(--pb-anim,none);
  transform-origin:50% 50%;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
html .pbh em::after,.hub-slide em::after{content:"";display:var(--pb-sweep,none);position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.8),transparent);animation:pbhSweep 3.2s ease-in-out infinite}
a:hover>.pbh em,.pbh:hover em{transform:rotate(-4deg) scale(1.06)}
@keyframes pbhSweep{60%,100%{left:130%}}
@keyframes pbhGlow{50%{box-shadow:0 0 0 2px #f90,0 0 18px #f90,inset 0 0 10px rgba(255,153,0,.55);text-shadow:0 0 14px #f90}}
@keyframes pbhMove{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){.pbh em,.pbh em::after,.hub-slide em,.hub-slide em::after{animation:none!important;transition:none}}
.lgw{text-align:center;margin:0 0 16px}.lgw .pbh{font-size:34px}