/* ============================================================
   Reality Banking — modern neo-banking UI
   dark + red accent (gungame/gangwar palette), glow, gradients, depth, motion
   (eigenständiges Design — keine 1:1-Kopie)
   ============================================================ */
:root{
  --bg:#08080a;
  --bg-2:#0b0b0e;
  --panel:rgba(18,18,22,.72);
  --panel-solid:#121215;
  --panel-2:rgba(26,26,30,.65);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --txt:#f4f4f5;
  --muted:#9a9aa4;
  --muted-2:#6b6b73;
  --accent:#f23b46;
  --accent-2:#f56e76;
  --accent-3:#ff5a63;
  --accent-deep:#b51f29;
  --good:#7be0a3;
  --bad:#ff6b81;
  --warn:#fbbf6b;
  --radius:1.125rem;
  --font:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --glow:0 0 0 0.0625rem rgba(242,59,70,.35),0 0.5rem 1.875rem rgba(242,59,70,.25);
}
*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font)}
/* Fluide Basisgröße: an die Viewport-HÖHE gekoppelt (nicht Breite),
   damit Ultrawide (21:9/32:9) nicht auseinandergezogen wird und 4K nicht winzig ist.
   Alle Maße im UI sind in rem -> skalieren proportional mit. */
html{font-size:clamp(12px,1.48vh,25px)}
html,body{width:100%;height:100%;overflow:hidden;background:transparent;user-select:none}
/* Inline-SVG-Icons mit fester px-Breite an die Root-Größe koppeln (px/16 -> em),
   damit Icons proportional mitskalieren statt fix zu bleiben. */
svg[width="11"]{width:.6875em;height:auto}
svg[width="14"]{width:.875em;height:auto}
svg[width="15"]{width:.9375em;height:auto}
svg[width="16"]{width:1em;height:auto}
svg[width="17"]{width:1.0625em;height:auto}
svg[width="18"]{width:1.125em;height:auto}
svg[width="20"]{width:1.25em;height:auto}
svg[width="22"]{width:1.375em;height:auto}
svg[width="26"]{width:1.625em;height:auto}
.hidden{display:none !important}

#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}

/* ambient background glow behind the window */
.bg-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 18% 12%,rgba(242,59,70,.16),transparent 60%),
    radial-gradient(55% 50% at 85% 85%,rgba(242,59,70,.12),transparent 60%),
    radial-gradient(40% 40% at 90% 10%,rgba(242,59,70,.10),transparent 60%);
  animation:bgfloat 14s ease-in-out infinite alternate;
}
@keyframes bgfloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-0.875rem,0) scale(1.05)}}

.window{
  position:relative;z-index:1;
  width:min(71.25rem,94vw);height:min(45rem,94vh);
  display:flex;
  background:linear-gradient(160deg,rgba(16,16,19,.96),rgba(10,10,12,.98));
  border:0.0625rem solid var(--line-strong);
  border-radius:1.625rem;overflow:hidden;color:var(--txt);
  box-shadow:0 3.125rem 8.75rem rgba(0,0,0,.7),0 0 0 0.0625rem rgba(255,255,255,.02) inset,
             0 0.0625rem 0 rgba(255,255,255,.05) inset;
  animation:pop .32s cubic-bezier(.2,.9,.25,1.1);
}
@keyframes pop{from{transform:scale(.95) translateY(0.625rem);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}

/* ---------- Sidebar ---------- */
.sidebar{
  width:15.5rem;flex-shrink:0;
  background:linear-gradient(185deg,rgba(18,18,22,.9),rgba(11,11,13,.95));
  border-right:0.0625rem solid var(--line);display:flex;flex-direction:column;padding:1.5rem 1rem;
  position:relative;
}
.sidebar::after{content:"";position:absolute;top:0;right:0;width:0.0625rem;height:100%;
  background:linear-gradient(180deg,transparent,rgba(242,59,70,.3),transparent)}

.brand{display:flex;align-items:center;gap:0.8125rem;padding:0.25rem 0.5rem 1.625rem}
.brand-mark{
  width:2.875rem;height:2.875rem;border-radius:0.875rem;display:grid;place-items:center;color:#fff;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-title{font-weight:800;font-size:1.125rem;letter-spacing:0.0125rem}
.brand-sub{font-size:0.6875rem;color:var(--accent);letter-spacing:0.1875rem;text-transform:uppercase;font-weight:600}

.nav{display:flex;flex-direction:column;gap:0.375rem;margin-top:0.5rem}
.nav-item{
  position:relative;display:flex;align-items:center;gap:0.8125rem;padding:0.75rem 0.875rem;border:none;cursor:pointer;
  background:transparent;color:var(--muted);font-size:0.875rem;font-weight:500;border-radius:0.8125rem;text-align:left;
  transition:.2s cubic-bezier(.2,.7,.3,1);overflow:hidden;
}
.nav-item .ni-ico{display:grid;place-items:center;width:1.25rem;height:1.25rem;color:inherit;opacity:.85;transition:.2s}
.nav-item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);
  width:0.1875rem;height:55%;border-radius:0 0.25rem 0.25rem 0;background:linear-gradient(var(--accent),var(--accent-2));
  box-shadow:0 0 0.75rem var(--accent);transition:.2s}
