/* =========================================================================
   Lyvor Cockpit v1 — cockpit.css
   Eigenständige Stylesheet auf dem Fundament von demo/demo.css.
   Tokens (Bühne/Paper/Status) aus demo/demo.css abgeleitet — demo/* bleibt
   unangetastet. Dunkle Marken-Bühne + helles „Paper"-Fenster (Mail-Ästhetik).
   ========================================================================= */

:root{
  /* Bühne — identisch zur Live-Site/Demo */
  --ink:#05060b; --ink2:#0a0c14; --glass:rgba(18,22,34,.62);
  --line:rgba(226,234,255,.1); --hair:rgba(226,234,255,.05);
  --txt:#f1f3f9; --dim:#a6acbe; --lab:#9298ab;
  --blue:#5fa8ff; --cyan:#9fe0ff; --core:#eaf4ff; --done:#3bd694;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Paper-Fenster */
  --paper:#f7f8fb; --paper-2:#eceff5; --paper-3:#e2e6ef;
  --paper-ink:#1a1d26; --paper-dim:#5a6072; --paper-lab:#676d80;
  --paper-line:rgba(20,24,40,.10); --paper-hair:rgba(20,24,40,.05);

  /* Status-Akzente (auf hellem Papier ≥4.5:1) — aus demo übernommen */
  --st-entwurf:#255cbb;  --st-entwurf-bg:rgba(95,168,255,.14);  --st-entwurf-bd:rgba(95,168,255,.34);
  --st-dringend:#a82a3e; --st-dringend-bg:rgba(224,64,86,.12);  --st-dringend-bd:rgba(224,64,86,.34);
  --st-still:#177049;    --st-still-bg:rgba(59,214,148,.14);    --st-still-bd:rgba(59,214,148,.32);
  --st-pruef:#795a10;    --st-pruef-bg:rgba(240,185,98,.18);    --st-pruef-bd:rgba(240,185,98,.42);
  /* Freigegeben — gefüllte „erledigt"-Pille (klare terminale Bestätigung) */
  --st-frei:#0f6b46;     --st-frei-bd:#0f6b46;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--ink);color:var(--txt)}
body{font-family:var(--sans);font-size:16px;line-height:1.6;min-height:100vh;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
::selection{background:rgba(95,168,255,.3)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
[hidden]{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-48px;z-index:60;background:var(--core);color:#0a0c14;
  font-weight:650;font-size:14px;padding:10px 18px;border-radius:999px;transition:top .2s}
.skip-link:focus{top:16px}
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.fenster :where(a,button,input,[tabindex]):focus-visible{outline:2px solid #1a49b8;outline-offset:3px}

/* Ambient-Glow der Bühne (CSS-only) */
.stage-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 760px at 50% 12%,rgba(52,84,180,.28),transparent 58%),
    radial-gradient(760px 520px at 82% 76%,rgba(95,168,255,.09),transparent 62%),
    var(--ink)}

.topbar,#main{position:relative;z-index:1}
.shell{max-width:1040px;margin:0 auto;padding:0 24px}

/* ── Topbar ── */
.topbar{padding:20px 0 14px}
.topbar .shell{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;opacity:.92;transition:opacity .3s}
.brand:hover{opacity:1}
.brand .wordmark{font-size:16px;font-weight:700;letter-spacing:.42em;padding-left:.42em;
  background:linear-gradient(180deg,#fff,#96a0b8);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.user{display:flex;align-items:center;gap:14px;min-width:0}
.user-name{font-size:14px;font-weight:560;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:46vw}
.user-name b{color:var(--core);font-weight:640}
.logout{display:inline-flex;align-items:center;gap:7px;background:transparent;color:var(--dim);
  border:1px solid rgba(226,234,255,.24);border-radius:999px;font-size:13.5px;font-weight:560;
  padding:8px 16px;min-height:38px;cursor:pointer;transition:color .2s,border-color .2s}
.logout:hover{color:var(--core);border-color:var(--cyan)}

/* =========================================================================
   LOGIN
   ========================================================================= */
.login{min-height:min(78vh,720px);display:grid;place-items:center;padding:24px 0 60px}
.login-card{width:min(92vw,420px);background:var(--glass);border:1px solid var(--line);
  border-radius:20px;padding:clamp(26px,4vw,40px);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.86),0 0 0 1px rgba(226,234,255,.05),
             0 0 90px -30px rgba(95,168,255,.22)}
.login-card .eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lab);margin-bottom:14px}
.login-card h1{font-size:clamp(24px,4vw,30px);font-weight:640;line-height:1.14;letter-spacing:-.02em;
  color:var(--core)}
.login-sub{color:var(--dim);font-size:15px;margin:10px 0 26px;line-height:1.5}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--dim);margin-bottom:7px;letter-spacing:.01em}
.field input{width:100%;background:rgba(8,10,16,.6);color:var(--txt);font-size:15.5px;
  border:1px solid rgba(226,234,255,.16);border-radius:11px;padding:13px 15px;min-height:48px;
  transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:var(--lab)}
