:root { font: 16px/1.55 "Segoe UI", system-ui, sans-serif; color: #edf7fc; background: #041523; color-scheme: dark; --mint:#1de1cd; --ink:#072538; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(ellipse at 84% 4%,#11697b55,transparent 44%),radial-gradient(ellipse at 3% 85%,#0b8c8b26,transparent 46%),linear-gradient(140deg,#071a2b,#03121e); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.17; background-image:linear-gradient(#5ca7b012 1px,transparent 1px),linear-gradient(90deg,#5ca7b012 1px,transparent 1px); background-size:56px 56px; }
.brand { position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.4rem clamp(1rem,5vw,5rem); border-bottom:1px solid #82c5cf20; background:#041725b3; }
.brand-logo { display:block; flex:none; padding:.45rem .75rem; border-radius:.7rem; background:#f7fcff; border:1px solid #bed9e3; line-height:0; }
.brand-logo img { display:block; width:160px; max-width:100%; height:auto; }
.portal-badge { font-size:.8rem; letter-spacing:.04em; padding:.4rem .85rem; border:1px solid #5fa5b259; border-radius:2rem; color:#b8e8e7; }
main { position:relative; width:min(calc(100% - 2rem),31rem); margin:clamp(1.8rem,7vh,5rem) auto; padding:clamp(1.4rem,4vw,2.8rem); background:linear-gradient(145deg,#12364ad9,#082234ed); border:1px solid #70c6d34d; border-radius:1.25rem; box-shadow:0 24px 70px #0005,0 0 28px #05c9b514,inset 0 1px 0 #b6edff17; }
.page-heading { margin-bottom:1.8rem; }
.eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.18em; color:var(--mint); margin:0 0 .7rem; }
h1 { margin:0; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.12; letter-spacing:-.035em; }
.intro { margin:.7rem 0 0; color:#a9c8d6; font-size:.95rem; }
h2 { font-size:1.16rem; line-height:1.3; margin:0 0 1.2rem; letter-spacing:-.02em; }
p { overflow-wrap:anywhere; }
a { color:#4ef2dc; text-underline-offset:.2em; }
form { display:grid; gap:.55rem; }
label { font-size:.85rem; font-weight:650; }
input,select,button { font:inherit; border-radius:.6rem; padding:.75rem .85rem; min-height:46px; }
input,select { color:#123247; background:#f2f9fc; border:1px solid #b8d1dc; min-width:0; width:100%; margin-bottom:.45rem; color-scheme:light; }
input:focus,select:focus { border-color:#14d4be; box-shadow:0 0 0 3px #14d4be23; }
button { border:1px solid #21e3cf; background:linear-gradient(120deg,#25e3ca,#0ec2be); color:#032d35; font-weight:750; cursor:pointer; box-shadow:0 4px 14px #08cdbf1a; }
button:hover { background:#5af4de; }
:focus-visible { outline:3px solid #58e8f5; outline-offset:4px; }
.error { background:#ffe8ed; border:1px solid #ffb4c2; color:#86142a; padding:.85rem; border-radius:.55rem; font-size:.9rem; }
.notice { background:#dafbf2; border:1px solid #86d8be; color:#145a46; padding:.9rem; border-radius:.55rem; font-size:.9rem; }
small { font-size:.78rem; color:#b9ced7; }
.dashboard { width:min(calc(100% - 2rem),76rem); margin-top:2rem; display:grid; grid-template-columns:minmax(17rem,.85fr) minmax(0,1.65fr); gap:1.4rem; }
.dashboard > .page-heading,.dashboard > .error,.dashboard > .notice,.dashboard > .account,.dashboard > nav { grid-column:1/-1; }
.dashboard .page-heading { margin-bottom:0; }
.account { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem; padding:1rem 1.2rem; border:1px solid #5f9ca446; border-radius:.85rem; background:#03192785; }
.account p { margin:0; font-size:.95rem; }
.account button { min-height:38px; padding:.45rem .85rem; background:transparent; color:#bceae9; border-color:#517b87; font-size:.8rem; box-shadow:none; }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; color:transparent; font-size:0; }
nav a { font-size:.83rem; font-weight:650; text-decoration:none; padding:.5rem 1.05rem; border:1px solid #458d9859; border-radius:2rem; color:#c7e6ea; background:#09293e; }
.portal-drivecheck nav a[href="https://drivecheck.avl-group.de/"],.portal-fahrlehrer nav a[href="https://fahrlehrer.avl-group.de/"],.portal-verwaltung nav a[href="https://verwaltung.avl-group.de/"] { color:#033640; background:var(--mint); border-color:var(--mint); }
section { padding:1.5rem; background:linear-gradient(135deg,#f7fcff,#e5f1f7); border:1px solid #bed9e3; border-radius:.9rem; color:var(--ink); box-shadow:0 5px 20px #0002; align-self:start; }
.portal-drivecheck section,.portal-fahrlehrer section { grid-column:1/-1; }
section h2 { color:#123e50; }
section button { background:#087a78; color:#f4ffff; border-color:#087a78; box-shadow:none; }
section button:hover { background:#05625f; }
section button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
section input,section select { background:#fff; }
section a { color:#086b6a; }
.customers { list-style:none; margin:0; padding:0; }
.customers li { padding:1.15rem 0; border-top:1px solid #bfd4de; }
.customers li:first-child { border-top:0; padding-top:0; }
.customers li:last-child { padding-bottom:0; }
.customers strong { font-size:1rem; }
.customers li > div { color:#50717f; font-size:.87rem; overflow-wrap:anywhere; }
.customers li p { color:#436675; font-size:.82rem; }
.customers form + form { margin-top:.85rem; }
.customers button { font-size:.82rem; min-height:38px; padding:.5rem .7rem; }
.customers button[value="deactivate"] { background:transparent; border-color:#afbdc7; color:#6b4650; }
@media (min-width:900px) { .customers li form:has(select) { grid-template-columns:1fr auto; align-items:end; } .customers li form label { grid-column:1/-1; } .customers li form select { margin:0; } }
@media (max-width:700px) { .brand { padding:1rem 1.2rem; } .brand-logo { padding:.4rem .6rem; } .brand-logo img { width:128px; } .portal-badge { font-size:.68rem; padding:.35rem .65rem; } .dashboard { grid-template-columns:1fr; padding:1.2rem; margin-top:1rem; gap:1rem; } .dashboard > * { grid-column:1; } section { padding:1.15rem; } .intro { font-size:.86rem; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }
.dashboard > .full-width { grid-column:1/-1; }
.admin-nav { border-top:1px solid #5f9ca446; padding-top:1rem; }
.admin-nav a[aria-current="page"] { color:#073b43; background:#b5f5eb; border-color:#b5f5eb; }
section small { color:#50717f; }
.section-intro { color:#50717f; font-size:.88rem; }
.customers button[value$="-disable"] { background:transparent; border-color:#afbdc7; color:#6b4650; }
.preview-form { grid-template-columns:1fr 1fr auto; align-items:end; }
.preview-form label { display:block; margin-bottom:.4rem; }
.preview-form input { margin:0; }
.price-preview { display:flex; flex-wrap:wrap; gap:1.5rem; margin:1.5rem 0 0; padding-top:1rem; border-top:1px solid #bfd4de; }
.price-preview dt { font-size:.85rem; color:#50717f; }
.price-preview dd { margin:0; font-size:1.3rem; font-weight:750; }
@media (max-width:700px) { .preview-form { grid-template-columns:1fr; } }
.password-panel form { max-width:32rem; }
fieldset { border:1px solid #b8d1dc; border-radius:.6rem; margin:.4rem 0; padding:.7rem; min-width:0; }
legend { font-size:.85rem; font-weight:700; }
.check-option { display:flex; align-items:center; gap:.6rem; padding:.45rem 0; }
.check-option input { width:1.2rem; height:1.2rem; min-height:0; margin:0; flex:none; accent-color:#087a78; }
summary { cursor:pointer; font-weight:650; color:#086b6a; padding:.6rem 0; }
.customers h3 { margin:0; font-size:1rem; }