.nav-item:hover{background:rgba(242,59,70,.07);color:var(--txt)}
.nav-item:hover .ni-ico{opacity:1}
.nav-item.active{
  background:linear-gradient(100deg,rgba(242,59,70,.12),rgba(242,59,70,.03));
  color:#f4f4f5;box-shadow:0 0.25rem 1.125rem rgba(242,59,70,.12),0 0 1.375rem rgba(242,59,70,.06) inset;
}
.nav-item.active::before{transform:translateY(-50%) scaleY(1)}
.nav-item.active .ni-ico{color:var(--accent);opacity:1;filter:drop-shadow(0 0 0.375rem rgba(242,59,70,.6))}

.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:0.75rem}
.cash-pill{
  display:flex;flex-direction:column;gap:0.4375rem;padding:0.8125rem 0.9375rem;
  background:linear-gradient(135deg,rgba(52,225,163,.1),rgba(242,59,70,.05));
  border:0.0625rem solid rgba(52,225,163,.2);border-radius:0.875rem;font-size:0.75rem;color:var(--muted);
}
.cash-pill-l{display:flex;align-items:center;gap:0.5625rem;text-transform:uppercase;letter-spacing:0.0625rem;font-weight:600;font-size:0.6875rem}
.cash-pill-ico{color:var(--good);display:grid;place-items:center}
.cash-pill strong{color:var(--good);font-size:1.0625rem;font-weight:800;letter-spacing:-0.0187rem;line-height:1.1;
  text-shadow:0 0 0.875rem rgba(52,225,163,.45);word-break:break-all}
.logout{
  display:flex;align-items:center;justify-content:center;gap:0.5625rem;
  padding:0.75rem;border:0.0625rem solid var(--line);background:rgba(255,255,255,.02);color:var(--muted);
  border-radius:0.8125rem;cursor:pointer;font-size:0.8125rem;font-weight:500;transition:.2s;
}
.logout:hover{border-color:rgba(255,107,129,.5);color:var(--bad);background:rgba(255,107,129,.07)}

/* ---------- Main ---------- */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(0.75rem,1.8vh,1.25rem) clamp(1.125rem,2vw,1.875rem);border-bottom:0.0625rem solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
}
.acct-select label{display:block;font-size:0.625rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.0938rem;margin-bottom:0.4375rem;font-weight:600}
.select-wrap{position:relative;display:inline-block}
.acct-select select{
  appearance:none;-webkit-appearance:none;
  background:rgba(24,24,28,.9);border:0.0625rem solid var(--line-strong);color:var(--txt);
  padding:0.6875rem 2.5rem 0.6875rem 1rem;border-radius:0.75rem;font-size:0.875rem;min-width:18.75rem;max-width:26.25rem;
  cursor:pointer;outline:none;transition:.2s;text-overflow:ellipsis;
}
.acct-select select:hover,.acct-select select:focus{border-color:rgba(242,59,70,.5);box-shadow:0 0 0 0.1875rem rgba(242,59,70,.1)}
.select-caret{position:absolute;right:0.875rem;top:50%;transform:translateY(-50%);color:var(--accent);pointer-events:none}
.topbar-right{display:flex;align-items:center;gap:0.875rem}
.hello{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.hello-sub{font-size:0.6875rem;color:var(--muted);letter-spacing:0.0187rem}
.hello strong{color:var(--txt);font-size:0.9375rem;font-weight:700}
.avatar{
  position:relative;width:2.625rem;height:2.625rem;border-radius:0.8125rem;display:grid;place-items:center;font-weight:800;font-size:0.9375rem;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent-3));
  box-shadow:0 0.375rem 1.125rem rgba(242,59,70,.4),0 0 0 0.0625rem rgba(255,255,255,.15) inset;text-transform:uppercase;
}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}
.avatar.has-img img{opacity:1}
.avatar.has-img #avatarInitials{opacity:0}

/* Jeder Tab füllt die Höhe exakt aus -> KEIN globaler Bank-Scroll.
   Nur Listenbereiche (Karten/Verlauf/Konten) scrollen intern. */
.tab{display:none;padding:clamp(0.875rem,2.2vh,1.5rem) clamp(1.125rem,2vw,1.875rem);flex:1;min-height:0;overflow:hidden;animation:fadeUp .35s ease}
.tab.active{display:flex;flex-direction:column}
#tab-dashboard.active{gap:clamp(0.625rem,1.6vh,1.125rem)}
@keyframes fadeUp{from{opacity:0;transform:translateY(0.625rem)}to{opacity:1;transform:translateY(0)}}
.tab::-webkit-scrollbar{width:0.5625rem}
.tab::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:0.5rem;border:0.125rem solid transparent;background-clip:padding-box}
.tab::-webkit-scrollbar-thumb:hover{background:rgba(242,59,70,.35);background-clip:padding-box}

