/* Bavora Pay · Händlerbereich (Pay Standalone) */
:root{--ink:#14261f;--muted:#667a71;--line:#e4e8e3;--soft:#f6f5f1;--card:#fff;--brand:#0f3b31;--brand-2:#185941;--gold:#c9974e;--gold-soft:#f7efe1;--ok:#1d7a4f;--ok-soft:#e7f4ec;--warn:#9a6413;--warn-soft:#fbf1df;--bad:#9b3a22;--bad-soft:#fbece6;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--soft);color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--soft)}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--brand-2)}
[hidden]{display:none!important}

/* Top bar */
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,3.5vw,44px);background:#fff;border-bottom:1px solid var(--line);gap:15px;position:sticky;top:0;z-index:5}
.brand{text-decoration:none;display:flex;align-items:center}
.brand-logo{display:block;height:46px;width:auto;max-width:170px;object-fit:contain}
.topbar-right{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.account-chip:not(:empty){border:1px solid var(--line);border-radius:99px;padding:6px 12px;color:var(--ink);font-weight:650;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-pill{border-radius:99px;padding:5px 10px;background:var(--warn-soft);color:var(--warn);font-size:11px;font-weight:800;letter-spacing:.06em}

/* Layout */
.shell{max-width:1480px;margin:0 auto;display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 72px)}
.sidebar{background:#fff;border-right:1px solid var(--line);padding:30px 14px;display:flex;flex-direction:column;position:sticky;top:72px;height:calc(100vh - 72px)}
.sidebar-caption,.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--gold)}
.sidebar-caption{padding:0 12px 16px}
.sidebar nav{display:grid;gap:4px}
.nav-item{border:0;border-radius:10px;background:transparent;padding:11px 12px;color:#4d6359;text-align:left;font-weight:650;display:flex;align-items:center;gap:11px;font-size:14px}
.nav-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--soft);color:var(--brand-2);font-size:14px;flex:none}
.nav-item:hover{background:#f2f5f1}
.nav-item.active{color:var(--brand);background:var(--ok-soft)}
.nav-item.active .nav-icon{background:var(--brand);color:#fff}
.sidebar-bottom{margin-top:auto;color:var(--muted);font-size:12px;line-height:1.7;padding:22px 12px 0;border-top:1px solid var(--line)}
.sidebar-bottom strong{color:var(--ink)}
.content{min-width:0;padding:clamp(20px,4vw,48px);max-width:1180px;width:100%}

/* Headings */
.heading-line{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
h1{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.04em;margin:6px 0 6px;line-height:1.1}
h2{font-size:19px;letter-spacing:-.02em;margin:0 0 8px}
h3{font-size:16px;margin:0 0 10px}
p{line-height:1.6;margin:0 0 14px}
.muted{color:var(--muted)}.micro{font-size:12px;line-height:1.65}

/* Buttons */
.primary,.secondary{border-radius:10px;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;font-size:13.5px;font-weight:750;text-decoration:none;gap:6px}
.primary{background:var(--brand);border:1px solid var(--brand);color:#fff}
.primary:hover:enabled,.primary.as-link:hover{background:#0a2c24}
.primary.big{min-height:48px;padding:12px 20px;font-size:14.5px;box-shadow:0 8px 22px rgba(15,59,49,.18)}
.secondary{background:#fff;color:var(--brand);border:1px solid #cfdbd3}
.secondary:hover:enabled,.secondary.as-link:hover{background:#f1f7f3}
.as-link{text-decoration:none}
.link-button{border:0;background:none;color:var(--brand-2);font-weight:700;font-size:13px;padding:5px}
.link-button:hover{text-decoration:underline}
.full{width:100%}

/* Cards */
.card,.metric,.panel-section:not(#panel-overview){background:var(--card);border:1px solid var(--line);border-radius:16px}
.card{padding:22px}
.card.inset{box-shadow:none}
.card.banner{margin:0 0 20px;padding:16px 18px;border-color:#ead9b8;background:var(--gold-soft)}
.card.banner p{margin:4px 0 0}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.panel-section:not(#panel-overview){padding:26px;min-height:240px}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.section-head p{margin:0}

/* Overview */
.setup-card{margin-bottom:18px;border-color:#d9e6dc}
.setup-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:12px}
.setup-head p{margin:0}
.progress{width:min(240px,40%);height:8px;border-radius:99px;background:#edf1ec;overflow:hidden}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand-2),var(--gold));border-radius:99px;transition:width .3s}
.setup-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.setup-list li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;padding:11px 4px;border-top:1px solid #f0f2ee}
.setup-list li:first-child{border-top:0}
.setup-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:99px;font-size:13px;font-weight:800;background:#eef1ed;color:#7b8c84}
.setup-list li.done .setup-mark{background:var(--ok-soft);color:var(--ok)}
.setup-list li.current .setup-mark{background:var(--gold-soft);color:var(--warn)}
.setup-list strong{display:block;font-size:14px}
.setup-list small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
.setup-list li.done strong{color:#4d6359}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.metric{padding:20px;display:flex;flex-direction:column;gap:6px;min-height:128px}
.metric span{color:var(--muted);font-size:12.5px;font-weight:650}
.metric strong{font-size:clamp(22px,2.4vw,29px);letter-spacing:-.03em}
.metric small{color:#8a9b92;font-size:12px;margin-top:auto}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px}

/* Tables */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:13px 10px;border-bottom:1px solid #eef0ec;text-align:left;white-space:nowrap;vertical-align:middle}
th{font-weight:700;color:var(--muted);font-size:12px;letter-spacing:.02em}
td{color:#2a4036}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
td.desc{white-space:normal;min-width:160px;max-width:320px}
tbody tr:hover td{background:#fafbf9}
table.compact td{padding:10px 6px}
table.compact tr:last-child td{border-bottom:0}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 9px;font-size:11.5px;font-weight:750;background:#eef1ed;color:#4d6359}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.empty{color:var(--muted);text-align:center;padding:26px 10px}

/* Stripe */
.status-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}
.status-item{border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;gap:4px;background:#fcfcfb}
.status-item span{color:var(--muted);font-size:12px;font-weight:650}
.status-item strong{font-size:14px}
.callout{border:1px dashed #d4ddd6;border-radius:14px;padding:18px;margin-bottom:16px;background:#fbfcfa}
.callout p{margin:0 0 12px}
.check-list{margin:0 0 12px;padding-left:20px;line-height:1.8;font-size:13.5px}

/* Forms */
.customer-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.customer-form label,.auth-card label,.search-label{display:flex;flex-direction:column;font-size:13px;font-weight:650;gap:7px;color:#3d544a}
.customer-form input,.auth-card input,.search-label input{width:100%;border:1px solid #d6e0d9;border-radius:10px;padding:11px 12px;outline-color:var(--brand-2);background:#fff;color:var(--ink)}
.customer-form input:focus,.search-label input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(24,89,65,.12);outline:0}
.form-actions{display:flex;gap:9px;align-items:end}
#company-form{margin-bottom:12px}
.search-label{max-width:420px;margin:18px 0}

/* Help */
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.step-number{display:inline-block;font-weight:800;color:var(--gold);font-size:12px;letter-spacing:.08em;margin-bottom:6px}
.faq details{border-top:1px solid #eef0ec;padding:12px 0}
.faq details:first-of-type{border-top:0}
.faq summary{cursor:pointer;font-weight:700;font-size:14px}
.faq details p{margin:8px 0 0;color:#4d6359;font-size:13.5px}

/* Sign-in / activation */
.auth-wrap{padding:clamp(28px,8vh,90px) 18px;min-height:calc(100vh - 72px)}
.auth-card{max-width:480px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(26px,4vw,42px);box-shadow:0 18px 50px rgba(16,45,22,.07)}
.auth-card form{display:grid;gap:16px;margin:22px 0}
.auth-card h1{font-size:32px}
.auth-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;margin-top:8px}
.plain-steps{margin:0 0 18px;padding-left:20px;line-height:1.9;color:#3d544a;font-size:14px}

/* Notices */
.notice{display:none;padding:11px 22px;background:var(--ok-soft);color:#14583b;text-align:center;font-size:13px}
.notice.visible{display:block}.notice.error{color:var(--bad);background:var(--bad-soft)}

@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.two-col{grid-template-columns:1fr}}
@media(max-width:900px){.shell{grid-template-columns:minmax(0,1fr)}.sidebar{position:static;height:auto;min-width:0;border-right:0;border-bottom:1px solid var(--line);padding:10px 12px}.sidebar-caption,.sidebar-bottom{display:none}.sidebar nav{display:flex;overflow-x:auto;gap:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.nav-item{white-space:nowrap;padding:9px 10px}.nav-icon{width:24px;height:24px}.content{padding:22px 16px}}
/* Payments as stacked cards on phones: description + amount, date + status, kind + fee. */
@media(max-width:610px){#panel-payments thead{display:none}#panel-payments table,#panel-payments tbody{display:block}#rows tr.pay-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"desc amount" "date status" "kind fee" "refund refund";gap:5px 12px;padding:14px 2px;border-bottom:1px solid #eef0ec}#rows tr.pay-row td{display:block;padding:0;border:0;white-space:normal;min-width:0;max-width:none}#rows .desc{grid-area:desc;font-weight:750;color:var(--ink)}#rows .c-amount{grid-area:amount;font-weight:750;font-size:14px}#rows .c-date{grid-area:date;color:var(--muted);font-size:12px}#rows .c-status{grid-area:status;text-align:right}#rows .c-kind{grid-area:kind;color:var(--muted);font-size:12px}#rows .c-fee{grid-area:fee;color:var(--muted);font-size:12px}#rows .c-fee::before{content:"Gebühr "}#rows .c-refund{grid-area:refund;text-align:left;color:var(--muted);font-size:12px}#rows .c-refund::before{content:"Erstattet: "}#rows .c-refund.is-empty{display:none}}
@media(max-width:610px){.topbar{padding:0 14px;height:64px}.brand-logo{height:38px;max-width:140px}.account-chip{display:none}.heading-line{display:block}.heading-line .primary{margin-top:12px;width:100%}.metrics{grid-template-columns:1fr 1fr;gap:10px}.metric{min-height:108px;padding:15px}.guide-grid,.customer-form{grid-template-columns:1fr}.status-grid{grid-template-columns:1fr 1fr}.panel-section:not(#panel-overview){padding:16px}.section-head{flex-wrap:wrap}.setup-head{display:block}.progress{width:100%;margin-top:10px}.setup-list li{grid-template-columns:28px 1fr}.setup-list li .secondary,.setup-list li .primary{grid-column:2;justify-self:start}}
#login-panel .auth-actions{justify-content:center;margin-top:18px}