@charset "UTF-8";
/*
 * Neues Design für alle Seiten über customer_page_start(): Konto, Unternehmen
 * einrichten, Bewertungen, Updates, Testzugang, Website & Betrieb usw.
 * Wird nach customer.css/public-clean.css geladen; Markup bleibt unverändert.
 */
@font-face{font-family:"Inter Clean";src:url("/projects/noir-inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
body.cx{
  --cx-bg:#121315;--cx-surface:#1a1b1e;--cx-surface-2:#222327;--cx-surface-3:#2a2b30;
  --cx-line:rgba(255,255,255,.075);--cx-line-strong:rgba(255,255,255,.12);
  --cx-text:#eeece7;--cx-muted:#a0a2a9;--cx-faint:#70727a;
  --cx-accent:#82acf0;--cx-accent-ink:#0e1828;--cx-accent-soft:rgba(130,172,240,.14);
  --cx-ok:#67c991;--cx-warn:#e6b965;--cx-bad:#ee8a7f;--cx-ease:cubic-bezier(.2,.7,.2,1);
  background:var(--cx-bg)!important;background-image:none!important;color:var(--cx-text);
  font:400 15.5px/1.6 "Inter Clean",Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;font-feature-settings:"cv11" 1;-webkit-font-smoothing:antialiased
}
body.cx a{color:var(--cx-accent)}
body.cx :focus-visible{outline:2px solid var(--cx-accent);outline-offset:2px}
body.cx .customer-shell{width:min(1120px,calc(100% - 48px))!important}
body.cx .customer-top{min-height:68px!important;padding:0!important;border-bottom:1px solid var(--cx-line)!important;flex-direction:row!important;align-items:center!important}
body.cx .customer-brand{color:var(--cx-text)!important;text-decoration:none!important;gap:10px!important;font-size:16px!important;font-weight:650!important;letter-spacing:-.01em}
body.cx .customer-brand img{width:28px!important;height:28px!important}
body.cx .customer-brand span{margin-left:-10px!important;color:var(--cx-accent)!important}
body.cx .customer-top nav{gap:4px!important}
body.cx .customer-top nav a{padding:7px 12px;border-radius:9px;color:var(--cx-muted)!important;font-size:14px!important;text-decoration:none!important;transition:background 160ms,color 160ms}
body.cx .customer-top nav a:hover{background:var(--cx-surface);color:var(--cx-text)!important}
body.cx main{padding:44px 0 80px!important}
body.cx main>h1{margin:0 0 10px!important;font-size:clamp(28px,3.4vw,38px)!important;line-height:1.1!important;font-weight:730!important;letter-spacing:-.03em!important}
body.cx main>p{max-width:62ch;color:var(--cx-muted)!important}
body.cx main>p:first-of-type>a:only-child{display:inline-flex;align-items:center;gap:6px;color:var(--cx-muted)!important;font-size:14px;text-decoration:none}
body.cx main>p:first-of-type>a:only-child:hover{color:var(--cx-text)!important}
body.cx h2{font-size:18px!important;font-weight:650!important;letter-spacing:-.01em!important}
body.cx h3{font-size:16px!important;font-weight:620!important}
body.cx p{color:var(--cx-muted)}
body.cx .small,body.cx .meta{color:var(--cx-faint)!important;font-size:13px!important}

/* Schritte als Pillen wie bei der Registrierung */
body.cx .steps{display:flex!important;flex-wrap:wrap;gap:6px!important;margin:18px 0 28px!important;padding:0!important;counter-reset:cx-step;list-style:none}
body.cx .steps li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px!important;border:0!important;border-radius:16px!important;background:var(--cx-surface)!important;color:var(--cx-faint)!important;font-size:13.5px!important;font-weight:550;counter-increment:cx-step}
body.cx .steps li::before{content:counter(cx-step);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cx-surface-3);color:var(--cx-muted);font-size:12px;font-weight:650}
body.cx .steps li.current{background:var(--cx-accent-soft)!important;color:var(--cx-accent)!important}
body.cx .steps li.current::before{background:var(--cx-accent);color:var(--cx-accent-ink)}
body.cx .steps li.done{color:var(--cx-muted)!important}
body.cx .steps li.done::before{content:"✓";background:rgba(103,201,145,.16);color:var(--cx-ok)}

