:root {
    color-scheme: dark;
    --bg: #0d0815;
    --panel: #171021;
    --panel2: #211629;
    --ink: #f6eefc;
    --muted: #a99cb5;
    --line: #44314c;
    --violet: #a254d9;
    --orange: #f2a057;
    --green: #8ddec4;
    --danger: #f0a3af;
    font-family: 'DM Sans',sans-serif
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    color: var(--ink);
    background: radial-gradient(ellipse at 67% -10%,#321639 0,#0d0815 47%),var(--bg);
    min-height: 100vh;
    overflow-x: hidden
}

button,input,select,textarea {
    font: inherit
}

button {
    cursor: pointer
}

button:disabled {
    opacity: .5;
    cursor: not-allowed
}

[hidden] {
    display: none!important
}

a {
    color: inherit;
    text-decoration: none
}

.shell {
    width: min(1350px,calc(100% - 60px));
    margin-inline: auto
}

.staff-orb {
    pointer-events: none;
    position: fixed;
    filter: blur(90px);
    opacity: .09;
    z-index: -1
}

.glow-one {
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: #da50bd;
    top: 12%;
    right: -220px
}

.glow-two {
    width: 320px;
    height: 320px;
    background: #dc6a35;
    bottom: 12%;
    left: -150px
}

.site-head {
    background: rgba(15,9,23,.93);
    border-bottom: 1px solid #34223b;
    backdrop-filter: blur(20px)
}

.head-inner {
    height: 91px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.mark {
    display: flex;
    align-items: center;
    gap: 14px
}

.mark-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg,#5c267b,#aa53b3 50%,#f09a4b);
    border-radius: 15px;
    color: #fff;
    font: 900 19px 'Outfit',Arial,sans-serif,sans-serif;
    box-shadow: 0 9px 30px #a7499a33
}

.mark strong {
    font: 900 24px/.98 'Outfit',Arial,sans-serif,sans-serif;
    letter-spacing: -.035em;
    display: block
}

.mark strong span {
    color: #e998c7
}

.mark small {
    color: #aa8ab6;
    font-size: 9px;
    letter-spacing: .22em;
    font-weight: 900
}

.head-right {
    display: flex;
    align-items: center;
    gap: 28px
}

.secure {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    color: var(--green)
}

.back-link {
    font-size: 11px;
    letter-spacing: .07em;
    font-weight: 800;
    color: #f5bd87
}

.intro {
    padding: 56px 0 32px
}

.eyebrow {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
    color: #df9abf
}

.eyebrow span {
    color: var(--orange);
    padding: 0 9px
}

.intro h1 {
    font: 900 clamp(39px,5vw,74px)/1.01 'Outfit',Arial,sans-serif,sans-serif;
    margin: 13px 0 12px;
    letter-spacing: -.05em
}

.intro em,.section-title em {
    font-style: normal;
    color: #f5a572
}

.intro p,.section-title p {
    color: var(--muted);
    line-height: 1.65;
    margin: 0
}

.auth-card {
    width: min(510px,100%);
    border: 1px solid #58385e;
    background: linear-gradient(155deg,#27172f,#18111f);
    border-radius: 24px;
    padding: 35px;
    box-shadow: 0 20px 70px #0005,0 0 70px #a34d7f18
}

.auth-emblem {
    width: 63px;
    height: 63px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(130deg,#713384,#b360ab);
    font-size: 30px;
    margin-bottom: 24px
}

.auth-card h2 {
    font: 800 29px 'Outfit',Arial,sans-serif;
    margin: 12px 0
}

.auth-card p {
    color: #c9bccc;
    font-size: 13px;
    line-height: 1.8
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 24px
}

.auth-card label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    color: #e2b6d8
}

.auth-card input,.manage-form input,.manage-form select,.account-row input,.account-row select,.case-controls textarea,.case-controls select,.assign-box select {
    width: 100%;
    min-height: 47px;
    background: #120b19;
    color: var(--ink);
    border: 1px solid #49334d;
    border-radius: 11px;
    padding: 12px;
    outline: none
}

.auth-card input:focus,.manage-form input:focus,.case-controls textarea:focus,.account-row input:focus {
    border-color: #c579b9;
    box-shadow: 0 0 0 3px #b369a123
}

.primary {
    background: linear-gradient(95deg,#853fb9,#df7b66 78%,#f0a257);
    border: none;
    color: #fff;
    border-radius: 11px;
    padding: 14px 18px;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 47px
}

.primary span {
    font-size: 19px
}

.full {
    width: 100%
}

.ghost {
    border: 1px solid #513958;
    background: #22172b;
    color: #eacfea;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .035em
}

.auth-card .hint {
    font-size: 11px;
    color: #95889f
}

.setup-code {
    display: block;
    border: 1px solid #7a4675;
    background: #0e0a15;
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
    margin: 20px 0
}

.staff-topbar {
    background: linear-gradient(115deg,#201429,#160f20);
    border: 1px solid #44304c;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 19px;
    margin-bottom: 20px
}

.account-badge {
    display: flex;
    align-items: center;
    gap: 13px
}

.avatar {
    background: linear-gradient(145deg,#8234bd,#f0a35f);
    width: 49px;
    height: 49px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font: 900 18px 'Outfit',Arial,sans-serif,sans-serif
}

.account-badge>span:last-child {
    display: grid;
    gap: 1px
}

.account-badge small {
    font-size: 9px;
    letter-spacing: .14em;
    color: #9f8daa;
    font-weight: 900
}

.account-badge strong {
    font: 800 15px 'Outfit',Arial,sans-serif
}

.account-badge #accountRole {
    font-size: 10px;
    text-transform: uppercase;
    color: #e6a2cf;
    letter-spacing: .12em
}

.bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.tabbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding: 8px;
    background: #17111e;
    border: 1px solid #433049;
    border-radius: 16px;
    margin-bottom: 37px
}

.tab {
    background: transparent;
    border: 0;
    color: #baa9c4;
    padding: 13px 17px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 900
}

.tab.active {
    background: linear-gradient(115deg,#74388e,#ab5a89);
    color: white;
    box-shadow: 0 8px 20px #963b8b38
}

.count {
    font-size: 10px;
    background: #ffffff25;
    border-radius: 99px;
    padding: 4px 8px;
    margin-left: 6px
}

.section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 25px
}

.section-title h2 {
    font: 900 clamp(25px,3vw,40px) 'Outfit',Arial,sans-serif;
    letter-spacing: -.045em;
    margin: 9px 0 0
}

.section-title p {
    max-width: 350px;
    font-size: 12px
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px
}

.kpi,.pane,.case {
    border: 1px solid #49314e;
    background: linear-gradient(145deg,#211527,#17111f);
    border-radius: 17px;
    box-shadow: 0 17px 34px #0002
}

.kpi {
    padding: 24px;
    display: flex;
    flex-direction: column;
    min-height: 164px
}

.kpi span {
    color: #d6a6ca;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em
}

.kpi strong {
    font: 900 45px 'Outfit',Arial,sans-serif;
    margin: 10px 0;
    color: #fff
}

.kpi:nth-child(2) strong {
    color: #f5ab6e
}

.kpi:nth-child(3) strong {
    color: #d9a8ed
}

.kpi:nth-child(4) strong {
    color: #93dac6
}

.kpi small {
    margin-top: auto;
    color: #aa9ab3;
    font-size: 11px
}

.dash-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    margin-top: 20px
}

.pane {
    padding: 24px
}

.pane-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px
}

.pane-heading h3 {
    font: 800 20px 'Outfit',Arial,sans-serif;
    margin: 0
}

.pane-heading span {
    color: #a790b1;
    font-size: 10px
}

.table-wrap {
    overflow-x: auto
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px
}

.stats-table th {
    color: #ad9cb7;
    font-size: 10px;
    font-weight: 900;
    text-align: left;
    letter-spacing: .05em;
    padding: 13px 10px;
    border-bottom: 1px solid #49324d
}

.stats-table td {
    padding: 14px 10px;
    border-bottom: 1px solid #35263c
}

.table-sub {
    display: block;
    color: #a99ab1;
    font-size: 10px;
    margin-top: 2px
}

.activity-list {
    display: grid;
    gap: 11px;
    max-height: 430px;
    overflow-y: auto
}

.activity-entry {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border-bottom: 1px solid #39283e;
    padding: 0 0 13px
}

.activity-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: #cc76b0;
    margin-top: 7px
}

.activity-entry strong {
    font-size: 12px
}

.activity-entry p {
    color: #bbaaC4;
    font-size: 11px;
    margin: 6px 0
}

.activity-entry time {
    color: #877b91;
    font-size: 10px
}

.case-list {
    display: grid;
    gap: 17px
}

.case {
    padding: 23px
}

.case-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 22px
}

