/* HPZ-Care Portal – Ergänzungen zum Demo-Aussehen (base.css) */
.demo{display:none}
.tabs{background:rgba(0,0,0,.12);border-top:1px solid rgba(255,255,255,.12)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;padding-block:0;scrollbar-width:none}
.tabs a{color:rgba(255,255,255,.82);text-decoration:none;padding:10px 14px;font-size:13.5px;font-weight:500;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:#fff}
.tabs a.on{color:#fff;border-bottom-color:var(--accent)}
.head .who form{margin:0}
main.wrap{display:flex;flex-direction:column;gap:16px}
.flash{border-radius:12px;padding:11px 14px;font-size:14px;background:var(--okbg);border:1px solid var(--okline);color:var(--ok);margin-top:16px}
.flash.err{background:var(--errbg);border-color:var(--errline);color:var(--err)}
.flash.warn{background:var(--warnbg);border-color:var(--warnline);color:var(--warn)}
.asbar{background:var(--warnbg);color:var(--warn);border-bottom:1px solid var(--warnline);text-align:center;padding:8px 16px;font-size:13.5px}
.asbar a{color:var(--brand2);font-weight:600}
.btn.big{padding:13px 16px;font-size:15.5px;border-radius:12px}
a.btn{text-decoration:none}
.loginbody p{line-height:1.5}
.loginpage main.wrap{max-width:none;padding:0}
.login.single{grid-template-columns:minmax(0,460px);justify-content:center;min-height:calc(100vh - 160px)}
.quick{gap:6px}
.quick a{color:var(--brand2)}
.codein{font-size:24px!important;letter-spacing:8px;text-align:center;font-variant-numeric:tabular-nums}
.card.narrow{max-width:460px;margin:40px auto}
.form{display:flex;flex-direction:column;gap:12px}
textarea{font:inherit;font-size:14px;padding:10px 12px;border-radius:11px;border:1px solid var(--line2);background:var(--card);color:var(--ink);width:100%;resize:vertical}
input[type=text],input[type=password]{width:100%}
.tbl.edit td input,.tbl.edit td select{padding:7px 9px;font-size:13.5px;border-radius:8px;min-width:0}
.tbl tr.off td{opacity:.6}
.tbl .newrow td{background:var(--bg)}
form.inl{display:inline}
.monthrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 8px;border-bottom:1px solid var(--line);border-radius:10px}
.monthrow:last-child{border-bottom:none}
.monthrow.on{background:var(--bg)}
.monthrow .mlink{flex:1 1 160px;color:var(--ink);font-weight:500;text-decoration:none}
.center{text-align:center}
.hint{margin-top:10px}
.empty{text-align:center;padding:40px 22px}
.drop{border:2px dashed var(--line2);border-radius:16px;padding:34px 16px;text-align:center;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .15s,background .15s}
.drop.over{border-color:var(--brand2);background:#e3f6f8}
.drop p{margin:0;font-size:15px}
#detect{margin-top:16px}
.mailrun{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.mailrun.done{background:var(--okbg);border-color:var(--okline)}
.bar2{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar2 i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.recips{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0}
.recips legend{font-size:12px;color:var(--ink2);padding:0 6px}
.recipgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 12px;margin-top:10px;max-height:260px;overflow:auto}
.recipgrid.dim{opacity:.45}
.chk{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--ink);font-size:13px}
details.card summary{cursor:pointer}
details.card[open] summary{margin-bottom:12px}
.legal{max-width:820px;margin:24px auto 0}
.legal h1{margin-bottom:12px}
.legalfoot a{color:var(--ink2)}
.teamsw{margin-top:8px}
@media (max-width:900px){
  .login{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:24px;min-height:0}
  .intro{text-align:left}
  .introtitle{font-size:30px;margin:12px 0 8px}
  .introtext{font-size:15.5px}
  .introlist{margin-top:16px;font-size:14px}
}
@media (max-width:600px){
  .head .wrap{padding-block:10px}
  .head .hpzlogo{width:40px;height:40px}
  .who{width:100%;justify-content:space-between}
  .card{padding:16px;border-radius:16px}
  .top{padding-block:18px 0}
  h1{font-size:21px}
  .docs.now .doc .actions{margin-left:0;width:100%}
  .docs.now .doc .actions .btn{flex:1;padding:12px;font-size:15px}
  .intro{display:none}
  .login{padding-block:16px}
}
@media (display-mode:standalone){ .head{padding-top:env(safe-area-inset-top)} }
.mt{margin-top:12px}
.howto{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.howto h2{margin:0 0 4px;font-size:16px}
.howto .steps li{margin-bottom:8px;line-height:1.45}
.howto code{font-size:12px;background:var(--card);padding:1px 5px;border-radius:5px}
.howto .steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.howto .steps li{background:var(--card)}@media(max-width:700px){.howto .steps{grid-template-columns:minmax(0,1fr)}}
.legalfoot .credit{display:inline-block;margin-top:6px;font-size:11.5px;opacity:.75}
.btn.danger{color:#9b1c1c;border-color:#f3c4c4}.btn.danger:hover{background:#fdecec}