:root {
    --color-bg: #fafafa;
    --color-fg: #1f1f1f;
    --color-muted: #6b6b6b;
    --color-border: #e5e5e5;
    --color-accent: #2c5fb3;
    --color-accent-dark: #224a8a;
    --color-soon: #b07a00;
    --color-low: #1e6b34;
    --color-low-bg: #e8f5ec;
    --color-medium: #b07a00;
    --color-medium-bg: #fdf2dc;
    --color-high: #a4262c;
    --color-high-bg: #fde8e9;
    --radius: 6px;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--color-bg);
    color: var(--color-fg);
    line-height: 1.6;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Header */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
}
.site-header .brand {
    font-weight: 600;
    text-decoration: none;
    color: var(--color-fg);
    font-size: 1rem;
}

/* Footer */
.site-footer {
    margin-top: 4rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: .9rem;
}

/* Index */
.hero {
    padding: 2.5rem 0 1.5rem;
}
.hero h1 { margin: 0 0 .4rem; font-size: 1.75rem; font-weight: 600; }
.hero .lead { margin: 0; color: var(--color-muted); font-size: 1rem; }

.tools-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 1.25rem;
    padding-bottom: 2rem;
}

.tool-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.tool-card header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
}
.tool-card h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}
.tool-card p {
    margin: 0;
    color: var(--color-muted);
    flex: 1;
    font-size: .95rem;
}

