/* ════════════════════════════════════════════════════════════════
   Nordbridge · Kunden-Dashboard – styles.css
   ------------------------------------------------------------------
   1. Schriften (self-hosted, DSGVO-konform)
   2. Design-Tokens
   3. Reset & Basis
   4. Bausteine (Eyebrow, Brand, Buttons, Skeleton)
   5. Login
   6. Dashboard-Layout (Header, Switch, Footer)
   7. Inhalt (Hero, Kennzahlen, Berechnungsgrundlage, Karten)
   8. Zustände (leer, Fehler)
   9. Motion & Media Queries
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Schriften ────────────────────────────────────────────────
   Inter (UI/Text) + JetBrains Mono (Ziffern & Labels).
   Beide liegen lokal unter /fonts – kein Google-Fonts-Request. */
@font-face{
  font-family:'Inter';
  src:url('fonts/InterVariable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ── 2. Design-Tokens ──────────────────────────────────────────── */
:root{
  /* Farben */
  --bg:        #0B0B0D;
  --panel:     #131318;
  --field:     #0E0E12;
  --border:    #26262C;
  --border-2:  #33333B;   /* Hover */
  --track:     #222228;
  --text:      #F5F5F7;
  --text-2:    #A6A6B2;
  --muted:     #8B8B97;
  --accent:    #4C82FB;   /* wird von app.js aus CONFIG gesetzt */
  --on-accent: #0A0F1E;
  --danger:    #F0716A;

  /* Abgeleitete Töne (folgen automatisch dem Akzent) */
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 9%,  transparent);
  --accent-tint: color-mix(in srgb, var(--accent) 4%,  var(--panel));
  --accent-high: color-mix(in srgb, var(--accent) 55%, white);

  /* Typografie */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Radien */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
}

/* ── 3. Reset & Basis ──────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:.9375rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
/* dezenter Akzent-Schein am oberen Rand – einziges Ambiente-Element */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  background:radial-gradient(640px 300px at 50% -120px, var(--accent-glow), transparent 70%);
}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
input{font:inherit}
a{color:var(--muted);text-decoration:none}
a:hover{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
::selection{background:color-mix(in srgb, var(--accent) 35%, transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.hidden{display:none!important}
.noscript{padding:24px;text-align:center;color:var(--text-2)}

/* ── 4. Bausteine ──────────────────────────────────────────────── */
.eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.brand{display:flex;align-items:center;gap:11px}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-glow);
}
.brand-name,h1.brand .brand-name{
  font-size:1.1875rem;font-weight:700;letter-spacing:-.02em;color:var(--text);
}

.btn{
  width:100%;
  background:var(--accent);
  color:var(--on-accent);
  border:0;border-radius:var(--r-s);
  padding:13px;
  font-size:.9375rem;font-weight:650;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.6;cursor:default}
.btn-secondary{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--r-s);
  padding:10px 18px;
  font-size:.875rem;font-weight:500;
  transition:border-color .15s;
}
.btn-secondary:hover{border-color:var(--border-2)}

/* Skeleton (Ladezustand) */
.sk{
  display:block;position:relative;overflow:hidden;
  background:#1A1A20;border-radius:6px;
}
.sk::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  animation:shimmer 1.3s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.sk-eyebrow{width:210px;max-width:60%;height:11px;margin-bottom:18px}
.sk-big{width:240px;max-width:75%;height:56px}
.sk-label{width:120px;max-width:70%;height:11px;margin-bottom:14px}
.sk-value{width:90px;height:22px}
.sk-line{width:100%;height:6px;margin-top:20px}

