:root {
    --juh-red: rgb(235, 0, 60);
    --juh-red-1: rgb(255, 204, 216);
    --juh-red-2: rgb(255, 158, 167);
    --juh-red-3: rgb(255, 96, 110);
    --juh-blue: rgb(0, 5, 72);
    --juh-blue-1: rgb(222, 238, 252);
    --juh-blue-2: rgb(162, 191, 224);
    --juh-blue-3: rgb(96, 132, 191);
    --juh-gray: rgb(240, 240, 240);
    --juh-yellow: rgb(222, 255, 0);
    --juh-border: #d8dde6;
    --juh-white: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0 !important;
    min-height: 100vh !important;
    font-family: Arial, Helvetica, sans-serif !important;
    background: var(--juh-gray) !important;
    color: var(--juh-blue) !important;
    font-size: 14px !important;
}

body::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: var(--juh-red);
    z-index: 9999;
}

.juh-header {
    max-width: 1460px;
    margin: 0 auto;
    padding: 18px 26px 14px 26px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.juh-logo {
    height: 50px;
    width: auto;
    max-width: 390px;
    object-fit: contain;
}

.container {
    width: 100% !important;
    max-width: 1460px !important;
    margin: 0 auto !important;
    padding: 0 26px 30px 26px !important;
}

.card,
.content-card,
.panel,
.box,
section,
form,
.form-card,
.user-box,
.login-box,
.auth-box,
.profile-box,
.dashboard-card,
.tile,
.kachel,
.menu-card,
.nav-card {
    background: var(--juh-white) !important;
    color: var(--juh-blue) !important;
    border: 1px solid var(--juh-border) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

.card,
.content-card,
.panel,
.box,
section,
form,
.form-card {
    padding: 22px !important;
}

.card *,
.content-card *,
.panel *,
.box *,
section *,
form *,
.form-card *,
.user-box *,
.login-box *,
auth-box *,
.profile-box *,
.dashboard-card *,
.tile *,
.kachel *,
.menu-card *,
.nav-card * {
    color: var(--juh-blue) !important;
}

h1 {
    margin: 0 0 10px 0 !important;
    color: var(--juh-blue) !important;
    font-size: 34px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
}

h2 {
    color: var(--juh-blue) !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

h3 {
    color: var(--juh-blue) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

p,
div,
span,
label,
small,
strong,
.text,
.muted {
    color: var(--juh-blue) !important;
}

.muted,
.text,
small {
    opacity: 0.78 !important;
}

a {
    color: var(--juh-blue) !important;
}

.button,
button,
input[type="submit"],
input[type="button"],
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: var(--juh-red) !important;
    color: #ffffff !important;
    border: 1px solid var(--juh-red) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.button *,
button *,
.btn * {
    color: #ffffff !important;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover {
    background: var(--juh-red-3) !important;
    border-color: var(--juh-red-3) !important;
}

.button.secondary,
.btn.secondary {
    background: var(--juh-blue) !important;
    border-color: var(--juh-blue) !important;
    color: #ffffff !important;
}

.button.secondary *,
.btn.secondary * {
    color: #ffffff !important;
}

.button.gray,
.btn.gray,
.button.cancel {
    background: #ffffff !important;
    color: var(--juh-blue) !important;
    border-color: var(--juh-blue-2) !important;
}

.button.gray *,
.btn.gray *,
.button.cancel * {
    color: var(--juh-blue) !important;
}

input,
select,
textarea {
    background: #ffffff !important;
    color: var(--juh-blue) !important;
    border: 1px solid var(--juh-blue-2) !important;
    border-radius: 10px !important;
    padding: 9px 11px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--juh-blue-3) !important;
}

table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
    color: var(--juh-blue) !important;
    border: 1px solid var(--juh-border) !important;
}

thead,
thead tr,
th {
    background: var(--juh-blue) !important;
    color: #ffffff !important;
}

th {
    padding: 11px 12px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    border-bottom: 3px solid var(--juh-red) !important;
    text-align: left !important;
}

th * {
    color: #ffffff !important;
}

td {
    background: #ffffff !important;
    color: var(--juh-blue) !important;
    padding: 11px 12px !important;
    border-bottom: 1px solid var(--juh-border) !important;
    font-size: 13px !important;
    vertical-align: top !important;
}

tr:hover td {
    background: var(--juh-blue-1) !important;
}

.badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border: 1px solid transparent !important;
}

.badge.green,
.badge.lightblue {
    background: var(--juh-blue-1) !important;
    color: var(--juh-blue) !important;
    border-color: var(--juh-blue-2) !important;
}

.badge.gray {
    background: var(--juh-gray) !important;
    color: var(--juh-blue) !important;
    border-color: var(--juh-border) !important;
}

.badge.red {
    background: var(--juh-red) !important;
    color: #ffffff !important;
    border-color: var(--juh-red) !important;
}

.badge.blue {
    background: var(--juh-blue) !important;
    color: #ffffff !important;
    border-color: var(--juh-blue) !important;
}

.badge.orange,
.badge.purple,
.badge.pink {
    background: var(--juh-red-1) !important;
    color: var(--juh-blue) !important;
    border-color: var(--juh-red-2) !important;
}

.badge.yellow {
    background: var(--juh-yellow) !important;
    color: var(--juh-blue) !important;
    border-color: var(--juh-yellow) !important;
}

.code {
    font-family: Consolas, monospace !important;
    background: var(--juh-blue-1) !important;
    border: 1px solid var(--juh-blue-2) !important;
    color: var(--juh-blue) !important;
    border-radius: 999px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.dashboard-grid,
.grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 16px !important;
}

.dashboard-card,
.tile,
.kachel,
.menu-card,
.nav-card {
    display: block !important;
    padding: 22px 22px 22px 28px !important;
    text-decoration: none !important;
    position: relative !important;
}

.dashboard-card::before,
.tile::before,
.kachel::before,
.menu-card::before,
.nav-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 6px;
    background: var(--juh-red);
    border-radius: 0 4px 4px 0;
}

.dashboard-card:hover,
.tile:hover,
.kachel:hover,
.menu-card:hover,
.nav-card:hover {
    background: var(--juh-blue-1) !important;
}

@media (max-width: 800px) {
    .juh-header {
        padding: 16px 16px 12px 16px;
    }

    .juh-logo {
        height: 42px;
        max-width: 300px;
    }

    .container {
        padding: 0 16px 24px 16px !important;
    }

    h1 {
        font-size: 28px !important;
    }

    .button,
    button,
    input[type="submit"],
    input[type="button"],
    .btn {
        width: 100%;
    }
}



/* Professionelle Benutzerverwaltung */
table form {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

td form {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}

td form input[type="password"],
td form input[type="text"] {
    max-width: 260px !important;
    min-width: 220px !important;
}

td form button,
td form .button {
    flex: 0 0 auto !important;
}

td {
    vertical-align: middle !important;
}

tr:nth-child(even) td {
    background: #fbfcff !important;
}

tr:hover td {
    background: var(--juh-blue-1) !important;
}

form .grid,
form .form-grid,
.form-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    align-items: end !important;
}

form label {
    display: block !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
}

form input,
form select,
form textarea {
    width: 100% !important;
}

section form,
.card form,
.panel form,
.box form {
    background: white !important;
    border: 1px solid var(--juh-border) !important;
    border-radius: 16px !important;
    padding: 18px !important;
}

table form {
    border: none !important;
    padding: 0 !important;
}