:root{--p:#7b1734;--bg:#f3f6fa;--card:#fff;--text:#172033;--muted:#667085;--border:#dbe3ec;--danger:#c62828;--ok:#16813b}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}.app{max-width:1100px;margin:auto;padding:16px 16px 90px}.top{display:flex;justify-content:space-between;align-items:center;gap:12px}.top h1{margin:.2rem 0}.tabs{display:flex;gap:8px;position:sticky;top:0;background:rgba(243,246,250,.95);padding:12px 0;z-index:3}.tabs button{border:1px solid var(--border);background:#fff;padding:10px 15px;border-radius:999px}.tabs button.active{background:var(--p);color:#fff}.panel{display:none}.panel.active{display:block}.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;margin-bottom:16px;box-shadow:0 8px 24px #18314b10}.hero{text-align:center}.odo{font-size:clamp(2.4rem,10vw,4rem);font-weight:800;color:var(--p)}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:12px;padding:12px 16px;background:#e8eef5;color:var(--text);font-weight:700;text-decoration:none}.btn.primary{background:var(--p);color:#fff}.btn.ghost{background:#fff;border:1px solid var(--border)}.item{padding:13px 0;border-bottom:1px solid var(--border)}.item:last-child{border:0}.muted{color:var(--muted)}.warning{color:#a05b00}.balance.pos{color:var(--ok)}.balance.neg{color:var(--danger)}dialog{border:0;border-radius:18px;width:min(500px,calc(100% - 24px));padding:0}dialog::backdrop{background:#0c162580}dialog form{display:grid;gap:14px;padding:22px}label{display:grid;gap:6px;font-weight:650}input,select{font:inherit;font-size:16px;width:100%;padding:12px;border:1px solid var(--border);border-radius:11px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.auth-bg{min-height:100vh;display:grid;place-items:center;padding:18px;background:linear-gradient(150deg,#e6f0fb,#f8fafc)}.auth-card{width:min(500px,100%);background:#fff;padding:25px;border-radius:20px;border:1px solid var(--border);box-shadow:0 20px 50px #18314b20}.form-grid{display:grid;gap:14px}.notice{padding:12px;border-radius:10px;margin:12px 0}.notice.error{background:#fff0f0;color:#9f1d1d}.notice.success{background:#edfff2;color:#146c32}hr{border:0;border-top:1px solid var(--border);width:100%}#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#172033;color:white;padding:12px 18px;border-radius:999px;display:none;z-index:10}@media(max-width:700px){.app{padding:10px 10px 92px}.grid2,.actions{grid-template-columns:1fr}.tabs{position:fixed;bottom:0;top:auto;left:0;right:0;justify-content:space-around;padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));border-top:1px solid var(--border)}.tabs button{flex:1;padding:12px 6px}.top small{display:none}.card{border-radius:15px;padding:15px}dialog{width:100%;max-width:none;margin:0;position:fixed;bottom:0;border-radius:20px 20px 0 0}dialog form{padding-bottom:calc(22px + env(safe-area-inset-bottom))}}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}.manage-row{display:grid;grid-template-columns:minmax(130px,1fr) repeat(4,minmax(120px,1fr)) auto auto;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.manage-row:last-child{border-bottom:0}.driver-row{grid-template-columns:1fr auto auto}.check{display:flex;grid-auto-flow:column;justify-content:start;align-items:center;gap:6px}.check input{width:auto}.btn:disabled{opacity:.45;cursor:not-allowed}@media(max-width:900px){.manage-row,.driver-row{grid-template-columns:1fr}.manage-row .btn{width:100%}.header-actions{width:100%}.top{align-items:flex-start;flex-wrap:wrap}}
.settlement-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.settlement-head h2,.period-heading{margin-bottom:4px}.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}.account-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 8px 24px #18314b10}.account-name{font-size:1.15rem;font-weight:800}.account-balance{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:850;margin-top:6px}.account-label{color:var(--muted);font-size:.9rem}.pos{color:var(--ok)}.neg{color:var(--danger)}.account-details{margin:16px 0 12px;display:grid;gap:7px}.account-details div{display:flex;justify-content:space-between;gap:12px}.account-details dt{color:var(--muted)}.account-details dd{margin:0;font-weight:700}.preview-line{border-top:1px solid var(--border);padding-top:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.open-card{border-left:5px solid #d28b18}.preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.preview-grid div{display:grid;gap:4px;background:#f7f9fc;border-radius:12px;padding:12px}.period-card{padding:0;overflow:hidden}.period-card summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:17px;list-style:none}.period-card summary::-webkit-details-marker{display:none}.period-card summary small{display:block;color:var(--muted);font-weight:400;margin-top:4px}.period-card[open] summary{border-bottom:1px solid var(--border)}.period-grid{padding:8px 17px 17px}.period-driver{display:grid;grid-template-columns:minmax(110px,1.3fr) repeat(4,minmax(90px,1fr));gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}.period-driver:last-child{border-bottom:0}.payment-item{display:flex;justify-content:space-between;align-items:center;gap:12px}.btn.compact{padding:8px 11px;font-size:.88rem}.period-heading{margin-top:22px}
@media(max-width:800px){.account-grid{grid-template-columns:1fr}.preview-grid{grid-template-columns:1fr 1fr}.period-driver{grid-template-columns:1fr 1fr}.period-driver strong{grid-column:1/-1}.settlement-head{align-items:stretch;flex-direction:column}.settlement-head .btn{width:100%}}
@media(max-width:420px){.preview-grid{grid-template-columns:1fr}.account-card{padding:15px}.period-card summary{align-items:flex-start;flex-direction:column}.period-driver{grid-template-columns:1fr}.period-driver strong{grid-column:auto}}
.keypad-input{font-size:1.35rem;font-weight:750;background:#fff;cursor:pointer;caret-color:transparent}.number-keypad{position:fixed;z-index:100;left:50%;bottom:0;transform:translateX(-50%);width:min(480px,100%);background:#f7f9fc;border:1px solid var(--border);border-bottom:0;border-radius:22px 22px 0 0;padding:12px max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));box-shadow:0 -16px 45px #17203335}.number-keypad[hidden]{display:none}.keypad-head{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 10px}.keypad-close{border:0;background:transparent;color:var(--p);font:inherit;font-weight:750;padding:8px}.keypad-display{background:#fff;border:1px solid var(--border);border-radius:13px;text-align:right;font-size:2rem;font-weight:800;padding:10px 14px;margin-bottom:10px;min-height:60px;overflow:hidden}.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.keypad-grid button{border:1px solid var(--border);border-radius:13px;background:#fff;font:inherit;font-size:1.45rem;font-weight:750;min-height:54px}.keypad-grid button:active{transform:scale(.97);background:#e8eef5}.keypad-grid .keypad-wide{grid-column:span 1}.keypad-grid .primary-key{background:var(--p);color:#fff}.fuel-summary{font-weight:700}@media(min-width:701px){.number-keypad{bottom:18px;border-radius:22px}}

.brand{display:flex;align-items:center;gap:12px}.brand img{width:72px;height:52px;object-fit:cover;border-radius:14px;border:1px solid var(--border);box-shadow:0 5px 15px #3d0b1a22}.brand h1{margin:.1rem 0}.auth-brand{text-align:center}.auth-brand img{width:150px;height:105px;object-fit:cover;border-radius:18px;border:1px solid var(--border);box-shadow:0 10px 28px #3d0b1a28;margin-bottom:8px}.auth-brand h1{margin:0 0 8px}@media(max-width:520px){.brand img{width:58px;height:44px}.brand h1{font-size:1.45rem}}

/* 2.3.3: Zahlentastatur innerhalb des modalen Dialogs anzeigen */
dialog.keypad-open{overflow:visible}
dialog.keypad-open form{max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:700px){dialog.keypad-open form{padding-bottom:390px}}
@media(min-width:701px){dialog.keypad-open form{padding-bottom:360px}}

/* 2.3.3: Schnelle Mehrfacheingaben ohne iOS-Doppeltipp-Zoom. */
html.keypad-active,html.keypad-active body,html.keypad-active dialog,html.keypad-active .number-keypad{touch-action:manipulation}
.number-keypad,.number-keypad button,.keypad-close{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.number-keypad button{cursor:pointer}