.case-head h3 {
    font: 800 21px 'Outfit',Arial,sans-serif;
    margin: 5px 0
}

.case-meta {
    font-size: 10px;
    letter-spacing: .08em;
    color: #e6a7c7
}

.status-tag {
    padding: 8px 13px;
    font-size: 10px;
    font-weight: 900;
    border-radius: 999px;
    background: #623b67;
    color: #efd4f2
}

.status-tag[data-status='angenommen'] {
    background: #20523b;
    color: #baf5d1
}

.status-tag[data-status='abgelehnt'] {
    background: #602f45;
    color: #ffc4ca
}

.status-tag[data-status='in_bearbeitung'] {
    background: #614123;
    color: #ffdf9b
}

.case-fields {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.case-field {
    padding: 14px;
    border-radius: 10px;
    background: #0f0b17;
    border: 1px solid #30263a
}

.case-field.wide {
    grid-column: 1/-1
}

.case-field b {
    font-size: 9px;
    color: #e4a2ce;
    letter-spacing: .08em
}

.case-field p {
    color: #ded0e1;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 12px;
    margin: 8px 0 0
}

.assignment-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #3d2b43;
    margin-bottom: 15px
}

.assignment-line small {
    display: block;
    color: #9788a3;
    font-size: 10px
}

.assignment-line strong {
    font-size: 12px
}

