/* ═══════════════ Schilling — Design System v2 (reference-faithful) ═══════════════ */
:root {
  --bg: #060608;
  --panel: #0d0d12;
  --card: #131318;
  --glass: rgba(255,255,255,0.05);
  --glass-2: rgba(255,255,255,0.09);
  --hairline: rgba(255,255,255,0.08);
  --ink: #f5f5f7;
  --ink-2: #9b9ba4;
  --ink-3: #64646e;
  --grid: #26262c;
  --blue: #2f6bff;
  --r-xl: 56px; --r-l: 26px; --r-m: 14px;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --status-good: #0ca30c; --status-warning: #fab219; --status-critical: #d03b3b;
  --grad-magenta:
    radial-gradient(130% 75% at 50% -12%, rgba(255,150,195,.85), transparent 62%),
    radial-gradient(130% 55% at 50% 118%, rgba(255,70,120,.6), transparent 62%),
    linear-gradient(178deg, #d2286f 0%, #96195f 48%, #521040 100%);
  --grad-blue:
    radial-gradient(130% 75% at 50% -12%, rgba(195,225,255,.85), transparent 62%),
    radial-gradient(130% 55% at 50% 118%, rgba(110,170,255,.55), transparent 62%),
    linear-gradient(178deg, #4d8dfb 0%, #2f63f0 52%, #1c34c4 100%);
  --grad-violet: linear-gradient(135deg, #e0347c, #7b2ff7 50%, #2f6bff);
  --font-dot: "Doto", ui-monospace, monospace;
  --spring: cubic-bezier(.34,1.35,.4,1);
  --easeout: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden;
}
::selection { background: rgba(123,47,247,.45); }
button { font-family: inherit; }

.stage { position: relative; min-height: 100vh; }
.stage-glow {
  position: absolute; inset: 0 0 auto 0; height: 720px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 64% at 62% 8%, rgba(84,32,214,.55), transparent 70%),
    radial-gradient(40% 50% at 40% 0%, rgba(47,32,158,.5), transparent 70%),
    radial-gradient(30% 40% at 78% 20%, rgba(150,26,120,.28), transparent 70%);
  filter: saturate(1.15);
  animation: glowshift 18s ease-in-out infinite alternate;
}
@keyframes glowshift { from { opacity: .85; transform: translateX(0); } to { opacity: 1; transform: translateX(-40px); } }
.stage-dots {
  position: absolute; inset: 0 0 auto 0; height: 720px; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 75% 65% at 55% 10%, #000 20%, transparent 72%);
}

/* ── Topbar ── */
.topbar {
  position: relative; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 18px; padding: calc(26px + env(safe-area-inset-top, 0px)) clamp(22px, 4vw, 56px) 10px;
}
.topbar .brand { justify-self: start; }
.topbar .topnav { justify-self: center; }
.topbar .topbar-right { justify-self: end; }
@media (max-width: 760px) { .topbar { grid-template-columns: auto 1fr; } .topbar .topnav { grid-column: 1 / -1; grid-row: 2; } }
.brand-icon { width: 40px; height: 40px; border-radius: 12px; display: block; box-shadow: 0 8px 30px rgba(123,47,247,.5); transition: transform .5s var(--spring); }
.brand:hover .brand-icon { transform: rotate(-8deg) scale(1.08); }
.topnav { display: flex; gap: 6px; align-items: center; }
.tn {
  border: 0; background: transparent; color: rgba(255,255,255,.78); cursor: pointer;
  font: 500 13.5px/1 inherit; letter-spacing: .1px; padding: 12px 20px; border-radius: 999px;
  transition: color .25s, background .35s var(--easeout), transform .15s;
}
.tn:hover { color: #fff; }
.tn:active { transform: scale(.96); }
.tn.active { background: #fff; color: #0a0a0e; font-weight: 600; box-shadow: 0 6px 24px rgba(255,255,255,.22); }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.year-pill {
  appearance: none; border: 1px solid var(--hairline); background: rgba(255,255,255,.07);
  color: var(--ink); font: 600 12.5px inherit; padding: 10px 30px 10px 16px; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(12px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239b9ba4' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.orb {
  position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hairline);
  background: rgba(255,255,255,.07); color: var(--ink); cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(12px); transition: all .3s var(--easeout);
}
.orb:hover { background: #fff; color: #0a0a0e; transform: scale(1.06); }
.orb svg { width: 18px; height: 18px; }
.orb-badge {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #ff3b30; color: #fff; font: 700 10px/17px inherit; text-align: center;
}
.avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(255,255,255,.35); display: block; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ── Rail ── */
.rail {
  position: fixed; left: clamp(10px, 1.6vw, 26px); top: 50%; transform: translateY(-50%) translateX(-140%); z-index: 40;
  opacity: 0; pointer-events: none;
  transition: transform .45s var(--spring), opacity .3s var(--easeout);
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
  background: rgba(18,18,24,.72); border: 1px solid var(--hairline); border-radius: 999px;
  backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.rail.shown { transform: translateY(-50%) translateX(0); opacity: 1; pointer-events: auto; }
.rail-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: #17171c; display: grid; place-items: center;
  transition: all .35s var(--spring);
}
.rail-btn svg { width: 18px; height: 18px; }
.rail-btn:hover { transform: scale(1.12); }
.rail-btn.active { background: var(--blue); color: #fff; box-shadow: 0 8px 26px rgba(47,107,255,.55); }
@media (max-width: 900px) { .rail { display: none; } }

/* ── Main / Views ── */
main { position: relative; z-index: 10; padding: 18px clamp(22px, 4vw, 56px) 90px; max-width: 1560px; margin: 0 auto; }
@media (min-width: 901px) { main { padding-left: clamp(90px, 7vw, 120px); } }
.view { display: none; }
.view.active { display: block; animation: view-in .5s var(--easeout); }
@keyframes view-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Hero-Kartenreihe ── */
.hero-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1250px) { .hero-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .hero-row { grid-template-columns: 1fr; } }
.hcard {
  position: relative; border-radius: var(--r-xl); height: 560px; padding: 26px;
  overflow: hidden; display: flex; flex-direction: column;
  background: rgba(22,22,30,.62); border: 1px solid var(--hairline);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  transition: transform .7s var(--easeout), box-shadow .7s var(--easeout);
  animation: card-in .65s var(--easeout) backwards;
}
.hcard:hover { transform: scale(1.012); }
.hcard:nth-child(1) { animation-delay: .02s; } .hcard:nth-child(2) { animation-delay: .08s; }
.hcard:nth-child(3) { animation-delay: .14s; } .hcard:nth-child(4) { animation-delay: .20s; }
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }

.hcard.magenta { background: var(--grad-magenta); border-color: rgba(255,255,255,.25); }
.hcard.blue { background: var(--grad-blue); border-color: rgba(255,255,255,.25); }

.hcard-head { display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.hcard-head h3 { margin: 0; font-size: 14.5px; font-weight: 500; letter-spacing: .1px; }
.hc-orb {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.95); color: #111; display: grid; place-items: center;
  transition: transform .35s var(--spring); z-index: 2;
}
.hc-orb svg { width: 15px; height: 15px; }
.hc-orb:hover { transform: scale(1.15) rotate(45deg); }
.hc-pill {
  padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.14);
  font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.92); backdrop-filter: blur(8px); white-space: nowrap;
}

.dn { font-family: var(--font-dot); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; }

/* Zählerzeile (Referenz: "15 transactions" / "12 Sources") */
.count-block { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 2; }
.count-inline { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.count-num { font-size: 44px; line-height: 1; }
.count-lbl { font-size: 11.5px; color: rgba(255,255,255,.72); letter-spacing: .2px; white-space: nowrap; }
.count-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; }
.hcard:not(.magenta):not(.blue) .count-lbl { color: var(--ink-3); }
.mini-legend { font-size: 11px; color: rgba(255,255,255,.85); display: flex; flex-direction: column; gap: 5px; text-align: right; }
.mini-legend span::before { content: "●"; margin-right: 6px; font-size: 8px; vertical-align: 1px; }
.mini-legend span.o::before { content: "○"; }
.dotfield { flex: 1; min-height: 0; display: flex; align-items: center; margin: 10px 0; z-index: 1; opacity: .9; }
.dotfield svg { width: 100%; max-height: 200px; }
.hero-amount { z-index: 2; font-size: clamp(36px, 2.6vw, 44px); line-height: 1; }
.hero-amount small { font-size: .42em; opacity: .55; }
.hero-amount-lbl { font-size: 11.5px; color: rgba(255,255,255,.72); margin-top: 8px; }

/* Karte 2 — Foto / Rücklagen-Konto */
.hcard.photo { padding: 0; background: #101014; }
.photo-scroll {
  position: absolute; inset: 0; z-index: 2; overflow-y: auto;
  padding: 350px 14px 14px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: none;
}
.photo-scroll::-webkit-scrollbar { display: none; }
.photo-scroll > * { flex: none; }
.photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: saturate(.92); }
.photo-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,12,.06) 40%, rgba(8,8,12,.42) 82%, rgba(8,8,12,.55)); }
.bank-row {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(20,20,26,.52); border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 16px 44px rgba(0,0,0,.35);
}
.bank-chip { width: 52px; height: 36px; border-radius: 8px; background: linear-gradient(135deg,#3c3c46,#17171c); border: 1px solid rgba(255,255,255,.14); position: relative; flex: none; }
.bank-chip::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 14px; height: 14px; border-radius: 50%; background: #e0347c; box-shadow: -7px 0 0 rgba(47,107,255,.9); }
.bank-info { flex: 1; min-width: 0; }
.bank-info .t { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-info .s { display: block; font-size: 11px; color: var(--ink-2); letter-spacing: 1.5px; margin-top: 2px; white-space: nowrap; }
.bank-swap { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: #111; display: grid; place-items: center; cursor: pointer; transition: transform .3s var(--spring); flex: none; }
.bank-swap svg { width: 16px; height: 16px; }
.bank-swap:hover { transform: rotate(180deg); }
.photo-panel {
  position: relative; z-index: 2; padding: 14px 12px 8px;
  background: rgba(14,14,20,.55); border: 1px solid rgba(255,255,255,.1); border-radius: 22px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 16px 44px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 2px;
}
.photo-panel .ph-head { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 8px; }
.photo-panel .ph-head b { font-size: 13.5px; font-weight: 600; }
.ph-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 12px; font-size: 12.5px; color: var(--ink-2); }
.ph-row .ic { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; flex: none; }
.ph-row .ic svg { width: 14px; height: 14px; }
.ph-row .val { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-row .val.pos { color: #4cd964; } .ph-row .val.neg { color: #ff6b6b; }

/* Karte 3 — Orbit / Top Kunden */
.orbit-wrap { position: relative; flex: 1; min-height: 0; margin: 6px 0; z-index: 1; }
.orbit-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.orbit-rings i { position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; }
.orbit-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 84px; height: 84px; border-radius: 50%; background: #fff; color: #111;
  display: grid; place-items: center; font-weight: 700; font-size: 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); z-index: 2;
}
.orbit-sat {
  position: absolute; left: 50%; top: 50%; margin: -23px 0 0 -23px;
  width: 46px; height: 46px; border-radius: 50%; background: #ececf1; color: #17171c;
  display: grid; place-items: center; font-weight: 600; font-size: 13px;
  border: 2px solid rgba(255,255,255,.16); box-shadow: 0 10px 26px rgba(0,0,0,.45);
  animation: orbit-path var(--dur, 44s) linear infinite;
}
@keyframes orbit-path {
  from { transform: rotate(0deg) translateY(calc(var(--r, 75px) * -1)) rotate(0deg); }
  to   { transform: rotate(360deg) translateY(calc(var(--r, 75px) * -1)) rotate(-360deg); }
}
.orbit-tip {
  background: rgba(28,28,36,.88); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 10px 16px; backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0,0,0,.5); z-index: 3;
}
.orbit-tip .amt { font-size: 21px; white-space: nowrap; }
.orbit-tip .amt em { font-style: normal; font-size: 12px; color: #4cd964; margin-left: 6px; }
.orbit-tip .lbl { font-size: 11px; color: var(--ink-2); margin-top: 3px; }
.hcard-foot { display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.pager-dots { display: flex; gap: 6px; align-items: center; }
.pager-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.pager-dots i.on { background: #d3f26a; }

/* Karte 4 — Blau / Anstehend */
.due-entry { z-index: 2; }
.due-entry.solo { margin: auto; text-align: center; }
.due-entry.solo .due-client { font-size: 12.5px; margin-top: 10px; }
.due-when { margin-top: 6px; font-size: 11.5px; color: rgba(255,255,255,.85); font-weight: 500; }
.due-entry + .due-entry { margin-top: auto; }
.due-line { display: flex; align-items: flex-start; justify-content: space-between; }
.due-amt { font-size: 32px; line-height: 1; }
.due-client { font-size: 11.5px; color: rgba(255,255,255,.75); margin-top: 6px; }
.due-day { text-align: right; }
.due-day .d { font-size: 32px; line-height: 1; }
.due-day .m { font-size: 11px; color: rgba(255,255,255,.72); margin-top: 4px; }
.blue-deco { position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%); width: 230px; height: 230px; pointer-events: none; }
.blue-deco i { position: absolute; inset: 0; border: 1.5px solid rgba(255,255,255,.28); border-radius: 50%; }
.blue-deco i:nth-child(2) { inset: 28px; border-color: rgba(255,255,255,.18); }
.blue-deco .core {
  position: absolute; left: 50%; top: 50%; margin: -27px 0 0 -27px;
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.94); color: #17171c;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; overflow: hidden;
  animation: orbit-path 32s linear infinite; pointer-events: auto;
}
.blue-deco .core img { width: 100%; height: 100%; object-fit: cover; }
.hcard.empty-state { display: grid; place-items: center; color: var(--ink-3); font-size: 13px; }

/* ── Stat-Kacheln ── */
.stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 1250px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-tile#fixTile:hover { background: rgba(255,255,255,.09); }
.stat-tile {
  border-radius: 28px; padding: 20px 22px; background: rgba(22,22,30,.62);
  border: 1px solid var(--hairline); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; gap: 4px;
  animation: card-in .6s var(--easeout) backwards;
}
.stat-tile:nth-child(1) { animation-delay: .26s; } .stat-tile:nth-child(2) { animation-delay: .30s; }
.stat-tile:nth-child(3) { animation-delay: .34s; } .stat-tile:nth-child(4) { animation-delay: .38s; }
.stat-tile:nth-child(5) { animation-delay: .42s; }
.stat-tile .k { font-size: 11.5px; color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; }
.stat-tile .v { font-size: 26px; line-height: 1.1; }
.stat-tile .d { font-size: 11px; color: var(--ink-3); }
.stat-tile .d b { color: var(--ink-2); font-weight: 600; }
.fc-toggle { display: flex; gap: 3px; margin-top: 8px; }
.fc-toggle button {
  border: 1px solid var(--hairline); background: rgba(255,255,255,.05); color: var(--ink-3);
  font: 600 10px inherit; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: all .25s var(--easeout);
}
.fc-toggle button.active { background: #fff; color: #0a0a0e; border-color: #fff; }

/* ── Unteres Band ── */
.band {
  margin-top: 16px; border-radius: var(--r-xl); background: rgba(13,13,18,.85);
  border: 1px solid var(--hairline); backdrop-filter: blur(24px); overflow: hidden;
  animation: card-in .7s var(--easeout) .48s backwards;
}
.band-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.band-head .cap { font-size: 11px; color: var(--ink-3); letter-spacing: .4px; margin-right: 2px; }
.chip-avatars { display: flex; align-items: center; }
.chip-avatars .ca {
  width: 30px; height: 30px; border-radius: 50%; background: #ececf1; color: #17171c;
  display: grid; place-items: center; font-weight: 600; font-size: 11px;
  border: 2px solid #0d0d12; margin-left: -7px;
}
.chip-avatars .ca:first-child { margin-left: 0; }
.band-body { display: grid; grid-template-columns: 330px 1fr; }
@media (max-width: 1000px) { .band-body { grid-template-columns: 1fr; } }
.band-left { border-right: 1px solid var(--hairline); padding: 44px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.band-left .client-row { height: 54px; }
@media (max-width: 1000px) { .band-left { border-right: 0; border-bottom: 1px solid var(--hairline); } }
.client-row {
  display: grid; grid-template-columns: 34px 1fr 30px 92px; align-items: center; gap: 11px; padding: 10px 12px;
  background: rgba(255,255,255,.04); border: 1px solid transparent; border-radius: 18px;
  transition: all .3s var(--easeout);
}
.client-row:hover { background: rgba(255,255,255,.08); border-color: var(--hairline); }
.client-row .ca { width: 34px; height: 34px; border-radius: 50%; background: #ececf1; color: #17171c; display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
.client-row .nm { font-size: 13px; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-row .cnt { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #111; font-weight: 700; font-size: 11.5px; display: grid; place-items: center; justify-self: center; }
.client-row .amt { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.07); font-variant-numeric: tabular-nums; justify-self: stretch; text-align: center; white-space: nowrap; }
.timeline { position: relative; padding: 14px 20px 22px; overflow-x: auto; }
.tl-months { display: grid; grid-template-columns: repeat(12, minmax(64px, 1fr)); gap: 0; min-width: 780px; }
.tl-m { font-size: 10.5px; color: var(--ink-3); height: 30px; border-left: 1px dashed rgba(255,255,255,.06); padding-left: 8px; }
.tl-lane-bg { position: absolute; left: 0; right: 0; height: 54px; border-radius: 16px; background: rgba(255,255,255,.02); }
.tl-lanes { position: relative; min-width: 780px; min-height: 120px; }
.tl-pill {
  position: absolute; height: 30px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap;
  border: 1px solid; cursor: default; transition: transform .25s var(--easeout);
  animation: card-in .5s var(--easeout) backwards;
}
.tl-pill:hover { transform: scale(1.05); z-index: 5; }
.tl-pill.in { background: rgba(57,135,229,.16); border-color: rgba(57,135,229,.5); color: #9cc4f2; }
.tl-pill.out { background: rgba(217,89,38,.14); border-color: rgba(217,89,38,.5); color: #f0a686; }
.tl-now { position: absolute; top: -6px; bottom: 0; width: 1px; background: rgba(211,242,106,.7); }
.tl-now::before { content: "heute"; position: absolute; top: -14px; left: -14px; font-size: 9px; color: #d3f26a; }

/* ── Chart-Karte ── */
.panel {
  margin-top: 16px; border-radius: var(--r-xl); padding: 24px 26px;
  background: rgba(13,13,18,.85); border: 1px solid var(--hairline); backdrop-filter: blur(24px);
  animation: card-in .7s var(--easeout) .56s backwards;
}
.panel h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.panel .sub { color: var(--ink-2); font-size: 12px; margin: 0; }
.chart-wrap { position: relative; margin-top: 14px; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg text { font-family: inherit; font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart-legend { display: flex; gap: 18px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 5; opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s; background: rgba(20,20,26,.95); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 9px 12px; font-size: 12px; line-height: 1.5; white-space: nowrap;
  backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.chart-tip.on { opacity: 1; transform: none; }
.chart-tip b { font-variant-numeric: tabular-nums; }
.bar-hit { fill: transparent; }

/* ── Sektionsköpfe ── */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 14px; }
.section-head h2 { margin: 0; font-size: 21px; letter-spacing: -.3px; font-weight: 600; }
.section-head .sub { color: var(--ink-3); font-size: 12.5px; }
.empty { text-align: center; color: var(--ink-3); padding: 40px 20px; font-size: 13.5px; }

/* ── Belegliste ── */
.row-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.trx-row {
  display: grid; grid-template-columns: 44px 1.6fr 1fr 92px 108px 118px 112px 198px;
  gap: 14px; align-items: center; padding: 12px 18px;
  background: rgba(22,22,30,.6); border: 1px solid var(--hairline); border-radius: var(--r-l);
  transition: background .25s, transform .25s var(--easeout); animation: card-in .5s var(--easeout) backwards;
  backdrop-filter: blur(14px);
}
.trx-row:hover { background: rgba(255,255,255,.07); }
@media (max-width: 1100px) { .trx-row { grid-template-columns: 44px 1.4fr 112px 112px 160px; } .trx-row .hide-m { display: none; } }
.dirball { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.dirball svg { width: 16px; height: 16px; }
.dirball.in { color: var(--series-1); } .dirball.out { color: var(--series-2); }
.trx-main { min-width: 0; }
.trx-main .t { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trx-main .s { color: var(--ink-3); font-size: 11.5px; margin-top: 2px; }
.trx-num { font-variant-numeric: tabular-nums; text-align: right; font-size: 13.5px; }
.trx-num .lbl { display: block; color: var(--ink-3); font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid transparent; }
.chip svg { width: 12px; height: 12px; }
.chip.paid { color: #4cd964; border-color: rgba(12,163,12,.4); background: rgba(12,163,12,.1); }
.chip.open { color: var(--status-warning); border-color: rgba(250,178,25,.35); background: rgba(250,178,25,.09); }
.chip.overdue { color: #ff6b6b; border-color: rgba(208,59,59,.45); background: rgba(208,59,59,.12); }
.chip.other { color: var(--ink-2); border-color: var(--hairline); background: rgba(255,255,255,.05); }
.trx-actions { display: flex; gap: 6px; justify-content: flex-end; min-width: 0; }
.trx-row .chip { min-width: 104px; justify-content: center; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline); cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--ink-2); display: grid; place-items: center;
  transition: all .25s var(--easeout); text-decoration: none;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: #fff; color: #0a0a0e; transform: scale(1.1); }
.icon-btn.danger:hover { background: var(--status-critical); color: #fff; }

.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; }
.seg { display: flex; padding: 4px; gap: 2px; background: rgba(255,255,255,.05); border: 1px solid var(--hairline); border-radius: 999px; }
.seg button { border: 0; background: transparent; color: var(--ink-2); font: 500 12px inherit; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: all .3s var(--easeout); }
.seg button.active { background: #fff; color: #0a0a0e; font-weight: 600; }
.spacer { flex: 1; }

/* ── Buttons / Formulare ── */
.btn {
  border: 0; cursor: pointer; font: 600 13.5px inherit; letter-spacing: -.1px;
  padding: 13px 24px; border-radius: 999px; color: #0a0a0e; background: #fff;
  transition: transform .25s var(--spring), box-shadow .3s, opacity .2s;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 30px rgba(255,255,255,.16); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.grad { background: var(--grad-violet); color: #fff; box-shadow: 0 8px 28px rgba(123,47,247,.4); }
.btn.ghost { background: rgba(255,255,255,.06); border: 1px solid var(--hairline); color: var(--ink); }
.btn.small { padding: 9px 16px; font-size: 12px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.field label { font-size: 10.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .5px; text-transform: uppercase; }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.055); border: 1px solid var(--hairline); border-radius: var(--r-m);
  color: var(--ink); font: 500 13.5px inherit; padding: 12px 15px; outline: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
  -webkit-appearance: none; appearance: none;
}
.field select {
  cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%239b9ba4' fill='none' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field input[type="date"] { min-height: 45px; }
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); cursor: pointer; }
.field input[type="date"]::-webkit-datetime-edit { color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: rgba(123,47,247,.7); background: rgba(255,255,255,.08); box-shadow: 0 0 0 4px rgba(123,47,247,.18);
}
.field textarea { resize: vertical; min-height: 62px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
select option { background: #1a1a22; }

.metric-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.metric-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-2); }
.metric-row b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.metric-row.total { border-top: 1px solid var(--hairline); padding-top: 10px; color: var(--ink); font-weight: 600; }

/* ── Neue Rechnung ── */
.create-layout { display: grid; grid-template-columns: minmax(380px, 450px) 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .create-layout { grid-template-columns: 1fr; } }
.form-card { border-radius: var(--r-xl); padding: 24px; background: rgba(22,22,30,.62); border: 1px solid var(--hairline); backdrop-filter: blur(24px); animation: card-in .6s var(--easeout) backwards; }
.item-card { background: rgba(255,255,255,.04); border: 1px solid var(--hairline); border-radius: var(--r-l); padding: 15px 15px 2px; margin-bottom: 12px; position: relative; animation: card-in .4s var(--easeout); }
.item-card .rm { position: absolute; top: 9px; right: 9px; }
.preview-float { position: sticky; top: 16px; }
.pv-tools {
  width: fit-content; margin: 0;
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 18px;
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
  background: rgba(18,18,24,.7); border: 1px solid var(--hairline); border-radius: 999px;
  backdrop-filter: blur(18px);
}
.pv-tools b { color: var(--ink); font-weight: 600; }
.pv-sep { width: 1px; height: 18px; background: var(--hairline); margin: 0 4px; }
.pv-scroll {
  height: calc(100vh - 130px); min-height: 480px; overflow: auto; display: grid; place-items: center;
  border-radius: 24px;
}
.pv-page {
  position: relative; margin: auto; background: #fff; border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  transition: width .25s var(--easeout), height .25s var(--easeout);
}
.pv-page iframe { border: 0; width: 794px; height: 1123px; transform-origin: top left; background: #fff; display: block; }

/* ── Upload ── */
.dropzone {
  border: 1.5px dashed rgba(255,255,255,.22); border-radius: var(--r-l); padding: 30px;
  text-align: center; color: var(--ink-2); cursor: pointer; transition: all .3s var(--easeout);
  background: rgba(255,255,255,.02); font-size: 13px;
}
.dropzone svg { width: 26px; height: 26px; display: block; margin: 0 auto 10px; }
.dropzone:hover, .dropzone.drag { border-color: #7b2ff7; background: rgba(123,47,247,.08); color: var(--ink); }

/* ── Steuern ── */
.tax-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.tax-grid .panel { margin-top: 0; }
.tg-4 { grid-column: span 4; } .tg-8 { grid-column: span 8; } .tg-12 { grid-column: span 12; }
@media (max-width: 1180px) { .tg-4, .tg-8 { grid-column: span 12; } }
.stack-bar { display: flex; height: 42px; border-radius: 14px; overflow: hidden; gap: 2px; margin: 18px 0 12px; background: var(--panel); }
.stack-seg { position: relative; transition: flex .8s var(--easeout); min-width: 2px; }
.stack-labels { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ink-2); }
.tbl { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.tbl th { text-align: right; font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--hairline); font-weight: 600; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl td { padding: 10px; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(255,255,255,.05); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.sumrow td { font-weight: 600; border-top: 1px solid var(--hairline); }
.note { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin-top: 14px; }
.note code { background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 6px; }
.hero-mini { font-size: 30px; margin-top: 14px; }
.bracket-row { display: grid; grid-template-columns: 140px 1fr 100px; gap: 12px; align-items: center; font-size: 12px; color: var(--ink-2); margin-bottom: 9px; }
.bracket-track { height: 11px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.bracket-fill { height: 100%; border-radius: 6px; background: var(--series-1); width: 0; transition: width 1s var(--easeout); }
.bracket-row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ── Kundenseite ── */
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 14px; }
.client-card {
  position: relative; border-radius: 30px; corner-shape: squircle; padding: 22px;
  background: rgba(22,22,30,.62); border: 1px solid var(--hairline); backdrop-filter: blur(20px);
  cursor: pointer; transition: transform .5s var(--easeout), background .3s;
  animation: card-in .5s var(--easeout) backwards;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 26px rgba(255,255,255,.04), 0 20px 50px rgba(0,0,0,.35);
}
.client-card:hover { transform: scale(1.015); background: rgba(255,255,255,.07); }
.cc-ava { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #ececf1; color: #17171c; display: grid; place-items: center; font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.cc-ava img { width: 100%; height: 100%; object-fit: cover; }
.cc-name { font-size: 15px; font-weight: 600; }
.cc-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.cc-ret { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: #4cd964; background: rgba(12,163,12,.1); border: 1px solid rgba(12,163,12,.35); padding: 5px 10px; border-radius: 999px; }
.cc-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; }
.cc-stats .k { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); }
.cc-stats .v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Toast / Modal ── */
.toast-wrap { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast {
  background: rgba(24,24,30,.94); border: 1px solid var(--hairline); backdrop-filter: blur(16px);
  color: var(--ink); padding: 13px 22px; border-radius: 999px; font-size: 13px; font-weight: 500;
  box-shadow: 0 16px 50px rgba(0,0,0,.6); display: flex; gap: 10px; align-items: center;
  animation: toast-in .45s var(--spring);
}
.toast svg { width: 15px; height: 15px; flex: none; }
.toast.ok svg { color: #4cd964; }
.toast.err { border-color: rgba(208,59,59,.55); }
.toast.err svg { color: #ff6b6b; }
@keyframes toast-in { from { opacity: 0; transform: translateY(22px) scale(.92); } to { opacity: 1; transform: none; } }
.toast.bye { animation: toast-out .35s var(--easeout) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(14px) scale(.94); } }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgba(4,4,7,.65); backdrop-filter: blur(10px);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s;
}
.modal-backdrop.on { opacity: 1; pointer-events: auto; }
.modal {
  width: min(560px, 92vw); max-height: 86vh; overflow: auto; border-radius: var(--r-xl);
  background: rgba(22,22,28,.97); border: 1px solid var(--hairline); padding: 28px;
  transform: translateY(26px) scale(.96); transition: transform .4s var(--spring);
  box-shadow: 0 40px 120px rgba(0,0,0,.7);
}
.modal-backdrop.on .modal { transform: none; }
.modal h2 { margin: 0 0 18px; font-size: 18px; letter-spacing: -.2px; }
.modal.wide { width: min(780px, 94vw); }
.profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.profile-ava { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; background: #ececf1; color: #17171c; display: grid; place-items: center; font-weight: 700; font-size: 24px; flex: none; border: 2px solid rgba(255,255,255,.18); }
.profile-ava img { width: 100%; height: 100%; object-fit: cover; }
.profile-head .ph-name { font-size: 19px; font-weight: 600; }
.profile-head .ph-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
@media (max-width: 640px) { .profile-stats { grid-template-columns: repeat(2, 1fr); } }
.pstat { background: rgba(255,255,255,.05); border: 1px solid var(--hairline); border-radius: 18px; corner-shape: squircle; padding: 13px 15px; }
.pstat .k { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .5px; }
.pstat .v { font-size: 19px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.profile-sec { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .7px; margin: 18px 0 8px; }
.mini-trx { display: grid; grid-template-columns: 34px 1fr 92px 108px auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; corner-shape: squircle; background: rgba(255,255,255,.04); border: 1px solid transparent; margin-bottom: 7px; font-size: 12.5px; transition: background .25s; }
.mini-trx:hover { background: rgba(255,255,255,.08); }
.mini-trx .db { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.mini-trx .db svg { width: 13px; height: 13px; }
.mini-trx .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.client-row { cursor: pointer; }
.orbit-sat, .orbit-center { cursor: pointer; }
.modal .sub { color: var(--ink-2); font-size: 12.5px; }

/* ── Squircles + Leuchtkanten (Referenz-Look) ── */
.hcard, .panel, .stat-tile, .band, .form-card, .preview-shell, .modal {
  corner-shape: squircle;
}
.panel, .band, .form-card { border-radius: 44px; }
.stat-tile { border-radius: 34px; }
.hcard, .panel, .stat-tile, .band, .form-card {
  border-color: rgba(255,255,255,.07);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 30px rgba(255,255,255,.05),
    0 26px 60px rgba(0,0,0,.42);
}
.hcard.magenta {
  border-color: rgba(255,255,255,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 0 46px rgba(255,190,215,.30),
    0 26px 60px rgba(0,0,0,.42), 0 0 64px rgba(224,35,115,.28);
}
.hcard.smoke {
  background:
    radial-gradient(130% 62% at 50% -10%, rgba(185,185,200,.38), transparent 62%),
    radial-gradient(95% 45% at 50% 112%, rgba(130,130,145,.16), transparent 62%),
    linear-gradient(178deg, #3b3b43 0%, #1c1c22 42%, #0d0d11 100%);
  border-color: rgba(255,255,255,.16);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 0 44px rgba(200,200,215,.10),
    0 26px 60px rgba(0,0,0,.5), 0 0 48px rgba(120,120,140,.10);
}
.hcard.smoke:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 50px rgba(200,200,215,.14),
    0 36px 80px rgba(0,0,0,.55), 0 0 60px rgba(120,120,140,.14);
}
.hcard.smoke .count-lbl { color: rgba(255,255,255,.55); }
.hcard.blue {
  border-color: rgba(255,255,255,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 0 46px rgba(190,220,255,.32),
    0 26px 60px rgba(0,0,0,.42), 0 0 64px rgba(47,107,255,.3);
}
.hcard.photo, .hcard:not(.magenta):not(.blue):not(.smoke) {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 0 34px rgba(255,255,255,.06),
    0 26px 60px rgba(0,0,0,.42), 0 0 44px rgba(110,58,255,.08);
}
.hcard:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 34px rgba(255,255,255,.08), 0 36px 80px rgba(0,0,0,.5), 0 0 64px rgba(110,58,255,.14); }
.hcard.magenta:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 52px rgba(255,190,215,.36), 0 36px 80px rgba(0,0,0,.5), 0 0 80px rgba(224,35,115,.36); }
.hcard.blue:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 0 52px rgba(190,220,255,.38), 0 36px 80px rgba(0,0,0,.5), 0 0 80px rgba(47,107,255,.38); }
.panel, .stat-tile, .band, .form-card { position: relative; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════ Mobile ═══════════════ */
/* Zoom sperren: kein Doppeltipp-/Pinch-Zoom, kein iOS-Auto-Zoom beim Fokus (braucht ≥16px Schrift in Eingabefeldern) */
html, body { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 760px) {
  .topbar { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 8px; gap: 10px; }
  .topbar .topnav {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
    display: flex; flex-wrap: nowrap;
  }
  .topbar .topnav::-webkit-scrollbar { display: none; }
  .tn { padding: 10px 15px; font-size: 13px; flex: none; }
  .brand-icon { width: 36px; height: 36px; }
  .orb, .avatar { width: 38px; height: 38px; }
  main { padding: 10px 14px calc(60px + env(safe-area-inset-bottom)); }
  .stage-glow, .stage-dots { height: 480px; }
}

@media (max-width: 700px) {
  .hcard { height: auto; min-height: 480px; }
  .hcard.photo { height: 520px; }
  /* Foto-Karte: am Handy nicht scrollbar, Inhalt sitzt unten (kein Scroll-Trap) */
  .photo-scroll { overflow: hidden; justify-content: flex-end; padding-top: 14px; }
  .hero-amount { font-size: 34px; }
  .section-head { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 560px) {
  .stat-strip { grid-template-columns: 1fr; }
  .band-head { padding: 14px 16px; }
  .band-left { padding-top: 14px; }
  .client-grid { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: 1fr 1fr; }
  .modal { padding: 20px; border-radius: 28px; }
  .filter-bar { gap: 8px; }
  .filter-bar .btn { flex: 1; }
  .seg { width: 100%; justify-content: space-between; }
  .seg button { flex: 1; }
}

/* Belegliste kompakt: zwei Zeilen pro Beleg */
@media (max-width: 640px) {
  .trx-row { grid-template-columns: 40px 1fr auto; row-gap: 10px; padding: 12px 14px; }
  .trx-row .hide-m { display: none; }
  .trx-chip { grid-column: 1 / 2; grid-row: 2; }
  .trx-row .chip { min-width: 0; padding: 6px 9px; }
  .trx-row .chip svg + * { display: none; }
  .trx-actions { grid-column: 2 / -1; grid-row: 2; }
  .dirball { width: 36px; height: 36px; }
}

/* Neue Rechnung / Vorschau am Handy */
@media (max-width: 1100px) {
  .preview-float { position: static; }
  .pv-scroll { height: 72vh; min-height: 380px; }
}
@media (max-width: 640px) {
  .pv-tools { padding: 5px 6px 5px 14px; }
  .form-card { padding: 18px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* Zeitleiste: Links-Liste ohne Lane-Versatz, wenn gestapelt */
@media (max-width: 1000px) {
  .band-left { padding-top: 14px; }
  .band-left .client-row { height: auto; }
}

/* iOS Momentum-Scroll */
.pv-scroll, .photo-scroll, .timeline, .topnav { -webkit-overflow-scrolling: touch; }

/* ═══════════════ Auth ═══════════════ */
.auth-gate[hidden] { display: none; }
.auth-gate {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background:
    radial-gradient(58% 64% at 62% 8%, rgba(84,32,214,.5), transparent 70%),
    radial-gradient(40% 50% at 40% 0%, rgba(47,32,158,.45), transparent 70%),
    #060608;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.auth-card {
  width: min(400px, 94vw); border-radius: var(--r-xl); corner-shape: squircle;
  background: rgba(20,20,28,.75); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(28px); padding: 34px 30px 30px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 34px rgba(255,255,255,.05), 0 40px 100px rgba(0,0,0,.6);
  animation: card-in .6s var(--easeout);
}
.auth-card .logo { width: 58px; height: 58px; border-radius: 16px; display: block; margin: 0 auto 16px; box-shadow: 0 10px 34px rgba(123,47,247,.5); }
.auth-card h1 { margin: 0 0 4px; font-size: 20px; text-align: center; letter-spacing: -.3px; }
.auth-card .sub { text-align: center; color: var(--ink-3); font-size: 12.5px; margin: 0 0 22px; }
.auth-card .field input { text-align: center; letter-spacing: .5px; }
.auth-card input.codein { font-family: var(--font-dot); font-size: 22px; letter-spacing: 8px; font-weight: 700; }
.auth-err { color: #ff6b6b; font-size: 12.5px; text-align: center; min-height: 18px; margin: 4px 0 10px; }
.qr-box { display: grid; place-items: center; margin: 6px 0 14px; }
.qr-box img { border-radius: 14px; background: #fff; padding: 8px; width: 200px; height: 200px; }
.secret-line { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--ink-2); text-align: center; word-break: break-all; background: rgba(255,255,255,.05); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; user-select: all; }

/* ═══════════════ E-Mail ═══════════════ */
.mail-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: background .2s; }
.mail-row:hover { background: rgba(255,255,255,.06); }
.mail-row .db { display: grid; place-items: center; }
.mail-body, .mail-sig { white-space: pre-wrap; font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink-2); background: rgba(255,255,255,.04); border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; margin: 0; }
.mail-sig { font-size: 12px; color: var(--ink-3); margin: -6px 0 4px; }
.mail-att { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--hairline); cursor: pointer; font-size: 12.5px; }
.mail-att input { accent-color: #7b2ff7; }