/* ── 5. Login ──────────────────────────────────────────────────── */
.login{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-card{
  width:min(100%,400px);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-l);
  padding:36px 32px;
}
.login-card .brand{margin-bottom:30px}
.login-card .eyebrow{margin-bottom:8px}
.login-card h1{font-size:1.375rem;font-weight:650;letter-spacing:-.02em;margin-bottom:22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8125rem;color:var(--text-2);margin-bottom:6px}
.field input{
  width:100%;
  background:var(--field);
  border:1px solid var(--border);
  border-radius:var(--r-s);
  padding:12px 14px;
  color:var(--text);
  font-size:.9375rem;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.login-card .btn{margin-top:8px}
.err{color:var(--danger);font-size:.8125rem;margin-top:14px;min-height:1.25rem}

/* ── 6. Dashboard-Layout ───────────────────────────────────────── */
.wrap{
  min-height:100dvh;
  max-width:1040px;
  margin-inline:auto;
  padding:56px clamp(20px,4vw,40px) calc(32px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;
  position:relative;
}
header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px 16px;
  padding-bottom:24px;margin-bottom:32px;
  border-bottom:1px solid var(--border);
}
.header-right{display:flex;align-items:center;gap:16px}
.tag{color:var(--muted);font-size:.8125rem}
.logout{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  border-radius:8px;
  padding:7px 14px;
  font-size:.8125rem;
  transition:color .15s,border-color .15s;
}
.logout:hover{color:var(--text);border-color:var(--border-2)}

.switch{
  display:inline-flex;align-self:flex-start;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:4px;gap:2px;
  margin-bottom:44px;
}
.switch button{
  border:0;background:transparent;
  color:var(--text-2);
  font-size:.875rem;font-weight:500;
  padding:9px 16px;border-radius:9px;
  white-space:nowrap;
  transition:color .15s, background .15s;
}
.switch button:hover{color:var(--text)}
.switch button[aria-pressed="true"]{
  background:var(--accent);
  color:var(--on-accent);
  font-weight:650;
}

footer{
  margin-top:auto;padding-top:56px;
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:8px 24px;
  color:var(--muted);font-size:.75rem;
}
.foot-left{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.foot-left span::after,.foot-left a:not(:last-child)::after{content:'·';margin-left:10px;color:var(--border-2)}
.stamp{font-family:var(--font-mono);font-size:.71875rem;letter-spacing:.02em}

/* ── 7. Inhalt ─────────────────────────────────────────────────── */
.hero{margin-bottom:36px}
.hero .eyebrow{margin-bottom:14px}
.big{display:inline-flex;align-items:baseline;line-height:.95}
.big-num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(2.6rem,8.5vw,4.9rem);
  letter-spacing:-.015em;
  color:var(--text);
}
.big .unit{
  font-family:var(--font-mono);
  font-size:clamp(1.1rem,3.5vw,2rem);
  font-weight:600;
  color:var(--accent);
  margin-left:.28em;
}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;
  margin-bottom:14px;
}
.stat{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:18px 20px;
}
.stat-label{display:block;color:var(--muted);font-size:.78125rem;margin-bottom:9px}
.stat-value{
  display:block;
  font-family:var(--font-mono);
  font-size:1.4375rem;font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.stat-value.accent{color:var(--accent-high)}

/* Berechnungsgrundlage – bewusst sichtbar, keine versteckte Fußnote */
.calc{
  background:var(--accent-tint);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:15px 20px;
  margin-bottom:48px;
}
.calc .eyebrow{margin-bottom:7px}
.calc p{font-size:.8125rem;color:var(--text-2);line-height:1.6}
.calc strong{color:var(--text);font-weight:600}

.section-eyebrow{margin-bottom:16px;font-weight:500}
h2.section-eyebrow{font-size:.6875rem}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-l);
  padding:22px 24px;
  transition:border-color .15s;
}
.card .name{font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:14px}
.card .value{
  font-family:var(--font-mono);
  font-size:1.6875rem;font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.card .meta{color:var(--muted);font-size:.8125rem;margin-top:7px}
.card .bar{
  height:5px;border-radius:99px;overflow:hidden;
  background:var(--track);
  margin-top:18px;
}
.card .fill{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-high));
}
.card .sub{color:var(--muted);font-size:.75rem;margin-top:8px}
@media (hover:hover){.card:hover{border-color:var(--border-2)}}

/* ── 8. Zustände ───────────────────────────────────────────────── */
.empty{
  grid-column:1/-1;
  border:1px dashed var(--border);
  border-radius:var(--r-l);
  padding:56px 24px;
  text-align:center;
}
.empty p{color:var(--text-2);font-size:.9375rem}
.empty .empty-sub{color:var(--muted);font-size:.8125rem;margin-top:6px}

.error-box{
  border:1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  background:color-mix(in srgb, var(--danger) 6%, var(--panel));
  border-radius:var(--r-l);
  padding:28px;
  max-width:480px;
}
.error-title{font-size:.9375rem;font-weight:600}
.error-sub{color:var(--text-2);font-size:.8125rem;margin:6px 0 18px}

/* ── 9. Motion & Media Queries ─────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
#content.enter > *{animation:fadeUp .5s cubic-bezier(.2,.7,.3,1) both}
#content.enter > *:nth-child(2){animation-delay:.06s}
#content.enter > *:nth-child(3){animation-delay:.12s}
#content.enter > *:nth-child(4){animation-delay:.18s}

@media (max-width:640px){
  .wrap{padding-top:36px}
  .switch{width:100%;align-self:stretch}
  .switch button{flex:1;padding:10px 4px}
  .hero{margin-bottom:30px}
  .calc{margin-bottom:40px}
  .card{padding:20px}
  footer{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}