/* KI-Readiness-Check im Kiventro-Markenlook.
   Farben, Typografie und Formen nach kiventro-brand/STYLEGUIDE.md.
   Klassennamen bleiben identisch zur Ursprungsfassung, damit das Markup
   unveraendert weiterlaeuft. */

:root {
    /* Primaerpalette */
    --petrol:       #017087;
    --petrol-dark:  #015a6d;
    --cyan:         #00b8e5;
    --cyan-soft:    rgba(0, 184, 229, 0.10);
    --magenta:      #df3cad;
    --gruen:        #00c58e;

    /* Neutrale */
    --ink:          #16181d;
    --muted:        #5b6770;
    --line:         #e6eaec;
    --surface:      #f6f8f9;
    --weiss:        #ffffff;

    /* Status */
    --warn:         #d97706;
    --danger:       #dc2626;

    --radius:       16px;
    --schatten:     0 1px 2px rgba(1, 112, 135, .04), 0 8px 24px rgba(1, 112, 135, .06);
    --schatten-tief:0 4px 8px rgba(1, 112, 135, .06), 0 20px 48px rgba(1, 112, 135, .12);
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .kv-num, .step-circle {
    font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
}

h1 { font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
h2 { font-weight: 700; color: var(--ink); }
h3 { font-weight: 600; color: var(--ink); }

.eyebrow {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

.headline-accent { color: var(--cyan); }

/* ---------- Petrol-Flaechen (Kopf, Fuss, Abschluss) ---------- */

.kv-teal {
    background: linear-gradient(135deg, var(--petrol-dark) 0%, var(--petrol) 100%);
    color: var(--weiss);
    position: relative;
    overflow: hidden;
}

/* Cyan-Burst oben rechts, Markenmotiv aus dem Styleguide */
.kv-teal::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(0, 184, 229, .30) 0%, rgba(0, 184, 229, 0) 68%);
    pointer-events: none;
}

/* Chevron-Wasserzeichen, das Pfeilmotiv der Marke */
.chevron-wm {
    position: absolute;
    pointer-events: none;
    background: currentColor;
    clip-path: polygon(0 0, 46% 0, 100% 50%, 46% 100%, 0 100%, 54% 50%);
}

.kv-teal .chevron-wm { opacity: .14; }

/* ---------- Karten ---------- */

.kv-card {
    background: var(--weiss);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    border: none;
}

.module-card { transition: transform .2s ease, box-shadow .2s ease; }
.module-card:hover { transform: translateY(-4px); box-shadow: var(--schatten-tief); }

/* ---------- Fortschritt ---------- */

.wizard-progress {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 2rem;
}

.wizard-progress::before {
    content: '';
    position: absolute;
    top: 1.25rem;
    left: 0; right: 0;
    height: 2px;
    background: var(--line);
    z-index: 0;
}

.wizard-progress .progress-fill {
    position: absolute;
    top: 1.25rem;
    left: 0;
    height: 2px;
    background: var(--cyan);
    z-index: 1;
    transition: width .4s ease;
}

.wizard-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.wizard-step .step-circle {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--weiss);
    border: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .875rem;
    color: var(--muted);
    transition: all .3s ease;
}

.wizard-step.active .step-circle {
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 0 4px var(--cyan-soft);
}

.wizard-step.completed .step-circle {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--weiss);
}

.wizard-step .step-label {
    font-size: .72rem;
    color: var(--muted);
    text-align: center;
    max-width: 82px;
}

.wizard-step.active .step-label { color: var(--petrol); font-weight: 600; }
.wizard-step.completed .step-label { color: var(--gruen); }

/* ---------- Likert-Skala ---------- */

.likert-group {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.likert-option { flex: 1; text-align: center; }
.likert-option input[type="radio"] { display: none; }

.likert-option label {
    display: block;
    padding: .625rem .25rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: all .18s ease;
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--weiss);
}

.likert-option label:hover {
    border-color: var(--cyan);
    color: var(--petrol);
}

.likert-option input[type="radio"]:checked + label {
    border-color: var(--cyan);
    background: var(--cyan-soft);
    color: var(--petrol);
    font-weight: 600;
}

/* ---------- Fragekarte ---------- */

.question-card {
    background: var(--weiss);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(1, 112, 135, .04);
    border-left: 3px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.question-card:hover { box-shadow: var(--schatten); }
.question-card.answered { border-left-color: var(--cyan); }

/* ---------- Formular ---------- */

.form-input {
    width: 100%;
    padding: .75rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    font-size: .95rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--weiss);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-soft);
}

.form-input::placeholder { color: #9aa5ad; }
textarea.form-input { resize: vertical; min-height: 100px; }

.form-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .35rem;
}

/* ---------- Schaltflaechen ---------- */

.btn-primary {
    background: var(--petrol);
    color: var(--weiss);
    padding: .75rem 1.75rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    font-family: 'Poppins', sans-serif;
    border: none;
    cursor: pointer;
    transition: all .18s ease;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.btn-primary:hover {
    background: var(--petrol-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(1, 112, 135, .28);
}

.btn-primary:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: var(--petrol);
}

.btn-secondary {
    background: var(--weiss);
    color: var(--petrol);
    padding: .75rem 1.75rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    font-family: 'Poppins', sans-serif;
    border: 1.5px solid var(--line);
    cursor: pointer;
    transition: all .18s ease;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.btn-secondary:hover { border-color: var(--petrol); background: rgba(1, 112, 135, .04); }

/* ---------- Ergebnis ---------- */

.chart-container {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    font-family: 'Poppins', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--weiss);
}

.score-badge.score-low    { background: linear-gradient(135deg, #b8455f, var(--magenta)); }
.score-badge.score-medium { background: linear-gradient(135deg, var(--petrol), var(--cyan)); }
.score-badge.score-high   { background: linear-gradient(135deg, #009e78, var(--gruen)); }

.kv-num {
    font-weight: 700;
    color: var(--cyan);
    line-height: 1;
}

.kv-tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--magenta);
    background: rgba(223, 60, 173, .08);
    padding: .2rem .55rem;
    border-radius: 999px;
}

/* Hinweisflaeche, ersetzt das frueher blaue Kaestchen */
.kv-hinweis {
    background: var(--surface);
    border-left: 3px solid var(--cyan);
    border-radius: 12px;
    padding: 1.25rem;
}

/* ---------- Animation ---------- */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fadeInUp .45s ease forwards; }

/* ---------- Fusszeile ---------- */

.footer-link {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-link:hover { color: var(--weiss); }

/* ---------- Klein ---------- */

@media (max-width: 640px) {
    .likert-group { flex-wrap: wrap; }
    .likert-option { flex: 0 0 calc(50% - .25rem); }
    .likert-option:last-child { flex: 0 0 100%; }
    .wizard-step .step-label { display: none; }
    .kv-teal::after { width: 260px; height: 260px; }
}

@media print {
    .no-print { display: none !important; }
    body { background: var(--weiss); }
    .chart-container { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}