.assign-box {
    display: flex;
    align-items: center;
    gap: 9px
}

.assign-box select {
    width: 190px;
    min-height: 40px
}

.case-controls {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    align-items: end;
    gap: 10px;
    margin-top: 15px
}

.case-controls textarea {
    resize: vertical;
    min-height: 80px
}

.case-controls label {
    display: grid;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    color: #dbaed5
}

.case-controls button {
    min-height: 47px
}

.manage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.manage-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.manage-form label {
    display: grid;
    gap: 8px;
    font-size: 11px;
    color: #dcb9d9;
    font-weight: 800
}

.manage-form button {
    grid-column: 1/-1
}

.roles-info p {
    color: #bdb0c7;
    font-size: 12px;
    line-height: 1.75;
    border-bottom: 1px solid #403047;
    padding-bottom: 12px
}

.roles-info b {
    color: #f0bc86
}

.accounts-pane {
    margin-top: 20px
}

.accounts-list {
    display: grid;
    gap: 12px
}

.account-row {
    border: 1px solid #473250;
    border-radius: 12px;
    background: #110c19;
    padding: 17px;
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    gap: 16px;
    align-items: center
}

.account-identity strong {
    font-size: 14px
}

.account-identity p {
    font-size: 11px;
    color: #aa9bb5;
    margin: 5px 0
}

.role-pill {
    font-size: 10px;
    text-transform: uppercase;
    background: #593763;
    padding: 6px 9px;
    border-radius: 999px;
    color: #edcdec;
    display: inline-block
}

.role-pill.inactive {
    background: #4f303d;
    color: #f3b4ba
}

.account-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center
}

.account-actions select {
    min-height: 39px;
    width: auto
}

.account-actions button {
    font-size: 10px
}

.reset-form {
    display: flex;
    gap: 8px
}

.reset-form input {
    min-height: 39px;
    width: 190px
}

.reset-form button {
    white-space: nowrap
}

.feedback {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 20;
    max-width: min(440px,calc(100vw - 35px));
    background: #362340;
    color: white;
    border: 1px solid #be76aa;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 14px 50px #0008
}

.feedback.error {
    border-color: #ed8891
}

.site-foot {
    padding: 70px 0 35px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    color: #6f627a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em
}

@media(max-width:1000px) {
    .kpi-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .dash-grid,.manage-grid {
        grid-template-columns: 1fr
    }

    .account-row {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    .shell {
        width: calc(100% - 30px)
    }

    .head-inner {
        height: 75px
    }

    .secure {
        display: none
    }

    .intro {
        padding: 39px 0 23px
    }

    .auth-card {
        padding: 22px
    }

    .staff-topbar,.section-title {
        align-items: flex-start;
        flex-direction: column
    }

    .tabbar {
        gap: 3px
    }

    .tab {
        padding: 11px;
        font-size: 11px
    }

    .case-fields,.manage-form {
        grid-template-columns: 1fr
    }

    .case-field.wide {
        grid-column: auto
    }

    .case-controls {
        grid-template-columns: 1fr
    }

    .kpi {
        min-height: 145px;
        padding: 17px
    }

    .kpi strong {
        font-size: 36px
    }

    .pane {
        padding: 18px
    }

    .assign-box {
        width: 100%
    }

    .assign-box select {
        width: 100%
    }

    .assignment-line {
        align-items: start;
        flex-direction: column
    }

    .reset-form {
        flex-wrap: wrap
    }

    .reset-form input {
        width: auto;
        flex: 1
    }

    .site-foot {
        padding-top: 36px
    }
}

@media(max-width:390px) {
    .kpi-grid {
        grid-template-columns: 1fr
    }

    .mark strong {
        font-size: 20px
    }
}