/* ---------- Hero balance card ---------- */
.hero-card{
  position:relative;border-radius:1.375rem;padding:clamp(1rem,2.4vh,1.875rem) clamp(1.25rem,2.2vw,2rem);overflow:hidden;flex-shrink:0;
  min-height:clamp(7rem,18vh,11.25rem);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(0.5rem,1.4vh,1rem);
  background:
    radial-gradient(120% 160% at 85% 0%,rgba(242,59,70,.35),transparent 55%),
    radial-gradient(100% 140% at 0% 100%,rgba(242,59,70,.28),transparent 60%),
    linear-gradient(135deg,#0c3a44 0%,#0a2530 45%,#08161e 100%);
  border:0.0625rem solid rgba(242,59,70,.28);
  box-shadow:0 1.625rem 3.75rem rgba(0,0,0,.5),0 0 0 0.0625rem rgba(255,255,255,.04) inset,
             0 0 3.75rem rgba(242,59,70,.12) inset;
}
.hero-card::after{content:"";position:absolute;right:-2.5rem;top:-5rem;width:17.5rem;height:17.5rem;border-radius:50%;
  background:radial-gradient(circle,rgba(242,59,70,.3),transparent 65%);filter:blur(0.5rem)}
/* subtle dotted glass pattern + diagonal sheen lines */
.hero-pattern{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(rgba(255,255,255,.08) 0.0625rem,transparent 0.0875rem),
    repeating-linear-gradient(115deg,rgba(255,255,255,.04) 0 0.0625rem,transparent 0.0625rem 1.375rem);
  background-size:1.375rem 1.375rem,auto;mask-image:linear-gradient(120deg,#000,transparent 75%)}
/* moving shine sweep */
.hero-shine{position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.13),transparent);
  transform:skewX(-18deg);animation:sheen 6s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,100%{left:-60%}45%,55%{left:140%}}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.hero-label{font-size:0.8125rem;color:rgba(244,244,245,.7);letter-spacing:0.0312rem;text-transform:uppercase;font-weight:600}
.hero-amount{font-size:clamp(1.75rem,4.8vh,2.75rem);font-weight:800;letter-spacing:-0.0938rem;margin-top:0.375rem;line-height:1.05;
  text-shadow:0 0.25rem 1.875rem rgba(242,59,70,.4);white-space:nowrap}
.hero-trend{display:inline-flex;align-items:center;gap:0.3125rem;margin-top:0.4375rem;font-size:0.75rem;font-weight:600;
  color:rgba(244,244,245,.65);background:rgba(255,255,255,.06);padding:0.25rem 0.6875rem;border-radius:1.875rem;border:0.0625rem solid rgba(255,255,255,.1)}
.hero-trend b{color:#fff;font-weight:700}
.hero-badge{font-size:0.6875rem;padding:0.375rem 0.8125rem;border-radius:1.875rem;font-weight:700;letter-spacing:0.0625rem;text-transform:uppercase;
  background:rgba(255,255,255,.1);color:#fff;border:0.0625rem solid rgba(255,255,255,.22);backdrop-filter:blur(0.375rem)}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1;gap:1rem}
.hero-iban{display:flex;align-items:center;gap:0.875rem}
.hero-chip{width:2.625rem;height:2rem;border-radius:0.4375rem;flex-shrink:0;position:relative;
  background:linear-gradient(135deg,#f4d98a,#c79b3a);box-shadow:0 0.125rem 0.5rem rgba(0,0,0,.3),0 0 0 0.0625rem rgba(0,0,0,.12) inset}
.hero-chip::after{content:"";position:absolute;inset:0.375rem 0.5rem;border:0.0625rem solid rgba(0,0,0,.28);border-radius:0.1875rem}
.hero-iban small{display:block;font-size:0.625rem;letter-spacing:0.0938rem;text-transform:uppercase;color:rgba(244,244,245,.5);margin-bottom:0.1875rem}
.hero-iban>div>span{font-size:1.0625rem;letter-spacing:0.05rem;font-weight:600;font-family:'Courier New',monospace;white-space:nowrap}
.hero-brand{display:flex;align-items:center;gap:0.5rem;font-size:0.75rem;font-weight:700;letter-spacing:0.0625rem;color:rgba(244,244,245,.8);text-transform:uppercase;white-space:nowrap}
.hero-brand-dot{width:0.5625rem;height:0.5625rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0.75rem var(--accent);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0.5rem var(--accent);opacity:.85}50%{box-shadow:0 0 1.125rem var(--accent);opacity:1}}

/* ---------- Function cards ---------- */
.func-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(0.625rem,1.4vw,1rem);flex-shrink:0}
.func-card{
  position:relative;display:flex;align-items:center;gap:0.875rem;padding:clamp(0.6875rem,1.6vh,1.125rem) 1.125rem;cursor:pointer;text-align:left;
  background:var(--panel);border:0.0625rem solid var(--line-strong);border-radius:var(--radius);color:var(--txt);
  overflow:hidden;transition:.22s cubic-bezier(.2,.7,.3,1);backdrop-filter:blur(0.625rem);
}
.func-card::before{content:"";position:absolute;inset:0;opacity:0;transition:.22s;
  background:linear-gradient(120deg,rgba(242,59,70,.12),transparent 70%)}
.func-card:hover{transform:translateY(-0.25rem);border-color:rgba(242,59,70,.4);
  box-shadow:0 1.125rem 2.5rem rgba(0,0,0,.45),0 0 1.875rem rgba(242,59,70,.12)}
.func-card:hover::before{opacity:1}
.func-card:active{transform:translateY(-0.0625rem)}
.fc-ico{flex-shrink:0;width:clamp(2.375rem,5vh,3rem);height:clamp(2.375rem,5vh,3rem);border-radius:0.875rem;display:grid;place-items:center;position:relative;z-index:1;
  box-shadow:0 0.5rem 1.25rem rgba(0,0,0,.35),0 0 0 0.0625rem rgba(255,255,255,.1) inset}
.fc-in .fc-ico{background:linear-gradient(135deg,rgba(52,225,163,.95),#15a87a);color:#04201a}
.fc-out .fc-ico{background:linear-gradient(135deg,#ff8aa0,#e14b66);color:#3a0410}
.fc-tr .fc-ico{background:linear-gradient(135deg,var(--accent),var(--accent-3));color:#fff}
.fc-txt{display:flex;flex-direction:column;position:relative;z-index:1;flex:1;min-width:0}
.fc-txt b{font-size:0.9375rem;font-weight:700}
.fc-txt small{font-size:0.75rem;color:var(--muted);margin-top:0.125rem}
.fc-arrow{position:relative;z-index:1;font-size:1.375rem;color:var(--muted-2);transition:.22s;font-weight:300}
.func-card:hover .fc-arrow{color:var(--accent);transform:translateX(0.25rem)}

/* ---------- Panels ---------- */
.grid-2{display:grid;grid-template-columns:1fr 23.75rem;gap:clamp(0.75rem,1.4vw,1.25rem)}
.panel{background:var(--panel);border:0.0625rem solid var(--line);border-radius:var(--radius);padding:clamp(0.875rem,1.8vh,1.25rem);backdrop-filter:blur(0.625rem);
  box-shadow:0 0.625rem 1.875rem rgba(0,0,0,.25)}
.panel.narrow{max-width:28.75rem}
/* Übersicht: Panels füllen die Resthöhe, Liste scrollt nur intern */
#tab-dashboard .grid-2{flex:1;min-height:0}
#tab-dashboard .panel{display:flex;flex-direction:column;overflow:hidden;min-height:0}
#tab-dashboard .tx-list{flex:1;min-height:0;max-height:none}

/* ---- pro Tab: Kopf bleibt fix, Liste scrollt intern ---- */
.section-head{flex-shrink:0}
#tab-cards .cards-grid,#tab-accounts .accounts-list{flex:1;min-height:0;overflow-y:auto;align-content:start;padding-right:0.375rem}
#tab-history .panel{flex:1;min-height:0;display:flex;flex-direction:column}
#tab-history .tx-list{flex:1;min-height:0;max-height:none}
/* schlanke interne Scrollbalken */
.cards-grid::-webkit-scrollbar,.accounts-list::-webkit-scrollbar{width:0.5rem}
.cards-grid::-webkit-scrollbar-thumb,.accounts-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:0.5rem}
.cards-grid::-webkit-scrollbar-thumb:hover,.accounts-list::-webkit-scrollbar-thumb:hover{background:rgba(242,59,70,.35)}
.panel-head{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(0.625rem,1.4vh,1rem)}
.panel-head h3{font-size:0.9375rem;font-weight:700;letter-spacing:0.0125rem}
.panel-link{background:none;border:none;color:var(--accent);font-size:0.75rem;font-weight:600;cursor:pointer;transition:.18s;padding:0.25rem 0}
.panel-link:hover{color:var(--accent-2);text-shadow:0 0 0.625rem rgba(242,59,70,.5)}
.muted{color:var(--muted);font-size:0.75rem}

.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.section-head h3{font-size:1.25rem;font-weight:800;letter-spacing:-0.0187rem}

/* ---------- Transactions ---------- */
.tx-list{display:flex;flex-direction:column;gap:0.5rem;max-height:20rem;overflow-y:auto;padding-right:0.25rem}
.tx-list.big{max-height:none}
.tx-list::-webkit-scrollbar{width:0.4375rem}
.tx-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:0.5rem}
.tx{
  display:flex;align-items:center;gap:0.8125rem;padding:0.75rem 0.8125rem;border-radius:0.8125rem;
  background:var(--panel-2);border:0.0625rem solid transparent;transition:.18s;position:relative;
}
.tx:hover{border-color:var(--line-strong);background:rgba(242,59,70,.05);transform:translateX(0.1875rem)}
.tx-ico{width:2.375rem;height:2.375rem;border-radius:0.6875rem;display:grid;place-items:center;font-size:1rem;font-weight:700;flex-shrink:0;
  box-shadow:0 0 0 0.0625rem rgba(255,255,255,.06) inset}
.tx-ico.in{background:linear-gradient(135deg,rgba(52,225,163,.22),rgba(52,225,163,.08));color:var(--good)}
.tx-ico.out{background:linear-gradient(135deg,rgba(255,107,129,.22),rgba(255,107,129,.08));color:var(--bad)}
.tx-mid{flex:1;min-width:0}
.tx-row1{display:flex;align-items:center;gap:0.5rem}
.tx-mid b{font-size:0.8438rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-badge{flex-shrink:0;font-size:0.5625rem;font-weight:700;letter-spacing:0.0312rem;text-transform:uppercase;padding:0.1875rem 0.5rem;border-radius:1.25rem;
  background:rgba(255,255,255,.14);color:var(--muted);border:0.0625rem solid var(--line)}
.tx-badge.in{background:rgba(52,225,163,.14);color:var(--good);border-color:rgba(52,225,163,.22)}
.tx-badge.out{background:rgba(242,59,70,.13);color:var(--accent-3);border-color:rgba(242,59,70,.22)}
.tx-badge.card{background:rgba(251,191,107,.14);color:var(--warn);border-color:rgba(251,191,107,.22)}
.tx-mid span{font-size:0.7188rem;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0.1875rem}
.tx-amt{font-weight:800;font-size:0.9375rem;white-space:nowrap;letter-spacing:-0.0187rem;text-align:right}
.tx-amt.in{color:var(--good)}
.tx-amt.out{color:var(--bad)}
.tx-amt small{display:block;font-size:0.625rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:0.125rem}
.empty{color:var(--muted);font-size:0.8125rem;text-align:center;padding:1.875rem 0.875rem}

/* ---------- Form ---------- */
.form{display:flex;flex-direction:column;gap:0.5rem}
.form label{font-size:0.75rem;color:var(--muted);margin-top:0.375rem;font-weight:500}
.form input,.modal-body input,.modal-body select{
  background:rgba(13,13,15,.7);border:0.0625rem solid var(--line-strong);color:var(--txt);
  padding:0.8125rem 0.9375rem;border-radius:0.75rem;font-size:0.875rem;outline:none;transition:.18s;
}
.form input:focus,.modal-body input:focus,.modal-body select:focus{border-color:var(--accent);box-shadow:0 0 0 0.1875rem rgba(242,59,70,.12)}
.readonly{background:rgba(13,13,15,.5);border:0.0625rem solid var(--line);padding:0.8125rem 0.9375rem;border-radius:0.75rem;font-size:0.875rem;color:var(--muted)}
.primary{
  margin-top:1rem;padding:0.875rem;border:none;border-radius:0.75rem;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;font-size:0.875rem;letter-spacing:0.0187rem;
  transition:.2s;box-shadow:0 0.625rem 1.625rem rgba(242,59,70,.3),0 0 0 0.0625rem rgba(255,255,255,.15) inset;
}
.primary:hover{filter:brightness(1.08);transform:translateY(-0.125rem);box-shadow:0 1rem 2.125rem rgba(242,59,70,.42)}
.primary:active{transform:translateY(0)}
.primary.sm{margin:0;padding:0.6875rem 1.125rem;font-size:0.8125rem}

/* ---------- Cards ---------- */
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(0.875rem,1.6vw,1.25rem)}
/* auf der Karten-Seite kompakter, damit immer ganze Karten sichtbar bleiben */
#tab-cards .bankcard{height:clamp(9.375rem,20vh,11.25rem);padding:1rem 1.125rem}
#tab-cards .card-wrap{margin-bottom:0.125rem}
.bankcard{
  position:relative;border-radius:1.125rem;padding:1.25rem 1.375rem;height:13.125rem;color:#fff;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;
  box-shadow:0 1.375rem 2.875rem rgba(0,0,0,.5),0 0 0 0.0625rem rgba(255,255,255,.12) inset;
  border:0.0625rem solid rgba(255,255,255,.1);transition:.28s cubic-bezier(.2,.7,.3,1);
}
.bankcard:hover{transform:translateY(-0.375rem) rotate(-.5deg);box-shadow:0 2.125rem 4.125rem rgba(0,0,0,.62)}
/* top gloss */
.bankcard::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(118deg,rgba(255,255,255,.22),transparent 40%)}
/* engraved circular guilloché pattern */
.bankcard::after{content:"";position:absolute;right:-4.375rem;bottom:-5.625rem;width:15rem;height:15rem;border-radius:50%;z-index:-1;
  background:
    radial-gradient(circle,rgba(255,255,255,.16),transparent 62%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 0.4375rem,rgba(255,255,255,.05) 0.4375rem 0.5rem)}
.bankcard.preview{height:11.875rem}
.bc-head{display:flex;justify-content:space-between;align-items:flex-start;z-index:1}
.bc-brandcol{display:flex;flex-direction:column;gap:0.1875rem}
.bc-brand{font-size:0.8125rem;letter-spacing:0.0938rem;text-transform:uppercase;font-weight:800;text-shadow:0 0.0625rem 0.375rem rgba(0,0,0,.35)}
.bc-type{font-size:0.625rem;letter-spacing:0.0938rem;text-transform:uppercase;opacity:.78;font-weight:600}
.bc-wifi{opacity:.85;transform:rotate(90deg);flex-shrink:0}
.bc-chiprow{display:flex;align-items:center;gap:0.625rem;z-index:1;margin:0.125rem 0}
.bc-chip{width:2.875rem;height:2.125rem;border-radius:0.4375rem;position:relative;flex-shrink:0;
  background:linear-gradient(135deg,#f6dd8e,#c99c38);box-shadow:0 0.0625rem 0.25rem rgba(0,0,0,.3),0 0 0 0.0625rem rgba(0,0,0,.12) inset}
.bc-chip::before{content:"";position:absolute;inset:0.375rem 0.5625rem;border:0.0625rem solid rgba(0,0,0,.3);border-radius:0.1875rem}
.bc-chip::after{content:"";position:absolute;left:50%;top:0.3125rem;bottom:0.3125rem;width:0.0625rem;background:rgba(0,0,0,.3)}
.bc-num{font-size:1.25rem;letter-spacing:0.1875rem;font-family:'Courier New',monospace;font-weight:700;z-index:1;text-shadow:0 0.0625rem 0.25rem rgba(0,0,0,.45)}
.bc-foot{display:flex;justify-content:space-between;align-items:flex-end;z-index:1;gap:0.75rem}
.bc-foot small{display:block;opacity:.62;font-size:0.5625rem;text-transform:uppercase;letter-spacing:0.075rem;margin-bottom:0.25rem}
.bc-foot span{font-size:0.7812rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:10rem;text-transform:uppercase;letter-spacing:0.0312rem}
.bc-foot .r{text-align:right}
.bc-foot .r span{max-width:5.625rem}

.card-cap{display:flex;justify-content:space-between;align-items:center;gap:0.625rem;margin-top:0.5625rem;padding:0 0.25rem;font-size:0.6875rem;color:var(--muted);min-width:0}
.card-cap span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.card-cap-r{color:var(--accent);font-weight:600;flex-shrink:0}
.card-actions{display:flex;gap:0.375rem;flex-wrap:nowrap;margin-top:0.5rem}
.card-actions button{
  flex:1;min-width:0;padding:0.5rem 0.375rem;border:0.0625rem solid var(--line-strong);background:var(--panel);
  color:var(--txt);border-radius:0.625rem;font-size:0.6875rem;font-weight:600;cursor:pointer;transition:.18s;backdrop-filter:blur(0.375rem);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-actions button:hover{border-color:var(--accent);color:var(--accent);background:rgba(242,59,70,.08);transform:translateY(-0.0625rem)}
.card-actions button.on{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;box-shadow:0 0.375rem 1rem rgba(242,59,70,.3)}
.card-wrap{display:flex;flex-direction:column}

.badge-active,.badge-frozen{position:absolute;top:1rem;right:1rem;font-size:0.5625rem;padding:0.25rem 0.625rem;border-radius:1.875rem;z-index:3;font-weight:800;letter-spacing:0.0375rem;text-transform:uppercase}
.badge-active{background:rgba(52,225,163,.95);color:#042;box-shadow:0 0 0.875rem rgba(52,225,163,.6)}
.badge-frozen{background:rgba(255,107,129,.95);color:#fff;box-shadow:0 0 0.875rem rgba(255,107,129,.5)}

/* gesperrte Karte: sichtbar entwertet + Schloss-Overlay */
.bankcard.frozen{filter:grayscale(.65) brightness(.72)}
.bankcard.frozen:hover{transform:translateY(-0.1875rem)}
.card-lock{position:absolute;inset:0;z-index:2;display:grid;place-items:center;color:rgba(255,255,255,.92);
  background:radial-gradient(circle at 50% 50%,rgba(11,11,13,.35),rgba(11,11,13,.55));
  text-shadow:0 0.125rem 0.625rem rgba(0,0,0,.5)}
.card-lock svg{filter:drop-shadow(0 0.1875rem 0.5rem rgba(0,0,0,.5))}

.dash-card-wrap .bankcard{height:clamp(9.375rem,23vh,11.875rem)}

/* empty state = real card preview (ghost) + CTA below */
.dash-card-wrap{display:flex;flex-direction:column;gap:clamp(0.5rem,1.2vh,0.75rem);min-height:0;overflow:hidden}
.bankcard.ghost{
  color:rgba(244,244,245,.85);border:0.0625rem solid rgba(242,59,70,.25);
  background:
    radial-gradient(90% 120% at 80% 0%,rgba(242,59,70,.16),transparent 55%),
    linear-gradient(135deg,#10212b,#0a141c);
  box-shadow:0 1.125rem 2.5rem rgba(0,0,0,.4),0 0 0 0.0625rem rgba(242,59,70,.12) inset;
}
.bankcard.ghost .bc-chip{background:linear-gradient(135deg,#3a4a55,#26323c);box-shadow:0 0 0 0.0625rem rgba(255,255,255,.06) inset}
.bankcard.ghost .bc-chip::before{border-color:rgba(255,255,255,.18)}
.bankcard.ghost .bc-chip::after{background:rgba(255,255,255,.18)}
.bankcard.ghost .bc-num{opacity:.55;color:rgba(244,244,245,.7)}
.ce-cta{padding:0.6875rem 1.125rem;border-radius:0.75rem;border:none;cursor:pointer;font-size:0.7812rem;font-weight:800;letter-spacing:0.0187rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:0 0.625rem 1.5rem rgba(242,59,70,.3);transition:.2s}
.ce-cta:hover{transform:translateY(-0.125rem);filter:brightness(1.08);box-shadow:0 0.875rem 1.875rem rgba(242,59,70,.42)}
.ce-note{font-size:0.7188rem;color:var(--muted);text-align:center;line-height:1.5}

/* ---------- Accounts ---------- */
.accounts-list{display:flex;flex-direction:column;gap:1rem}
.acct-row{background:var(--panel);border:0.0625rem solid var(--line);border-radius:var(--radius);padding:1.25rem;backdrop-filter:blur(0.625rem);transition:.2s;
  box-shadow:0 0.625rem 1.875rem rgba(0,0,0,.22)}
.acct-row:hover{border-color:var(--line-strong)}
.acct-row-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acct-info{min-width:0}
.acct-info h4{font-size:1rem;margin-bottom:0.4375rem;font-weight:700}
.acct-info .tags{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.tag{font-size:0.625rem;padding:0.25rem 0.625rem;border-radius:1.875rem;text-transform:uppercase;letter-spacing:0.05rem;font-weight:700}
.tag.personal{background:rgba(242,59,70,.16);color:var(--accent-3);border:0.0625rem solid rgba(242,59,70,.25)}
.tag.joint{background:rgba(242,59,70,.16);color:var(--accent);border:0.0625rem solid rgba(242,59,70,.25)}
.tag.company{background:rgba(251,191,107,.16);color:var(--warn);border:0.0625rem solid rgba(251,191,107,.25)}
.tag.role{background:rgba(255,255,255,.12);color:var(--muted)}
.acct-bal{font-size:1.5rem;font-weight:800;letter-spacing:-0.0312rem;white-space:nowrap;
  background:linear-gradient(135deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.acct-actions{display:flex;gap:0.5625rem;margin-top:1rem;flex-wrap:wrap}
.acct-actions button{padding:0.625rem 1rem;border:0.0625rem solid var(--line-strong);background:var(--panel-2);color:var(--txt);border-radius:0.6875rem;font-size:0.7812rem;font-weight:600;cursor:pointer;transition:.18s}
.acct-actions button:hover{border-color:var(--accent);color:var(--accent);background:rgba(242,59,70,.07)}
.members{margin-top:1rem;border-top:0.0625rem solid var(--line);padding-top:1rem;display:none}
.members.show{display:block;animation:fadeUp .25s ease}
.member{display:flex;justify-content:space-between;align-items:center;padding:0.5625rem 0;font-size:0.8125rem;border-bottom:0.0625rem solid var(--line)}
.member:last-child{border:none}
.member .contrib{color:var(--accent);font-weight:700}
.member button{background:none;border:none;color:var(--bad);cursor:pointer;font-size:0.8125rem;margin-left:0.5rem}
.member-r{display:flex;align-items:center;gap:0.5rem}
.member-r button{margin-left:0}
.member .mtoggle{padding:0.25rem 0.5625rem;border-radius:0.5rem;font-size:0.6875rem;font-weight:700;border:0.0625rem solid var(--line-strong);transition:.15s}
.member .mtoggle.on{color:var(--good);border-color:rgba(123,224,163,.4);background:rgba(123,224,163,.1)}
.member .mtoggle.off{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.03)}
.member .mtoggle:hover{filter:brightness(1.18)}
.func-card.disabled{opacity:.38;pointer-events:none;filter:grayscale(.5)}
.sub-h{font-size:0.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.075rem;margin:0.625rem 0 0.5rem;font-weight:600}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(6,6,8,.7);display:flex;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(0.4375rem);animation:fadeUp .2s ease}
.modal{width:27.5rem;max-width:90vw;background:linear-gradient(160deg,rgba(24,24,28,.98),rgba(14,14,17,.98));border:0.0625rem solid var(--line-strong);border-radius:1.25rem;overflow:hidden;animation:pop .24s cubic-bezier(.2,.9,.25,1.1);box-shadow:0 2.5rem 5.625rem rgba(0,0,0,.6)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.375rem;border-bottom:0.0625rem solid var(--line)}
.modal-head h3{font-size:1rem;font-weight:700}
.modal-head button{background:rgba(255,255,255,.05);border:none;color:var(--muted);width:1.875rem;height:1.875rem;border-radius:0.5625rem;font-size:0.9375rem;cursor:pointer;transition:.18s}
.modal-head button:hover{background:rgba(255,107,129,.15);color:var(--bad)}
.modal-body{padding:1.375rem;display:flex;flex-direction:column;gap:0.625rem}
.modal-body label{font-size:0.75rem;color:var(--muted);font-weight:500}
.hint{font-size:0.75rem;color:var(--muted);line-height:1.6;background:rgba(242,59,70,.06);border-left:0.125rem solid var(--accent);padding:0.625rem 0.75rem;border-radius:0 0.5rem 0.5rem 0;margin-top:0.25rem}
.modal-actions{display:flex;gap:0.625rem;margin-top:1rem}
.modal-actions .primary{flex:1;margin-top:0}
.ghost-btn{flex:1;padding:0.875rem;border:0.0625rem solid var(--line-strong);background:rgba(255,255,255,.03);color:var(--txt);border-radius:0.75rem;font-size:0.875rem;font-weight:600;cursor:pointer;transition:.18s}
.ghost-btn:hover{border-color:var(--bad);color:var(--bad);background:rgba(255,107,129,.07)}
.ho-preview{margin-bottom:0.375rem}

/* ---------- IBAN copy + Empfänger-Vorschau ---------- */
.iban-line{display:flex;align-items:center;gap:0.5rem;max-width:100%}
.iban-line>span{font-size:1.0625rem;letter-spacing:0.05rem;font-weight:600;font-family:'Courier New',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy-btn{flex-shrink:0;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:0.5rem;cursor:pointer;
  background:rgba(255,255,255,.1);border:0.0625rem solid rgba(255,255,255,.18);color:#fff;transition:.18s}
.copy-btn:hover{background:rgba(242,59,70,.3);border-color:var(--accent);transform:translateY(-0.0625rem)}
.copy-btn:active{transform:scale(.92)}

.from-acct{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;
  background:rgba(13,13,15,.5);border:0.0625rem solid var(--line-strong);padding:0.8125rem 0.9375rem;border-radius:0.75rem}
.from-acct .fa-l{display:flex;align-items:center;gap:0.6875rem;min-width:0}
.from-acct .fa-l>div{min-width:0}
.from-acct b{font-size:0.875rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.from-acct small{font-size:0.75rem;color:var(--muted);font-family:'Courier New',monospace}
.from-acct .fa-bal{font-weight:800;font-size:1rem;white-space:nowrap;color:var(--accent);flex-shrink:0}

.recipient{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 0.875rem;border-radius:0.75rem;font-size:0.8125rem;margin-top:0.125rem;
  border:0.0625rem solid var(--line-strong);background:rgba(13,13,15,.5);animation:fadeUp .2s ease}
.recipient.loading{color:var(--muted)}
.recipient.bad{border-color:rgba(255,107,129,.4);background:rgba(255,107,129,.08);color:var(--bad)}
.recipient.ok{border-color:rgba(52,225,163,.4);background:rgba(52,225,163,.08)}
.recipient .rc-ava{width:2.375rem;height:2.375rem;border-radius:0.6875rem;display:grid;place-items:center;font-weight:800;font-size:0.875rem;color:#fff;text-transform:uppercase;flex-shrink:0;
  background:linear-gradient(135deg,var(--good),var(--accent-2))}
.recipient .rc-info{flex:1;min-width:0}
.recipient .rc-info b{font-size:0.875rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recipient .rc-info small{font-size:0.7188rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.recipient .rc-check{color:var(--good);flex-shrink:0}
.rc-spin{width:0.9375rem;height:0.9375rem;border-radius:50%;border:0.125rem solid rgba(242,59,70,.25);border-top-color:var(--accent);display:inline-block;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Überweisen: 2-Spalten-Banking-Screen ---------- */
#tab-transfer .transfer-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(0.875rem,1.6vw,1.25rem)}
#tab-transfer .panel{overflow:hidden}
#tab-transfer .transfer-grid>.panel{display:flex;flex-direction:column}
#tab-transfer .transfer-grid>.panel .form{flex:1;min-height:0;overflow-y:auto;padding-right:0.25rem}
.transfer-side{display:flex;flex-direction:column;gap:clamp(0.75rem,1.4vh,1.125rem);min-height:0}
.side-balance{flex-shrink:0;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 150% at 90% 0%,rgba(242,59,70,.22),transparent 55%),
    linear-gradient(135deg,#0c2e37,#0a1b23) !important;border:0.0625rem solid rgba(242,59,70,.25) !important}
.side-balance .sb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.625rem}
.side-balance .sb-label{font-size:0.6875rem;letter-spacing:0.0625rem;text-transform:uppercase;color:rgba(244,244,245,.6);font-weight:600}
.side-balance .sb-amount{font-size:clamp(1.625rem,3.6vh,2.125rem);font-weight:800;letter-spacing:-0.0312rem;white-space:nowrap}
.side-balance .sb-iban{display:flex;align-items:center;gap:0.5rem;margin-top:0.5rem;font-family:'Courier New',monospace;font-size:0.8125rem;color:rgba(244,244,245,.75);letter-spacing:0.0375rem}
.side-sec{flex-shrink:0}
.sec-list{list-style:none;display:flex;flex-direction:column;gap:0.5625rem}
.sec-list li{display:flex;align-items:flex-start;gap:0.5625rem;font-size:0.7812rem;color:var(--muted);line-height:1.45}
.sec-list li b{color:var(--txt)}
.sec-ico{flex-shrink:0;width:1.125rem;height:1.125rem;border-radius:0.375rem;display:grid;place-items:center;font-size:0.6875rem;font-weight:800;
  background:rgba(52,225,163,.15);color:var(--good);margin-top:0.0625rem}
.side-last{flex:1;min-height:0;display:flex;flex-direction:column}
.side-last .tx-list{flex:1;min-height:0;max-height:none}

/* ---------- Kartengebühr im Ausstellungs-Dialog ---------- */
.fee-line{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;margin-top:0.125rem;
  padding:0.6875rem 0.875rem;border-radius:0.75rem;font-size:0.8125rem;color:var(--muted);
  background:linear-gradient(135deg,rgba(242,59,70,.08),rgba(242,59,70,.04));border:0.0625rem solid rgba(242,59,70,.2)}
.fee-line strong{font-size:1rem;font-weight:800;color:var(--accent);letter-spacing:-0.0187rem}
.fee-line strong.free{color:var(--good)}

/* ---------- Bestätigungs-Dialog ---------- */
.confirm-box{background:rgba(13,13,15,.5);border:0.0625rem solid var(--line-strong);border-radius:0.875rem;padding:1rem 1.125rem;display:flex;flex-direction:column;gap:0.625rem}
.cf-row{display:flex;justify-content:space-between;align-items:center;gap:0.875rem;font-size:0.8125rem}
.cf-row span{color:var(--muted)}
.cf-row b{color:var(--txt);font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-amount{margin-top:0.375rem;text-align:center;font-size:1.875rem;font-weight:800;letter-spacing:-0.0312rem;
  background:linear-gradient(135deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:2.125rem;left:50%;transform:translateX(-50%);z-index:80;
  padding:0.8125rem 1.375rem;border-radius:0.8125rem;font-size:0.8438rem;font-weight:600;color:var(--txt);
  background:linear-gradient(160deg,rgba(24,24,28,.98),rgba(14,14,17,.98));
  border:0.0625rem solid var(--line-strong);box-shadow:0 1.25rem 3.125rem rgba(0,0,0,.55);
  display:flex;align-items:center;gap:0.625rem;animation:toastIn .25s cubic-bezier(.2,.9,.25,1.1);max-width:80vw}
.toast::before{content:"";width:0.5625rem;height:0.5625rem;border-radius:50%;flex-shrink:0;background:var(--accent);box-shadow:0 0 0.625rem var(--accent)}
.toast.success::before{background:var(--good);box-shadow:0 0 0.625rem var(--good)}
.toast.error::before{background:var(--bad);box-shadow:0 0 0.625rem var(--bad)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,1rem)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .window{width:96vw}
  .grid-2{grid-template-columns:1fr 20.625rem}
}
@media (max-width:980px){
  .grid-2{grid-template-columns:1fr}
  .func-cards{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:1fr}
  #tab-transfer .transfer-grid{grid-template-columns:1fr}
  .acct-select select{min-width:12.5rem}
}
/* kompaktes Layout für niedrige Höhen (1366x768 & kürzer):
   Höhen/Abstände der Übersicht skalieren bereits per clamp()/flex,
   hier nur Sidebar/Brand/Nav verdichten, die nicht clamp-gesteuert sind. */
@media (max-height:820px){
  .window{height:96vh}
  .sidebar{padding:1rem 0.8125rem}
  .brand{padding:0.125rem 0.375rem 0.875rem}
  .brand-mark{width:2.5rem;height:2.5rem}
  .nav{gap:0.1875rem}
  .nav-item{padding:0.5625rem 0.8125rem}
  .hero-chip{width:2.25rem;height:1.6875rem}
  .hero-trend{display:none}
}
@media (max-height:680px){
  .hero-pattern{display:none}
  .hero-trend{display:none}
  .cash-pill{padding:0.625rem 0.8125rem}
}