/* Supscribe Web-Oberflaeche - responsive: Handy (schmal) + Browser (breit, Supscribe-Look) */
:root{
  --navy:#1E3456; --navy2:#213B63; --crimson:#C93C3C; --tintBlue:#EAF1FA; --logoBlue:#5B9BD5;
  --bg:#EDEFF3; --card:#FFFFFF; --border:#DDE3EA; --text:#14233B; --subtext:#4E5F73;
  --green:#217A43; --greenChipBg:#DDF2E4; --greenChipText:#17572F;
  --yellowChipBg:#FFF3D6; --yellowChipText:#7A4B00; --redChipBg:#FBE3E3; --redChipText:#8E2222;
  --headerSub:#C9D6E6;
  --shadow:0 4px 20px rgba(20,35,59,.08);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; justify-content:center;
}

/* ===================== GRUNDLAYOUT (Handy-first) ===================== */
#phone{
  width:100%; max-width:430px; min-height:100vh;
  background:var(--bg); display:flex; flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,.10); position:relative;
}
.screen{flex:1; overflow-y:auto; padding:16px; padding-bottom:90px;}
.header-sub{font-size:12px; color:var(--subtext); letter-spacing:1px; text-transform:uppercase;}
.header-title{font-size:26px; font-weight:800; color:var(--text); margin-top:2px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:var(--shadow);}
.card-title{font-weight:600; font-size:16px; margin-bottom:8px;}
.big-num{font-size:40px; font-weight:800; color:var(--navy); margin:6px 0;}
.status-green{font-weight:600; color:var(--green);}
.line{color:var(--subtext);}
.chip{display:inline-block; border-radius:999px; padding:3px 10px; font-size:12px; font-weight:600;}
.chip-yellow{background:var(--yellowChipBg); color:var(--yellowChipText);}
.chip-green{background:var(--greenChipBg); color:var(--greenChipText);}
.chip-red{background:var(--redChipBg); color:var(--redChipText);}
.row{display:flex; gap:12px;}
.field{flex:1; background:var(--tintBlue); border-radius:14px; padding:12px;}
.field-label{font-size:13px; color:var(--subtext);}
.field-val{font-size:22px; font-weight:700; color:var(--navy); margin-top:2px;}
.btn{width:100%; height:60px; border:none; border-radius:14px; font-size:19px; font-weight:600; color:#fff; cursor:pointer; margin-top:8px;}
.btn-navy{background:var(--navy);} .btn-crimson{background:var(--crimson);}
.btn-outline{background:var(--card); color:var(--navy); border:1px solid var(--border);}
label.lbl{display:block; font-size:13px; color:var(--text); margin:10px 0 4px; font-weight:500;}
input.inp{width:100%; height:53px; border:1px solid var(--border); border-radius:14px; padding:0 14px; font-size:16px; background:var(--card); color:var(--text);}
.sync{font-size:13px; color:var(--subtext); margin-top:4px;}
.hidden{display:none !important;}
.err{color:var(--redChipText); font-size:13px; margin:8px 0;}

/* Desktop-Header (nur im Browser sichtbar) */
.webhead{display:none;}

/* App-Container */
#app{display:flex; flex-direction:column; min-height:100vh;}
#app.hidden{display:none !important;}
#view-login img{display:block; margin:0 auto;}
/* Login: Handy-Defaults (Markenseite aus, Logo gross wie bisher) */
#login-wrap{display:flex; flex-direction:column; flex:1; min-height:100vh;}
.login-brand{display:none;}
.loginlogo{width:220px; height:165px; object-fit:contain; margin-top:40px;}
.login-inner{width:100%;}

/* ===================== TAB-LEISTE UNTEN (Handy) ===================== */
.tabbar{position:sticky; bottom:0; height:76px; background:var(--card); border-top:1px solid var(--border); display:flex;}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:10px; color:var(--subtext); cursor:pointer; border:none; background:none; padding-top:6px;}
.tab.active{color:var(--navy); font-weight:600;}
.tab.active .stripe{height:3px; width:24px; background:var(--crimson); border-radius:2px;}
.tab .stripe{height:3px; width:24px;}
.tab .ic{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}

/* ===================== BROWSER-ANSICHT (>= 768px) ===================== */
@media (min-width:768px){
  body{background:var(--bg);}
  /* volle Breite nutzen, kein Handy-Rahmen mehr */
  #phone{max-width:none; width:100%; box-shadow:none; background:var(--bg);}

  /* Login im Browser: zentrierte Karte, nur etwas breiter als Handy */
  #login-wrap{align-items:center; justify-content:center; min-height:100vh; padding:32px 0;}
  .login-brand{display:none;}
  #view-login{flex:0 0 auto; align-self:center; width:100%; max-width:620px; margin:0 auto; background:var(--card);
    border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:64px 56px 104px; overflow:visible;}
  .login-inner{width:100%; max-width:440px; margin:0 auto;}
  /* Logo oben UND unten gleich einziehen (PNG hat eingebauten Weissraum) */
  .login-inner .loginlogo{width:400px; height:300px; margin:-40px 0 -40px;}
  /* Logo und Formular enger zusammen */
  .login-inner > div:first-child{margin-bottom:4px;}

  /* --- Full-Width Navy-Header --- */
  .webhead{display:flex; align-items:center; gap:14px; width:100%;
    background:linear-gradient(180deg,var(--navy),var(--navy2));
    padding:12px 24px; color:#fff; position:sticky; top:0; z-index:20;}
  .webhead .headsym{height:46px; width:auto; object-fit:contain; flex:0 0 auto;}
  .webhead .brand{display:flex; flex-direction:column; line-height:1.1;}
  .webhead .brand .b1{font-weight:800; letter-spacing:2px; font-size:17px;}
  .webhead .brand .b2{font-size:10px; letter-spacing:2px; color:var(--headerSub);}
  .webhead .spacer{flex:1;}
  .webhead .user{display:flex; align-items:center; gap:10px;}
  .webhead .avatar{width:38px; height:38px; border-radius:50%; background:var(--logoBlue);
    color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
  .webhead .uname{display:flex; flex-direction:column; line-height:1.15;}
  .webhead .uname .n{font-weight:600; font-size:14px;}
  .webhead .uname .s{font-size:11px; color:var(--headerSub);}
  .webhead .logout-btn{margin-left:14px; background:transparent; color:#fff;
    border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:7px 16px; font-size:13px; cursor:pointer;}
  .webhead .logout-btn:hover{background:rgba(255,255,255,.12);}

  /* --- Obere Navigation (Tabs) --- */
  .webnav{display:flex; gap:4px; background:var(--card); border-bottom:1px solid var(--border);
    padding:0 24px; position:sticky; top:64px; z-index:19; overflow-x:auto;}
  .webnav .wtab{display:flex; align-items:center; gap:7px; padding:14px 16px; cursor:pointer;
    border:none; background:none; color:var(--subtext); font-size:14px; font-weight:500;
    border-bottom:3px solid transparent; white-space:nowrap;}
  .webnav .wtab .ic{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
  .webnav .wtab:hover{color:var(--text);}
  .webnav .wtab.active{color:var(--navy); font-weight:600; border-bottom-color:var(--crimson);}

  /* --- Content zentriert, breiter --- */
  .screen{max-width:680px; margin:0 auto; padding:28px 24px 48px; width:100%;}
  .header-title{font-size:28px;}

  /* untere Handy-Tabbar im Browser ausblenden */
  .tabbar{display:none;}
}

@media (max-width:767px){
  /* im Handy bleibt alles wie gehabt, Desktop-Header/Nav aus */
  .webhead,.webnav{display:none !important;}
}