:root {
    --stahlblau: #4E6998;
    --slate: #535C71;
    --lavendel: #D3DBEE;
    --charcoal: #1A1A1A;
    --terrakotta: #E05A2B;
    --weiss: #FFFFFF;
    --gruen: #2E7D32;
    --rot: #C62828;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--lavendel);
    color: var(--charcoal);
    margin: 0;
    line-height: 1.5;
}

h1, h2, h3, .brand-font {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: var(--charcoal);
}

a { color: var(--stahlblau); }

header.topbar {
    background: var(--charcoal);
    color: var(--weiss);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.topbar a { color: var(--weiss); text-decoration: none; }
header.topbar .brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; display: inline-flex; align-items: center; }
header.topbar nav a { margin-left: 18px; font-size: 0.92rem; }

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}

.card {
    background: var(--weiss);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(26,26,26,0.08);
}

.btn {
    display: inline-block;
    background: var(--stahlblau);
    color: var(--weiss);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
}
.btn:hover { background: var(--slate); }
.btn.secondary { background: var(--slate); }
.btn.accent { background: var(--terrakotta); }
.btn.danger { background: var(--rot); }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
table.data th, table.data td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--lavendel);
}
table.data th { background: var(--lavendel); font-family: 'Space Grotesk', sans-serif; }

.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--weiss);
    font-weight: 600;
}

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.92rem; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--slate);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
}

.criteria-block { border-left: 4px solid var(--stahlblau); padding-left: 16px; margin-bottom: 24px; }
.criteria-block .category-label { color: var(--slate); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.levels { display: grid; gap: 8px; margin-top: 10px; }
.level-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--lavendel); border-radius: 8px; cursor: pointer;
}
.level-option:hover { background: var(--lavendel); }
.level-option input { margin: 0; }

.score-hero { text-align: center; padding: 30px; }
.score-hero .grade { font-size: 4rem; font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.score-hero .percent { font-size: 1.3rem; color: var(--slate); }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.alert.info { background: var(--lavendel); }
.alert.error { background: #FBEAE6; color: var(--rot); }
.alert.success { background: #E7F3E8; color: var(--gruen); }

footer.site-footer {
    text-align: center;
    padding: 24px;
    color: var(--slate);
    font-size: 0.82rem;
}