.field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(95,168,255,.22)}
.login-fehler{margin:2px 0 16px;font-size:13.5px;font-weight:560;color:#ff9ba6;line-height:1.5;
  background:rgba(224,64,86,.12);border:1px solid rgba(224,64,86,.32);border-radius:10px;padding:10px 13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650;
  font-size:15px;line-height:1;border:1px solid transparent;border-radius:999px;cursor:pointer;
  padding:14px 26px;min-height:48px;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .2s,color .2s,background .2s}
.btn:disabled{opacity:.6;cursor:progress}
.btn--primary{width:100%;background:var(--core);color:#0a0c14;
  box-shadow:0 14px 40px -16px rgba(140,195,255,.5)}
.btn--primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 18px 48px -16px rgba(140,195,255,.62)}
.btn--ghost{background:transparent;color:var(--txt);border-color:rgba(226,234,255,.32)}
.btn--ghost:not(:disabled):hover{border-color:var(--cyan);color:var(--core)}
.login-demo{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair);text-align:center;
  display:flex;flex-direction:column;gap:12px;align-items:center}
.login-demo span{font-size:13.5px;color:var(--lab)}
.login-demo .btn--ghost{width:100%}
.login-demo-link{font-size:12.5px;color:var(--lab);line-height:1.5;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.login-demo-link:hover{color:var(--core);border-color:var(--cyan)}

/* =========================================================================
   APP-SHELL — Tabs + Paper-Fenster
   ========================================================================= */
.app{padding-bottom:56px}
.tabs{max-width:1000px;margin:0 auto 14px;display:flex;gap:6px;padding:0 4px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--dim);
  font-size:14.5px;font-weight:600;padding:9px 18px;min-height:40px;border-radius:999px;
  border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.tab:hover{color:var(--core)}
.tab[aria-current="page"]{color:var(--core);background:var(--glass);border-color:var(--line)}
.tab .tab-count{font-variant-numeric:tabular-nums;font-size:12px;font-weight:650;color:var(--cyan);
  background:rgba(95,168,255,.14);border-radius:999px;padding:1px 8px;min-width:20px;text-align:center}

.fenster{max-width:1000px;margin:0 auto;background:var(--paper);color:var(--paper-ink);
  border-radius:18px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 50px 120px -46px rgba(0,0,0,.84),
             0 0 0 1px rgba(226,234,255,.06),0 0 90px -30px rgba(95,168,255,.16)}
.chrome{display:flex;align-items:center;gap:14px;height:46px;padding:0 18px;
  background:linear-gradient(180deg,#f2f4f9,var(--paper-2));border-bottom:1px solid var(--paper-line)}
.chrome-dots{display:inline-flex;gap:7px;flex:0 0 auto}
.chrome-dots i{width:11px;height:11px;border-radius:50%;background:#c5cad7;display:block;
  box-shadow:inset 0 0 0 1px rgba(20,24,40,.06)}
.chrome-title{font-size:13px;font-weight:600;color:var(--paper-dim);letter-spacing:.01em}
.chrome-title b{color:var(--paper-ink);font-weight:650}

.screen{padding:clamp(18px,3vw,32px) clamp(16px,3vw,32px) clamp(26px,4vw,38px);
  min-height:clamp(440px,58vh,600px);background:var(--paper)}

/* =========================================================================
   BILANZ (Heute) — Kacheln
   ========================================================================= */
.screen-kopf{margin-bottom:22px}
.screen-kopf h2{font-size:clamp(20px,3vw,25px);font-weight:660;letter-spacing:-.015em;color:var(--paper-ink)}
.screen-kopf p{margin-top:5px;font-size:14px;color:var(--paper-dim);line-height:1.5}

.bilanz{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:30px}
.kachel{background:#fff;border:1px solid var(--paper-line);border-radius:14px;padding:15px 16px;
  display:flex;flex-direction:column;gap:5px;min-width:0;text-align:left;color:inherit;
  box-shadow:0 10px 30px -24px rgba(0,0,0,.5)}
a.kachel{cursor:pointer;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s}
a.kachel:hover{transform:translateY(-2px);box-shadow:0 16px 40px -24px rgba(0,0,0,.55);border-color:var(--st-entwurf-bd)}
.kachel-zahl{font-size:27px;font-weight:680;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--paper-ink)}
.kachel-label{font-size:12.5px;font-weight:560;color:var(--paper-dim);line-height:1.3}
.kachel--gesamt .kachel-zahl{color:var(--st-entwurf)}
.kachel--dringend .kachel-zahl{color:var(--st-dringend)}
.kachel--frei .kachel-zahl{color:var(--st-still)}
.kachel-mehr{font-size:11.5px;font-weight:600;color:var(--st-entwurf);margin-top:2px}

/* =========================================================================
   VORGANGS-LISTE — role=list > listitem > button (Muster wie /demo)
   ========================================================================= */
.liste{list-style:none;display:flex;flex-direction:column;gap:6px}
.liste-item{list-style:none}
.vorgang-row{position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  font:inherit;background:#fff;border:1px solid var(--paper-line);border-radius:13px;
  padding:14px 16px;cursor:pointer;color:var(--paper-ink);line-height:1.4;
  transition:background .15s,border-color .15s,transform .12s}
.vorgang-row:hover{background:var(--paper);border-color:var(--paper-3)}
.vorgang-row:focus-visible{outline:2px solid var(--st-entwurf);outline-offset:-2px;border-radius:13px}
.vorgang-row[aria-pressed="true"]{background:var(--st-entwurf-bg);border-color:var(--st-entwurf-bd);
  box-shadow:inset 3px 0 0 var(--st-entwurf)}
.row-punkt{width:9px;height:9px;border-radius:50%;background:var(--st-entwurf);flex:0 0 auto;margin-top:6px}
.vorgang-row[data-status="dringend"] .row-punkt{background:var(--st-dringend)}
.vorgang-row[data-status="pruefliste"] .row-punkt{background:var(--st-pruef)}
.vorgang-row[data-status="still_erledigt"] .row-punkt{background:var(--st-still);opacity:.5}
.vorgang-row[data-status="freigegeben"] .row-punkt{background:var(--st-frei);opacity:.5}
.row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.row-absender{font-size:14.5px;font-weight:650;color:var(--paper-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.row-zeit{font-size:11.5px;color:#5c6274;flex:0 0 auto;font-variant-numeric:tabular-nums}
.row-betreff{font-size:13.5px;font-weight:600;color:var(--paper-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.row-meta{font-size:12.5px;color:var(--paper-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-unten{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
.row-defer{font-size:11px;font-weight:600;color:var(--paper-lab);background:var(--paper-2);
  border:1px solid var(--paper-line);border-radius:999px;padding:2px 9px}

/* =========================================================================
   BADGES — inkl. --freigegeben (gefüllt)
   ========================================================================= */
.badge{display:inline-flex;align-items:center;gap:.5em;font-size:11.5px;font-weight:640;line-height:1;
  padding:5px 11px 5px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.badge--entwurf {color:var(--st-entwurf); background:var(--st-entwurf-bg); border-color:var(--st-entwurf-bd)}
.badge--dringend{color:var(--st-dringend);background:var(--st-dringend-bg);border-color:var(--st-dringend-bd)}
.badge--still   {color:var(--st-still);   background:var(--st-still-bg);   border-color:var(--st-still-bd)}
.badge--pruefliste{color:var(--st-pruef); background:var(--st-pruef-bg);   border-color:var(--st-pruef-bd)}
.badge--freigegeben{color:#fff;background:var(--st-frei);border-color:var(--st-frei-bd)}
.row-badge .badge{font-size:10.5px;padding:3px 9px 3px 7px}
.row-badge .badge::before{width:5px;height:5px}

/* =========================================================================
   DETAIL — Original / Ergebnis (Muster wie /demo)
   ========================================================================= */
.zurueck{display:inline-flex;align-items:center;gap:8px;background:var(--paper-2);color:var(--paper-ink);
  border:1px solid var(--paper-line);border-radius:999px;font-size:13.5px;font-weight:600;
  padding:9px 18px;min-height:42px;margin-bottom:20px;cursor:pointer;transition:background .15s,border-color .15s}
.zurueck:hover{background:var(--paper-3);border-color:var(--paper-3)}
.detail-kopf{margin-bottom:20px}
.detail-kopf .badge{margin-bottom:11px}
.detail-betreff{font-size:clamp(18px,2.6vw,22px);font-weight:660;letter-spacing:-.015em;
  color:var(--paper-ink);line-height:1.25}
.detail-sub{margin-top:7px;font-size:13.5px;color:var(--paper-dim);line-height:1.5}
.detail-sub b{color:var(--paper-ink);font-weight:600}

.detail-paar{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:16px;align-items:start}
.karte{border-radius:14px;padding:18px 20px;min-width:0}
.karte--original{background:var(--paper);border:1px solid var(--paper-line)}
.karte--ergebnis{background:#fff;border:1px solid var(--st-entwurf-bd);
  box-shadow:0 18px 50px -34px rgba(0,0,0,.5)}
.karte-label{display:inline-block;font-size:11px;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-lab);margin-bottom:11px}
.karte-text{font-size:14px;color:var(--paper-ink);line-height:1.6;white-space:pre-wrap;word-break:break-word}

.entwurf{margin-top:2px;background:var(--st-entwurf-bg);border:1px solid var(--st-entwurf-bd);
  border-radius:11px;padding:14px 16px}
.entwurf-kopf{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--st-entwurf);margin-bottom:9px}
.entwurf-text{font-size:14px;color:var(--paper-ink);line-height:1.62;white-space:pre-wrap;word-break:break-word}
.entwurf--wl{margin-top:12px;background:var(--paper-2);border-color:var(--paper-line)}
.entwurf--wl .entwurf-kopf{color:var(--paper-dim)}
.entwurf-wl-meta{font-size:12.5px;color:var(--paper-dim);margin-bottom:7px}
.entwurf-wl-meta b{color:var(--paper-ink);font-weight:600}

.markierung{border-radius:11px;padding:15px 16px;background:var(--st-dringend-bg);
  border:1px solid var(--st-dringend-bd)}
.markierung--pruefliste{background:var(--st-pruef-bg);border-color:var(--st-pruef-bd)}
.markierung--still{background:var(--st-still-bg);border-color:var(--st-still-bd)}
.markierung--freigegeben{background:var(--st-still-bg);border-color:var(--st-still-bd)}
.markierung-text{font-size:14px;font-weight:560;color:var(--paper-ink);line-height:1.55}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;padding:0}
.chips li{font-size:11.5px;color:var(--paper-dim);background:var(--paper-2);
  border:1px solid var(--paper-line);border-radius:999px;padding:4px 11px;line-height:1.3}
.chips li::before{content:"✓ ";color:var(--st-still);font-weight:700}

/* Aktionsleiste */
.aktionen{margin-top:24px;padding-top:20px;border-top:1px solid var(--paper-line)}
.aktionen-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-aktion{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650;
  font-size:14.5px;line-height:1;border:1px solid transparent;border-radius:999px;cursor:pointer;
  padding:13px 24px;min-height:46px;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn-aktion:disabled{cursor:default}
.btn-freigeben{background:var(--st-entwurf);color:#fff;box-shadow:0 12px 30px -16px rgba(37,92,187,.7)}
.btn-freigeben:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 16px 38px -16px rgba(37,92,187,.8)}
.btn-freigeben:disabled{background:var(--paper-2);color:var(--paper-lab);box-shadow:none}
.btn-zurueckstellen{background:#fff;color:var(--paper-ink);border-color:var(--paper-line)}
.btn-zurueckstellen:hover{border-color:var(--paper-3);background:var(--paper)}
.btn-zurueckstellen[aria-pressed="true"]{background:var(--paper-2);color:var(--paper-dim);border-color:var(--paper-3)}
.aktion-erledigt{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:640;color:var(--st-frei)}
.aktion-erledigt svg{width:21px;height:21px;flex:0 0 auto;stroke:var(--st-frei)}
.gated-hinweis{margin-top:14px;font-size:12.5px;color:var(--paper-dim);line-height:1.55;
  display:flex;gap:8px;align-items:flex-start;max-width:60ch}
.gated-hinweis svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;stroke:var(--paper-lab)}

/* =========================================================================
   DEMO-MANDANT-CTA — dezente Leiste unter dem Fenster, NUR tenant 'demo'
   ========================================================================= */
.mandant-cta{max-width:1000px;margin:16px auto 0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px 22px;background:var(--glass);border:1px solid var(--line);
  border-radius:16px;padding:16px 22px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mandant-cta-lead{font-size:14.5px;font-weight:600;color:var(--core);letter-spacing:-.005em}
.mandant-cta-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.mandant-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--core);color:#0a0c14;font-size:13.5px;font-weight:650;line-height:1;
  padding:10px 20px;min-height:40px;border-radius:999px;white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;
  box-shadow:0 10px 30px -14px rgba(140,195,255,.45)}
.mandant-cta-btn:hover{transform:translateY(-1px);box-shadow:0 14px 36px -14px rgba(140,195,255,.6)}
.mandant-cta-tel{display:inline-flex;align-items:center;min-height:40px;font-size:13.5px;
  color:var(--dim);font-variant-numeric:tabular-nums;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.mandant-cta-tel:hover{color:var(--core);border-color:var(--cyan)}
@media (max-width:560px){.mandant-cta{flex-direction:column;align-items:flex-start}}

/* =========================================================================
   ZUSTÄNDE — Laden / Leer / Fehler
   ========================================================================= */
.skeleton{display:flex;flex-direction:column;gap:8px}
.skel-row{height:74px;border-radius:13px;border:1px solid var(--paper-hair);
  background:linear-gradient(90deg,#eef1f6 25%,#f5f7fb 37%,#eef1f6 50%);
  background-size:280% 100%;animation:skel 1.5s ease-in-out infinite}
@keyframes skel{0%{background-position:180% 0}100%{background-position:-120% 0}}
.zustand{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:12px;color:var(--paper-dim);padding:20px}
.zustand svg{width:44px;height:44px;stroke:var(--paper-lab);opacity:.85}
.zustand b{color:var(--paper-ink);font-weight:640;font-size:16px}
.zustand span{font-size:14px;max-width:42ch;line-height:1.55}
.zustand .btn-aktion{margin-top:6px;background:var(--st-entwurf);color:#fff}

/* =========================================================================
   FOOTER (slim)
   ========================================================================= */
.foot{position:relative;z-index:1;border-top:1px solid var(--hair);margin-top:8px;
  padding:26px 0 40px;color:var(--lab);font-size:12.5px;line-height:1.6;text-align:center}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--core)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:760px){
  .shell{padding:0 16px}
  .bilanz{grid-template-columns:repeat(3,1fr)}
  .detail-paar{grid-template-columns:1fr}
  .screen{padding:18px 15px 26px}
  .user-name{max-width:38vw}
  /* Detail als Slide-Over: von rechts einschieben */
  .screen--detail{animation:slidein .32s cubic-bezier(.2,.7,.2,1) both}
  @keyframes slidein{from{opacity:.4;transform:translateX(10%)}to{opacity:1;transform:translateX(0)}}
  .aktionen-btns .btn-aktion{flex:1 1 auto}
}
@media (max-width:420px){
  .bilanz{grid-template-columns:repeat(2,1fr)}
}

/* Reduced-Motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .skel-row{background:#eef1f6}
}