/* =====================================================================
   beyondEBIT Controlling Dashboard — dunkle Oberflaeche
   Seitenleiste, Verlaufskacheln, Glasflaechen. Farben ausschliesslich
   aus der Marke: Orange, Glut, Bernstein, Graphit. Gruen und Rot nur
   dort, wo sie etwas bedeuten.
   Keine style-Attribute im Markup: die Content-Security-Policy in
   _headers laesst sie nicht zu. dashboard.js setzt Dynamisches ueber
   element.style, das ist erlaubt.
   ===================================================================== */

:root{
  --bg:#121110;
  --bg-2:#0d0c0b;
  --card:#1c1a18;
  --card-2:#232120;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.05);
  --ink:#f4f1ea;
  --ink-2:#d6d1c7;
  --soft:#a39d93;
  --orange:#ff4a1c;
  --orange-2:#ff8347;
  --ember:#d2360e;
  --amber:#ffa23d;
  --good:#5fc98a;
  --warn:#f0a35e;
  --bad:#ff6b5e;
  --r:16px;
  --r-s:11px;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --side:16rem;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  font-feature-settings:"tnum";-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.2}
a{color:var(--orange-2)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
[hidden]{display:none !important}
svg{display:block}

/* ---------------- Grundbausteine ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:1px solid transparent;background:var(--orange);color:#fff;
  border-radius:999px;padding:.72rem 1.4rem;cursor:pointer;
  font:inherit;font-size:.9375rem;font-weight:500;
  transition:filter .18s ease,background .18s ease,border-color .18s ease,transform .12s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.btn--sm{padding:.46rem 1rem;font-size:.8125rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}

.field{display:block;margin-bottom:1.1rem}
.field > span{display:block;margin-bottom:.4rem;font-size:.8125rem;font-weight:500;color:var(--soft)}
.field input{
  width:100%;font:inherit;font-size:.9375rem;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:var(--r-s);padding:.8rem .95rem;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.field input::placeholder{color:#6e6860}
.field input:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.07);
                   box-shadow:0 0 0 3px rgba(255,74,28,.18)}

.msg{margin:0 0 1.1rem;padding:.75rem .9rem;border-radius:var(--r-s);
     font-size:.875rem;line-height:1.5;border-left:3px solid}
.msg--err{background:rgba(255,107,94,.1);border-color:var(--bad);color:#ffb3ab}
.msg--ok{background:rgba(95,201,138,.1);border-color:var(--good);color:#9fe0bb}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:.8125rem;
         color:var(--soft);text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--ink)}

.mark{display:inline-flex;align-items:center;gap:.55rem;font-size:1.0625rem;font-weight:600;
      letter-spacing:-.04em;text-decoration:none;color:var(--ink)}
.mark b{color:var(--orange);font-weight:600}
.mark__dot{width:1.45rem;height:1.45rem;border-radius:7px;flex:none;
           background:linear-gradient(135deg,var(--orange),var(--amber))}

/* ---------------- Anmeldung ---------------- */
.auth{min-height:100svh;display:grid;place-items:center;padding:2rem 1rem;
      background:radial-gradient(90rem 50rem at 50% -20%,rgba(255,74,28,.16),transparent 60%)}
.auth__card{
  width:100%;max-width:26.5rem;background:var(--card);
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.75rem,5vw,2.6rem);
  box-shadow:0 30px 70px -40px #000;
  animation:riseIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.auth__card h1{font-size:1.55rem;margin:1.75rem 0 .4rem}
.auth__sub{margin:0 0 1.75rem;color:var(--soft);font-size:.9375rem}
.auth__foot{margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);
            font-size:.8125rem;color:var(--soft);text-align:center}