.badge {
    font-size: .72rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.badge--active { background: var(--color-low-bg); color: var(--color-low); }
.badge--demo   { background: #e8f0fb; color: var(--color-accent); }
.badge--soon   { background: #f0f0f0; color: var(--color-muted); }

.tool-version {
    font-size: .72rem;
    color: var(--color-muted);
    font-weight: 400;
    margin-left: .35rem;
    opacity: .7;
}

.button {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    padding: .55rem 1rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-size: .9rem;
    border: none;
    cursor: pointer;
    align-self: flex-start;
    font-family: inherit;
}
.button:hover { background: var(--color-accent-dark); }
.button--disabled {
    background: #ececec;
    color: var(--color-muted);
    cursor: default;
}
.tool-card--coming_soon { opacity: .8; }
.tool-card--demo        { opacity: .95; }

.button--demo {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}
.button--demo:hover { background: #e8f0fb; color: var(--color-accent-dark); }

/* Demo-Seiten */
.demo-banner {
    background: #e8f0fb;
    border: 1px solid #c5d3ee;
    border-radius: var(--radius);
    padding: .5rem 1rem;
    font-size: .8rem;
    color: var(--color-accent);
    font-weight: 500;
    text-align: center;
    margin-bottom: 1.5rem;
}

.demo-banner--warning {
    background: #fdf2dc;
    border-color: #e0b840;
    color: var(--color-medium);
    font-size: .9rem;
    padding: .65rem 1.25rem;
}

/* Shadow IT Tracker */
.sit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    margin-top: .75rem;
}
.sit-table th {
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-muted);
    border-bottom: 2px solid var(--color-border);
    padding: .4rem .6rem;
}
.sit-table td {
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.sit-table tr:last-child td { border-bottom: none; }

.sit-export {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-top: 1rem;
}
.sit-export-note {
    font-size: .8rem;
    color: var(--color-muted);
    margin-top: .4rem;
}

.demo-section { margin-top: 2rem; }
.demo-section-title {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
    margin: 0 0 .75rem;
}

.demo-box {
    background: #f7f7f7;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    font-size: .9rem;
    line-height: 1.7;
}
.demo-box--output {
    background: #fff;
    border-left: 3px solid var(--color-accent);
}
.demo-box p, .demo-box ul, .demo-box ol { margin: 0 0 .6rem; }
.demo-box p:last-child, .demo-box ul:last-child, .demo-box ol:last-child { margin-bottom: 0; }
.demo-box ul, .demo-box ol { padding-left: 1.35rem; }
.demo-box li { margin-bottom: .25rem; }
.demo-box h4 { margin: .75rem 0 .35rem; font-size: .9rem; }
.demo-box h4:first-child { margin-top: 0; }
.demo-label {
    display: inline-block;
    font-size: .7rem;
    padding: .1rem .4rem;
    border-radius: 4px;
    font-weight: 600;
    margin-left: .4rem;
    vertical-align: middle;
}
.demo-label--warn { background: var(--color-medium-bg); color: var(--color-medium); }
.demo-label--ok   { background: var(--color-low-bg);    color: var(--color-low); }

/* Form page */
.form-page h1 { margin-top: 2rem; font-size: 1.6rem; }
.form-page .intro { color: var(--color-muted); margin-bottom: .25rem; }
.form-page .intro-meta { color: var(--color-muted); margin-bottom: 1rem; }

form.tool-form {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-top: 1rem;
    display: grid;
    gap: 1rem;
}

fieldset {
    border: none;
    border-top: 1px solid var(--color-border);
    padding: .75rem 0 0;
    margin: .25rem 0 0;
    display: grid;
    gap: 1rem;
}
fieldset legend {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-muted);
    padding-right: .75rem;
    margin-bottom: .5rem;
}

.form-row { display: flex; flex-direction: column; gap: .35rem; }
.form-row label { font-weight: 500; font-size: .95rem; }
.form-row input,
.form-row select {
    padding: .55rem .65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    background: #fff;
    color: var(--color-fg);
}
.form-row input:focus,
.form-row select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
.form-row small { color: var(--color-muted); font-size: .85rem; }

/* Result */
.result {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-top: 1.5rem;
    display: grid;
    gap: 1.5rem;
}

.result-header {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 540px) {
    .result-header { grid-template-columns: 1fr; }
}

.score-block { display: flex; flex-direction: column; gap: .4rem; }

.score {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
}
.score-max { font-size: 1.1rem; font-weight: 400; color: var(--color-muted); }
.score--low    { color: var(--color-low); }
.score--medium { color: var(--color-medium); }
.score--high   { color: var(--color-high); }

.level-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .2rem .5rem;
    border-radius: 4px;
    align-self: flex-start;
}
.level-label--low    { background: var(--color-low-bg); color: var(--color-low); }
.level-label--medium { background: var(--color-medium-bg); color: var(--color-medium); }
.level-label--high   { background: var(--color-high-bg); color: var(--color-high); }

.score-bar {
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
    margin-top: .25rem;
}
.score-bar-fill { height: 100%; border-radius: 3px; }
.score-bar-fill--low    { background: var(--color-low); }
.score-bar-fill--medium { background: var(--color-medium); }
.score-bar-fill--high   { background: var(--color-high); }

.result-summary h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.result-summary p  { margin: 0; color: var(--color-muted); }

/* Actions */
.actions-section,
.findings-section {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}
.actions-section h3,
.findings-section h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
}
.section-meta { font-weight: 400; color: var(--color-muted); font-size: .85rem; }

.actions {
    margin: 0;
    padding-left: 1.35rem;
    display: grid;
    gap: .6rem;
}
.actions li { font-size: .95rem; }

.findings {
    margin: 0;
    padding-left: 1.35rem;
    display: grid;
    gap: .5rem;
}
.findings li { font-size: .9rem; color: var(--color-muted); }

/* Detailed check recommendation (score >= 75) */
.detailed-check-box {
    border: 1px solid #b8cce8;
    border-left: 3px solid var(--color-accent);
    background: #f0f5fc;
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}
.detailed-check-title {
    margin: 0 0 .4rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-accent-dark);
}
.detailed-check-box p:last-child {
    margin: 0;
    font-size: .9rem;
    color: var(--color-fg);
}

/* Subtle note (score < 75) */
.check-note-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    background: transparent;
}
.check-note-box p {
    margin: 0;
    font-size: .85rem;
    color: var(--color-muted);
}

/* Checkbox-Gruppen */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .4rem .75rem;
    margin-top: .5rem;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    cursor: pointer;
}
.form-row--checkbox { gap: .25rem; }
.form-row--checkbox .checkbox-label { font-size: .95rem; }