/* Karten und Listen */
body.cx .grid{gap:16px!important}
body.cx .card{padding:24px 26px!important;border:0!important;border-radius:16px!important;background:var(--cx-surface)!important;box-shadow:none!important}
body.cx .card+.card,body.cx .section,body.cx .grid+*{margin-top:16px!important}
body.cx .grid>.card{margin-top:0!important}
body.cx .list{gap:8px!important}
body.cx .list article{padding:14px 16px!important;border:0!important;border-radius:12px!important;background:var(--cx-bg)!important}
body.cx .empty{padding:18px 20px!important;border:1px dashed var(--cx-line-strong)!important;border-radius:12px!important;color:var(--cx-muted)!important}
body.cx .status{padding:2px 10px!important;border:0!important;border-radius:12px!important;background:var(--cx-surface-3)!important;color:var(--cx-muted)!important;font-size:12.5px!important;font-weight:600}
body.cx .status.active{background:rgba(103,201,145,.12)!important;color:var(--cx-ok)!important}
body.cx .code{padding:2px 8px;border-radius:6px;background:var(--cx-surface-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
body.cx details{margin-top:16px!important;padding:12px 16px;border-radius:12px;background:var(--cx-bg)}
body.cx summary{color:var(--cx-text)!important;font-weight:600;font-size:14.5px}
body.cx details[open] summary{margin-bottom:6px}
body.cx .notice{padding:12px 14px!important;border:0!important;border-radius:11px!important;background:rgba(103,201,145,.1)!important;color:#a6e2c0!important}
body.cx .notice.error{background:rgba(238,138,127,.1)!important;color:#f4b0a8!important}
body.cx .fact{border:0!important;border-radius:14px!important;background:var(--cx-surface)!important}
body.cx .fact strong{color:var(--cx-text)!important;font-weight:720;letter-spacing:-.02em}

/* Formulare und Knöpfe */
body.cx label{color:var(--cx-muted)!important;font-size:14px!important;font-weight:500}
body.cx :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){min-height:46px;padding:11px 14px!important;border:1px solid var(--cx-line-strong)!important;border-radius:11px!important;background:var(--cx-bg)!important;color:var(--cx-text)!important;font:inherit!important;font-size:15.5px!important;outline:none!important;transition:border-color 160ms,box-shadow 160ms}
body.cx :is(input,select,textarea):focus{border-color:var(--cx-accent)!important;box-shadow:0 0 0 4px var(--cx-accent-soft)!important}
body.cx :is(button,.button){min-height:42px;padding:0 18px!important;border:0!important;border-radius:10px!important;background:var(--cx-accent)!important;color:var(--cx-accent-ink)!important;font:650 14.5px "Inter Clean",Inter,system-ui,sans-serif!important;text-decoration:none!important;cursor:pointer;transition:background 160ms,transform 160ms}
body.cx :is(button,.button):hover{background:#97bbf4!important}
body.cx :is(button,.button):active{transform:translateY(1px)}
body.cx :is(button,.button).secondary{border:1px solid var(--cx-line-strong)!important;background:transparent!important;color:var(--cx-text)!important}
body.cx :is(button,.button).secondary:hover{background:var(--cx-surface-2)!important}
body.cx :is(button,.button).danger{border:1px solid rgba(238,138,127,.3)!important;background:transparent!important;color:var(--cx-bad)!important}
body.cx .check input{accent-color:var(--cx-accent)}

body.cx footer{gap:6px 18px!important;border-top:1px solid var(--cx-line)!important;color:var(--cx-faint);font-size:13px!important}
body.cx footer a{color:var(--cx-faint)!important;text-decoration:none}
body.cx footer a:hover{color:var(--cx-text)!important}

/* Einblenden */
@media (prefers-reduced-motion:no-preference){
  body.cx main>*{animation:cx-rise 600ms var(--cx-ease) both}
  body.cx main>:nth-child(2){animation-delay:50ms}body.cx main>:nth-child(3){animation-delay:100ms}body.cx main>:nth-child(4){animation-delay:150ms}body.cx main>:nth-child(n+5){animation-delay:200ms}
  body.cx main .grid{animation:none}
  body.cx main .grid>*{animation:cx-rise 600ms var(--cx-ease) both;animation-delay:160ms}
  body.cx main .grid>:nth-child(2){animation-delay:230ms}
  body.cx .steps li{animation:cx-rise 500ms var(--cx-ease) both}
  body.cx .steps li:nth-child(2){animation-delay:70ms}body.cx .steps li:nth-child(3){animation-delay:140ms}
  body.cx .steps li.current::before{animation:cx-pulse 2.4s 800ms ease-in-out infinite}
}
@keyframes cx-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(130,172,240,.4)}50%{box-shadow:0 0 0 6px rgba(130,172,240,0)}}

@media (max-width:760px){
  body.cx .customer-shell{width:calc(100% - 32px)!important}
  body.cx .customer-top{flex-direction:column!important;align-items:flex-start!important;gap:6px!important;padding:14px 0 10px!important}
  body.cx .customer-top nav{margin-left:-12px}
  body.cx main{padding-top:28px!important}
  body.cx .card{padding:18px!important}
  body.cx :is(button,.button){min-height:44px}
}