/* ---------------- Gerüst ---------------- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100svh}
@media(max-width:1000px){.app{grid-template-columns:1fr}}

/* Seitenleiste */
.side{
  position:sticky;top:0;align-self:start;height:100svh;
  display:flex;flex-direction:column;gap:1.5rem;
  padding:1.4rem 1rem;background:var(--bg-2);border-right:1px solid var(--line);
}
.side__lab{margin:0 0 .5rem .85rem;font-size:.6875rem;font-weight:600;
           letter-spacing:.14em;text-transform:uppercase;color:#6e6860}
.nav{display:flex;flex-direction:column;gap:.2rem;flex:1;min-height:0}
.nav a{
  display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;
  border-radius:999px;color:var(--soft);text-decoration:none;font-size:.9375rem;
  transition:background .18s ease,color .18s ease;
}
.nav a svg{width:1.15rem;height:1.15rem;flex:none;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.nav a[aria-current="true"]{background:var(--ink);color:#141312;font-weight:600}
.nav a[aria-current="true"] svg{opacity:1}
.side__foot{display:grid;gap:.6rem;padding-top:1rem;border-top:1px solid var(--line)}
.side__who{display:flex;align-items:center;gap:.6rem;min-width:0;padding:0 .3rem}
.side__av{width:2rem;height:2rem;border-radius:50%;flex:none;display:grid;place-content:center;
          background:linear-gradient(135deg,var(--orange),var(--ember));
          color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.02em}
.side__mail{font-size:.8125rem;color:var(--soft);overflow:hidden;
            text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1000px){
  .side{position:static;height:auto;flex-direction:row;align-items:center;gap:.75rem;
        border-right:0;border-bottom:1px solid var(--line);padding:.7rem .9rem;overflow-x:auto}
  .side__lab,.side__foot{display:none}
  .nav{flex-direction:row;gap:.3rem;flex:0 0 auto}
  .nav a{padding:.5rem .8rem;font-size:.8125rem;white-space:nowrap}
}

/* Inhalt */
.main{min-width:0;padding:clamp(1rem,2.2vw,1.6rem) clamp(1rem,2.2vw,1.8rem) 3rem}
.bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:clamp(1rem,2.2vw,1.6rem)}
.bar__t{min-width:0;flex:1 1 16rem}
.eyebrow{margin:0 0 .3rem;font-size:.6875rem;font-weight:600;letter-spacing:.14em;
         text-transform:uppercase;color:#6e6860}
.bar h1{font-size:clamp(1.4rem,2.8vw,1.9rem)}
.bar__meta{margin:.35rem 0 0;color:var(--soft);font-size:.8125rem}
.flag{display:inline-flex;align-items:center;margin-left:.55rem;vertical-align:middle;
      background:rgba(255,74,28,.16);border:1px solid rgba(255,74,28,.4);color:var(--orange-2);
      border-radius:999px;padding:.12rem .55rem;font-size:.625rem;font-weight:600;
      letter-spacing:.1em;text-transform:uppercase}

.seg{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--line);
     border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;color:var(--soft);cursor:pointer;font:inherit;
            font-size:.8125rem;font-weight:500;padding:.4rem .85rem;border-radius:999px;
            white-space:nowrap;transition:background .18s ease,color .18s ease}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#141312}
select.pick{
  font:inherit;font-size:.8125rem;font-weight:500;color:var(--ink);
  background-color:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:999px;padding:.45rem 2rem .45rem .95rem;cursor:pointer;
  max-width:14rem;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23a39d93' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right .85rem center;
}
select.pick option{color:#141312;background:#fff}

/* ---------------- Kennzahlen-Kacheln ---------------- */
.kpis{display:grid;grid-template-columns:1fr;gap:clamp(.6rem,1.1vw,.9rem);
      margin-bottom:clamp(.6rem,1.1vw,.9rem)}
@media(min-width:620px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.kpis{grid-template-columns:repeat(3,1fr)}}
.kpi{
  position:relative;isolation:isolate;overflow:hidden;
  text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.05rem 1.15rem 1rem;background:var(--card);
  transition:transform .14s ease,box-shadow .2s ease,border-color .2s ease;
  animation:riseIn .5s cubic-bezier(.22,.61,.36,1) both;
}
.kpi::before{content:"";position:absolute;inset:0;z-index:-1;opacity:1}
.kpi--orange::before{background:linear-gradient(145deg,#ff6a37,#ff4a1c 42%,#d2360e)}
.kpi--ember::before{background:linear-gradient(145deg,#e4481c,#c43200 45%,#8d2404)}
.kpi--amber::before{background:linear-gradient(145deg,#ffb259,#ff8f34 45%,#e3690f)}
.kpi--slate::before{background:linear-gradient(145deg,#38342f,#26231f 55%,#1a1816)}
.kpi--orange,.kpi--ember,.kpi--amber{border-color:rgba(255,255,255,.14);color:#fff}
.kpi--slate{border-color:rgba(255,255,255,.1)}
.kpi:hover{transform:translateY(-2px);box-shadow:0 18px 36px -24px #000}
.kpi[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink),0 18px 36px -22px #000}
.kpi__lab{margin:0 0 .55rem;font-size:.6875rem;font-weight:600;letter-spacing:.12em;
          text-transform:uppercase;opacity:.82}
.kpi__row{display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem}
.kpi__val{font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:600;letter-spacing:-.05em;line-height:1.02}
.kpi__spark{width:5rem;height:1.8rem;flex:none;opacity:.95}
.kpi__sub{margin:.55rem 0 0;font-size:.78rem;opacity:.86;display:flex;
          align-items:center;gap:.3rem;flex-wrap:wrap}
.delta{font-weight:600;white-space:nowrap}
.kpi--slate .delta--up{color:var(--good)}
.kpi--slate .delta--down{color:var(--bad)}
.kpi--slate .delta--flat{color:var(--soft)}
.kpi--orange .delta,.kpi--ember .delta,.kpi--amber .delta{color:#fff}

/* ---------------- Karten ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:clamp(1rem,2vw,1.4rem);min-width:0;
      animation:riseIn .5s cubic-bezier(.22,.61,.36,1) both}
.card__hd{display:flex;align-items:baseline;gap:.6rem 1rem;flex-wrap:wrap;margin-bottom:1rem}
.card__hd h2{font-size:1.0625rem}
.card__note{margin-left:auto;font-size:.75rem;color:var(--soft)}
.grid{display:grid;align-items:start;gap:clamp(.6rem,1.1vw,.9rem);margin-bottom:clamp(.6rem,1.1vw,.9rem)}
.grid--2{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.grid--3{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
@media(max-width:1000px){.grid--2,.grid--3{grid-template-columns:1fr}}

/* Diagramme */
.chartwrap{position:relative}
.chart{width:100%;height:auto;touch-action:pan-y}
.chart text{font-family:var(--sans);fill:var(--soft)}
.chart .grid-l{stroke:rgba(255,255,255,.07);stroke-width:1}
.chart .zero{stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:3 4}
.chart .area{opacity:0;animation:fadeIn .7s .25s ease both}
.chart .line{stroke-linecap:round;stroke-linejoin:round;fill:none}
.js .chart .line--draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
                       animation:draw 1.05s cubic-bezier(.3,.8,.35,1) forwards}
.chart .dot{opacity:0;animation:fadeIn .4s .75s ease both}
.chart .bar{transform-box:fill-box;transform-origin:bottom;
            animation:growY .65s cubic-bezier(.2,.8,.3,1) both}
.chart .ring{transform-box:fill-box;transform-origin:center;
             animation:spin .9s cubic-bezier(.3,.8,.35,1) both}

.tip{position:absolute;pointer-events:none;z-index:5;opacity:0;left:-999px;
     background:var(--orange);color:#fff;border-radius:var(--r-s);
     padding:.45rem .7rem;font-size:.8125rem;line-height:1.35;white-space:nowrap;
     box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
     transform:translate(-50%,-135%);transition:opacity .14s ease}
.tip[data-on="true"]{opacity:1}
.tip b{display:block;font-weight:600}
.tip i{display:block;font-style:normal;opacity:.82;font-size:.92em}

/* Ringdiagramm */
.ringwrap{display:grid;place-items:center;gap:1rem}
.ringwrap svg{max-width:14rem;width:100%}
.legend{display:grid;gap:.55rem;width:100%}
.legend div{display:flex;align-items:center;gap:.6rem;font-size:.8125rem}
.legend i{width:.7rem;height:.7rem;border-radius:3px;flex:none}
.legend span{color:var(--soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend b{margin-left:auto;font-variant-numeric:tabular-nums}

/* Befunde */
.finds{display:grid;gap:.55rem}
.find{display:flex;gap:.65rem;align-items:flex-start;border-radius:var(--r-s);
      padding:.7rem .85rem;font-size:.875rem;line-height:1.5;
      background:rgba(255,255,255,.04);border:1px solid var(--line);
      animation:slideIn .45s cubic-bezier(.22,.61,.36,1) both}
.find b{font-weight:600;display:block}
.find span{display:block;color:var(--soft);font-size:.94em;margin-top:.12rem}
.find__ico{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;
           place-content:center;margin-top:.05rem}
.find__ico svg{width:.95rem;height:.95rem}
.find--bad  .find__ico{background:rgba(255,107,94,.16)}
.find--bad  b{color:var(--bad)}
.find--warn .find__ico{background:rgba(240,163,94,.16)}
.find--warn b{color:var(--warn)}
.find--good .find__ico{background:rgba(95,201,138,.16)}
.find--good b{color:var(--good)}

/* Tabelle */
.scroll{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.8125rem;min-width:44rem}
table.tbl th,table.tbl td{text-align:right;padding:.62rem .5rem;
  border-bottom:1px solid var(--line-2);white-space:nowrap}
table.tbl th:first-child,table.tbl td:first-child{text-align:left}
table.tbl thead th{position:sticky;top:0;background:var(--card);z-index:1;
  font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#6e6860;border-bottom:1px solid var(--line)}
table.tbl tbody tr{transition:background .12s ease}
table.tbl tbody tr:hover{background:rgba(255,255,255,.035)}
table.tbl tbody tr:last-child td{border-bottom:0}
.tag{display:inline-block;border-radius:999px;padding:.16rem .6rem;font-size:.6875rem;
     font-weight:600;letter-spacing:.05em}
.tag--draft{background:rgba(240,163,94,.16);color:var(--warn)}
.tag--live{background:rgba(95,201,138,.16);color:var(--good)}

/* Zustaende */
.state{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
       padding:clamp(2rem,6vw,3.5rem);text-align:center;color:var(--soft)}
.state h2{font-size:1.125rem;color:var(--ink);margin-bottom:.5rem}
.state p{margin:0 auto;max-width:46ch;font-size:.9375rem}
.skel{display:grid;gap:.9rem}
.skel i{display:block;height:5.5rem;border-radius:var(--r);
  background:linear-gradient(90deg,#1b1917,#252220,#1b1917);
  background-size:200% 100%;animation:shimmer 1.3s linear infinite}

footer.foot{margin-top:clamp(1.5rem,3vw,2.5rem);padding-top:1.25rem;
  border-top:1px solid var(--line);color:#6e6860;font-size:.8125rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center}
footer.foot a{color:#6e6860}
.foot__r{margin-left:auto}

/* ---------------- Bewegung ---------------- */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes spin{from{opacity:0;transform:rotate(-80deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:-200% 0}}
.stagger-1{animation-delay:.04s}.stagger-2{animation-delay:.08s}
.stagger-3{animation-delay:.12s}.stagger-4{animation-delay:.16s}
.stagger-5{animation-delay:.2s}.stagger-6{animation-delay:.24s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .chart .area,.chart .dot,.chart .ring{opacity:1}
}