
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,sans-serif;color:#0F2A44;background:#fff;line-height:1.5}
a{color:#0F2A44}
.wm{font:700 24px 'Source Serif 4',Georgia,serif;letter-spacing:-.01em;text-decoration:none;color:#0F2A44}.wm b{color:#0E7C4A}
.btn{display:inline-block;background:#0F2A44;color:#fff;font:600 14px Inter,sans-serif;padding:11px 18px;border-radius:6px;border:0;cursor:pointer;text-decoration:none;line-height:1.3}
.btn.g{background:#0E7C4A}.btn.o{background:#fff;color:#0F2A44;border:1px solid #C9D2DB}.btn.r{background:#fff;color:#B42318;border:1px solid #E4B4AE}
.btn.full{display:block;width:100%;text-align:center;padding:14px;font-size:15px;border-radius:8px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
input,select,textarea{font:400 15px Inter,sans-serif;color:#0F2A44;border:1px solid #C9D2DB;border-radius:6px;padding:11px 13px;width:100%;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #0E7C4A;outline-offset:1px;border-color:#0E7C4A}
label.f{display:block;font:600 13px Inter;margin:14px 0 6px;color:#3B4B5C}
.hint{font:400 12px Inter;color:#6B7B8C;margin-top:4px}
.err{background:#FEF3F2;border:1px solid #F4C7C2;color:#912018;border-radius:8px;padding:11px 13px;font-size:14px;margin:12px 0}
.ok{background:#F2FAF6;border:1px solid #B7E0CB;color:#0B5E38;border-radius:8px;padding:11px 13px;font-size:14px;margin:12px 0}
/* site chrome */
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 48px;border-bottom:1px solid #E6EAEE;gap:20px;flex-wrap:wrap}
.nav ul{display:flex;gap:28px;list-style:none;font:500 14px Inter;color:#3B4B5C}.nav ul a{text-decoration:none;color:#3B4B5C}
.foot{padding:18px 48px;font:400 12px/1.6 Inter;color:#7A8896;background:#F5F7F9;border-top:1px solid #E6EAEE}
.foot a{color:#5A6B7C;margin-right:14px}
/* home */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;padding:56px 48px 44px;max-width:1240px;margin:0 auto}
h1{font:600 46px/1.08 'Source Serif 4',Georgia,serif;letter-spacing:-.015em}
.lead{font:400 17px/1.55 Inter;color:#3B4B5C;margin:18px 0 26px;max-width:540px}
.codeform{display:flex;gap:10px;margin-top:22px;max-width:520px}.codeform input{flex:1}
.ex{border:1px solid #E6EAEE;border-radius:10px;padding:22px;background:#FBFCFD;align-self:start}
.ex h4{font:600 12px Inter;letter-spacing:.08em;color:#6B7B8C;text-transform:uppercase;margin-bottom:12px}
.ln{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #EEF1F4;font:400 14px Inter}
.ln b{font:600 14px 'IBM Plex Mono',monospace}.ln.mute{color:#5A6B7C;font-size:12.5px;border:0}
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #E6EAEE}
.strip div{padding:22px 48px 26px;border-right:1px solid #E6EAEE}.strip div:last-child{border:0}
.strip h5{font:600 15px Inter;margin-bottom:6px}.strip p{font:400 13px/1.5 Inter;color:#5A6B7C}
/* pay page */
.paywrap{min-height:100vh;background:#F5F7F9;padding:28px 16px 40px}
.pay{max-width:440px;margin:0 auto;background:#fff;border:1px solid #E6EAEE;border-radius:14px;padding:22px 20px 24px}
.pay .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.pay .top .wm{font-size:19px}
.lock{font:500 11.5px Inter;color:#0E7C4A}
.to{font:500 12px Inter;color:#6B7B8C;text-transform:uppercase;letter-spacing:.06em}
.payee{font:600 19px 'Source Serif 4',Georgia,serif;margin:4px 0 2px}.desc{font:400 13.5px Inter;color:#5A6B7C}
.amt{font:600 40px 'Source Serif 4',Georgia,serif;margin:16px 0 4px}.due{font:400 12.5px Inter;color:#6B7B8C;margin-bottom:16px}
.rails input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.r{border:1px solid #DCE2E8;border-radius:8px;padding:12px 13px;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer}
.r h6{font:600 14px Inter}.r p{font:400 11.5px Inter;color:#6B7B8C}.r b{font:600 14px 'IBM Plex Mono',monospace}.r small{display:block;text-align:right;font:400 10.5px Inter;color:#6B7B8C}
.r.off{opacity:.5;cursor:default}
.panel{display:none;margin-top:6px}
#rail-zelle:checked ~ label[for=rail-zelle],#rail-ach:checked ~ label[for=rail-ach],#rail-card:checked ~ label[for=rail-card],#rail-check:checked ~ label[for=rail-check]{border:2px solid #0E7C4A;background:#F2FAF6;padding:11px 12px}
#rail-zelle:checked ~ .p-zelle,#rail-ach:checked ~ .p-ach,#rail-card:checked ~ .p-card,#rail-check:checked ~ .p-check{display:block}
.z{background:#F5F7F9;border-radius:8px;padding:13px;margin:12px 0}.z div{display:flex;justify-content:space-between;gap:10px;font:400 13px Inter;padding:4px 0}.z b{font:600 13px 'IBM Plex Mono',monospace;text-align:right}
.steps{list-style:none;margin:12px 0;padding:0}.steps li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;background:#F5F7F9;border-radius:8px;padding:11px 12px;margin-bottom:8px}
.steps .n{width:24px;height:24px;border-radius:50%;background:#0F2A44;color:#fff;font:600 12px Inter;display:flex;align-items:center;justify-content:center}
.steps .k{font:400 11.5px Inter;color:#6B7B8C}.steps .v{font:600 15px 'IBM Plex Mono',monospace;word-break:break-all}
.cp{background:#fff;border:1px solid #C9D2DB;border-radius:6px;font:600 12px Inter;color:#0F2A44;padding:7px 11px;cursor:pointer;white-space:nowrap}.cp.done{background:#0E7C4A;color:#fff;border-color:#0E7C4A}
.fine{font:400 11px/1.5 Inter;color:#7A8896;margin-top:12px}.fine a{color:#5A6B7C}
.state{text-align:center;padding:18px 4px 6px}.state h2{font:600 24px 'Source Serif 4',Georgia,serif;margin-bottom:8px}.state p{font-size:14px;color:#5A6B7C}
.badge{display:inline-block;font:600 11px Inter;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:#EEF1F4;color:#3B4B5C}
.badge.open{background:#EAF2FB;color:#1D4E89}.badge.payer_reported{background:#FFF6E5;color:#8A5A00}.badge.paid{background:#E7F5EE;color:#0B5E38}.badge.canceled,.badge.expired{background:#F2F4F6;color:#6B7B8C}
/* legal */
.doc{max-width:780px;margin:0 auto;padding:44px 24px 60px}
.doc h1{font-size:36px;margin-bottom:6px}.doc .meta{font:400 13px Inter;color:#6B7B8C;margin-bottom:26px}
.doc h2{font:600 20px 'Source Serif 4',Georgia,serif;margin:26px 0 8px}.doc p,.doc li{font:400 15px/1.65 Inter;color:#26394D;margin-bottom:10px}.doc ul{padding-left:22px}
.doc table{border-collapse:collapse;width:100%;margin:10px 0 16px;font-size:14px}.doc td,.doc th{border:1px solid #E6EAEE;padding:9px 10px;text-align:left}.doc th{background:#F5F7F9;font-weight:600}
.notice{background:#FFF8EB;border:1px solid #F1D9A6;border-radius:8px;padding:12px 14px;font-size:13.5px;color:#6B4A00;margin-bottom:22px}
/* admin */
.adm{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{background:#0F2A44;color:#fff;padding:22px 18px}.side .wm{color:#fff;font-size:21px}.side .wm b{color:#5FD39A}
.side nav{margin-top:28px;display:flex;flex-direction:column;gap:4px}.side nav a{color:#C9D6E3;text-decoration:none;font:500 14px Inter;padding:9px 10px;border-radius:6px}.side nav a.on,.side nav a:hover{background:#1B3B5C;color:#fff}
.side .who{margin-top:30px;font:400 12px Inter;color:#8FA3B8;word-break:break-all}
.main{padding:28px 36px 60px;background:#FBFCFD}
.main h1{font-size:30px;margin-bottom:4px}.main .sub{color:#5A6B7C;font-size:14px;margin-bottom:22px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid #E6EAEE;border-radius:10px;padding:16px}.kpi p{font:500 12px Inter;color:#6B7B8C;text-transform:uppercase;letter-spacing:.05em}.kpi b{display:block;font:600 24px 'IBM Plex Mono',monospace;margin-top:6px}
table.t{width:100%;border-collapse:collapse;background:#fff;border:1px solid #E6EAEE;border-radius:10px;overflow:hidden;font-size:14px}
table.t th{text-align:left;font:600 12px Inter;color:#6B7B8C;text-transform:uppercase;letter-spacing:.05em;padding:11px 14px;background:#F5F7F9;border-bottom:1px solid #E6EAEE}
table.t td{padding:12px 14px;border-bottom:1px solid #EEF1F4;vertical-align:top}table.t tr:last-child td{border:0}
table.t td.n{font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.box{background:#fff;border:1px solid #E6EAEE;border-radius:10px;padding:20px 22px;margin-bottom:18px}
.box h3{font:600 17px 'Source Serif 4',Georgia,serif;margin-bottom:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.kv{display:grid;grid-template-columns:170px 1fr;gap:8px 14px;font-size:14px}.kv dt{color:#6B7B8C}.kv dd{margin:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.copy{display:flex;gap:8px}.copy input{font-family:'IBM Plex Mono',monospace;font-size:13px}
.login{max-width:400px;margin:90px auto;padding:0 18px}.login .wm{display:block;margin-bottom:24px}
.login h1{font-size:28px;margin-bottom:6px}
.tl{list-style:none;font-size:13.5px}.tl li{padding:7px 0;border-bottom:1px solid #EEF1F4;display:flex;gap:12px}.tl li span{color:#6B7B8C;min-width:170px}
@media (max-width:900px){
 .nav{padding:16px 20px}.nav ul{display:none}
 .hero{grid-template-columns:1fr;padding:34px 20px 28px;gap:26px}h1{font-size:34px}
 .strip{grid-template-columns:1fr 1fr}.strip div{padding:18px 20px;border-bottom:1px solid #E6EAEE}
 .foot{padding:16px 20px}
 .adm{grid-template-columns:1fr}.side{padding:14px 18px}.side nav{flex-direction:row;flex-wrap:wrap;margin-top:12px}.side .who{display:none}
 .main{padding:20px 16px}.cards{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}.kv{grid-template-columns:120px 1fr}
 table.t{font-size:13px}table.t th,table.t td{padding:9px 8px}
}