/* Offboarding-Ergebnis */
.role-label {
    font-size: .85rem;
    font-weight: 400;
    color: var(--color-muted);
    margin-left: .4rem;
}
.last-day-label { font-size: .9rem; color: var(--color-muted); margin: .2rem 0; }

.critical-section {
    border: 1px solid var(--color-high-bg);
    border-left: 3px solid var(--color-high);
    background: var(--color-high-bg);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}
.critical-section h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--color-high); }
.critical-list {
    margin: 0;
    padding-left: 1.35rem;
    display: grid;
    gap: .35rem;
}
.critical-list li { font-size: .9rem; }

/* Offboarding: Summary-Box */
.ob-summary-box {
    background: #f7f7f7;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: .6rem 1rem;
    font-size: .9rem;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.ob-summary-box--critical {
    background: var(--color-medium-bg);
    border-color: #e0b840;
    color: var(--color-medium);
}

/* Offboarding: Prioritäts-Gruppen */
.priority-label {
    margin: 0 0 .6rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .25rem .6rem;
    border-radius: 4px;
    display: inline-block;
}
.priority-label--sofort          { background: var(--color-high-bg);   color: var(--color-high); }
.priority-label--bis_letzter_tag { background: var(--color-medium-bg); color: var(--color-medium); }
.priority-label--nach_austritt   { background: #f0f0f0;                color: var(--color-muted); }

.fieldset-hint { display: block; margin-bottom: .5rem; color: var(--color-muted); }

/* Offboarding: Owner-Badges (Deutsch) */
.owner--it            { background: #e8f0fb; color: var(--color-accent); }
.owner--hr            { background: #f0f0f0; color: var(--color-muted); }
.owner--fuhrungskraft { background: #f5eeff; color: #6b3fa0; }
.owner--mitarbeiter   { background: var(--color-medium-bg); color: var(--color-medium); }

/* Checklist-Unterblöcke (IT vs. andere) */
.checklist-subgroup { margin-top: .75rem; }
.checklist-subgroup:first-child { margin-top: 0; }
.checklist-subgroup__title {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0 0 .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--color-border);
}

.checklist-section { border-top: 1px solid var(--color-border); padding-top: 1rem; }
.checklist-section h3 { margin: 0 0 .75rem; font-size: 1rem; }

.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .4rem;
}
.checklist-item {
    display: grid;
    grid-template-columns: 1.2rem 1fr auto;
    gap: .4rem;
    align-items: baseline;
    font-size: .9rem;
}
.checklist-check { color: var(--color-muted); }
.checklist-task { color: var(--color-fg); }
.checklist-owner {
    font-size: .65rem;
    font-weight: 600;
    padding: .1rem .35rem;
    border-radius: 4px;
    white-space: nowrap;
}
.owner--it       { background: #e8f0fb; color: var(--color-accent); }
.owner--hr       { background: #f0f0f0; color: var(--color-muted); }
.owner--self     { background: var(--color-medium-bg); color: var(--color-medium); }
.owner--manager  { background: #f5eeff; color: #6b3fa0; }

/* CTA-Boxen (score-abhängig) */
.cta-box {
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    display: grid;
    gap: .85rem;
}
.cta-box--medium {
    border: 1px solid #b8cce8;
    border-left: 3px solid var(--color-accent);
    background: #f0f5fc;
}
.cta-box--strong {
    border: 1px solid #b8cce8;
    border-left: 3px solid var(--color-accent);
    background: #e8f0fb;
}
.cta-box__text {
    margin: 0;
    font-size: .9rem;
    color: var(--color-fg);
}
.cta-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}
.button--secondary {
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
}
.button--secondary:hover { background: #e8f0fb; color: var(--color-accent-dark); }
.cta-secondary {
    font-size: .9rem;
    color: var(--color-accent);
    text-decoration: none;
    padding: .1rem 0;
}
.cta-secondary:hover { text-decoration: underline; }

/* Disclaimer */
.disclaimer {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}
.disclaimer p {
    margin: 0;
    font-size: .85rem;
    color: var(--color-muted);
}

.back-link { display: inline-block; margin-top: 1.25rem; color: var(--color-accent); font-size: .9rem; }