/* ============================================================================
   KfzKlar public-site stylesheet (kk-* classes).
   Trust-blue palette: #0F4C81 (primary), #2E86DE (info), #16A34A (success),
   #F59E0B (CTA amber). Linked page-locally via Pages/Shared/_CustomHead.cshtml.
   ========================================================================== */

:root {
    --kk-blue: #0F4C81;
    --kk-blue-dark: #0A3A63;
    --kk-blue-light: #2E86DE;
    --kk-green: #16A34A;
    --kk-amber: #F59E0B;
    --kk-gray-bg: #F5F8FB;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ===== Hero / page headers / CTA band (trust-blue gradient) ===== */
.kk-hero,
.kk-page-header,
.kk-cta-band,
.kk-section-dark {
    background: linear-gradient(135deg, var(--kk-blue-dark) 0%, var(--kk-blue) 55%, var(--kk-blue-light) 130%);
    color: #fff;
}

.kk-hero-subline {
    color: rgba(255, 255, 255, 0.85);
}

.kk-hero-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    border-radius: 2rem;
}

.kk-hero-trust {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.925rem;
}

.kk-hero-icon {
    font-size: 11rem;
    color: rgba(255, 255, 255, 0.18);
}

.kk-section-dark .kk-trust-item i {
    font-size: 2.25rem;
    color: #7FD1FF;
}

.kk-section-dark .kk-trust-item p {
    color: rgba(255, 255, 255, 0.75);
}

/* ===== Sections ===== */
.kk-section {
    padding: 4.5rem 0;
}

.kk-section-alt {
    background: var(--kk-gray-bg);
}

/* ===== Service cards ===== */
.kk-card {
    border: 1px solid rgba(15, 76, 129, 0.10);
    border-radius: 1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.kk-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.75rem rgba(15, 76, 129, 0.14);
}

.kk-card-icon {
    font-size: 2.25rem;
}

.kk-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--kk-blue);
}

.kk-price-sm {
    color: var(--kk-blue);
    white-space: nowrap;
}

.kk-price-table td, .kk-price-table th {
    vertical-align: middle;
}

.kk-table-icon {
    font-size: 1.5rem;
}

/* ===== 4-step process ===== */
.kk-step-card {
    background: #fff;
    border: 1px solid rgba(15, 76, 129, 0.10);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    position: relative;
}

.kk-step-number {
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    font-weight: 800;
    color: rgba(15, 76, 129, 0.20);
    font-size: 1.25rem;
}

.kk-step-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(15, 76, 129, 0.08);
    color: var(--kk-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

/* ===== Add-on strip ===== */
.kk-addon {
    background: #fff;
    border: 1px dashed rgba(15, 76, 129, 0.30);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    height: 100%;
}

.kk-addon-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.14);
    color: var(--kk-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* ===== Price calculator ===== */
.cursor-pointer {
    cursor: pointer;
}

.kk-selected-ring {
    box-shadow: 0 0 0 0.25rem rgba(15, 76, 129, 0.15);
}

.kk-avatar-primary {
    background: var(--kk-blue);
    color: #fff;
    font-size: 1.25rem;
}

.kk-avatar-muted {
    background: rgba(15, 76, 129, 0.08);
    color: var(--kk-blue);
    font-size: 1.25rem;
}

.kk-price-breakdown {
    background: var(--kk-gray-bg);
    border: 1px solid rgba(15, 76, 129, 0.10);
}

/* ===== Status tracker (5 public steps) =====
   --kk-brand is set inline by the whitelabel wrapper on branded status pages
   (Enterprise orgs, Phase 8) — without it the defaults below apply unchanged. */
.kk-tracker-step-done {
    background: var(--kk-brand, var(--kk-green));
    color: #fff;
}

.kk-tracker-step-active {
    background: var(--kk-brand, var(--kk-blue));
    color: #fff;
    animation: kk-pulse 1.6s infinite;
}

.kk-tracker-step-pending {
    background: #E4EAF0;
    color: #8A97A5;
}

.kk-tracker-line-done {
    background: var(--kk-brand, var(--kk-green));
}

.kk-tracker-line-pending {
    background: #E4EAF0;
}

@keyframes kk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(15, 76, 129, 0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(15, 76, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 76, 129, 0); }
}

.kk-plate {
    background: #fff;
    color: #111;
    border: 1px solid #111;
    border-left: 8px solid var(--kk-blue-light);
    border-radius: 0.25rem;
    font-family: monospace;
    letter-spacing: 0.1em;
}

.kk-cancelled {
    background: #FBEBEC;
    color: #842029;
    border: 1px solid #F1AEB5;
    border-radius: 0.75rem;
}

.kk-timeline-dot {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.15);
    color: var(--kk-brand, var(--kk-green));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

/* ===== Order wizard (7 steps) ===== */
.kk-wizard-step {
    width: 36px;
    height: 36px;
    font-weight: bold;
    font-size: 0.9rem;
}

.kk-wizard-step-active {
    background: var(--kk-blue);
    color: #fff;
    animation: kk-pulse 1.6s infinite;
}

.kk-wizard-step-done {
    background: var(--kk-green);
    color: #fff;
}

.kk-wizard-step-inactive {
    background: #E4EAF0;
    color: #8A97A5;
}

.kk-wizard-line-done {
    background: var(--kk-green);
}

.kk-wizard-line-pending {
    background: #E4EAF0;
}

.kk-wizard-step-name {
    font-size: 0.72rem;
}

@media (max-width: 575.98px) {
    .kk-wizard-step-name {
        max-width: 52px;
    }
}

/* ===== Document upload slots ===== */
.kk-upload-slot {
    border: 1px solid rgba(15, 76, 129, 0.12);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
}

.kk-upload-slot-ok {
    border-color: rgba(22, 163, 74, 0.35);
}

.kk-upload-slot-fehler {
    border-color: rgba(220, 53, 69, 0.45);
}

.kk-upload-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    border: 2px dashed rgba(15, 76, 129, 0.30);
    border-radius: 0.75rem;
    background: var(--kk-gray-bg);
    color: var(--kk-blue);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.kk-upload-dropzone:hover {
    border-color: var(--kk-blue);
    background: rgba(15, 76, 129, 0.06);
}

.kk-upload-laedt {
    cursor: wait;
    opacity: 0.75;
}

/* ===== B2B tier cards ===== */
.kk-tier {
    border: 1px solid rgba(15, 76, 129, 0.12);
    border-radius: 1rem;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.kk-tier:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 1.75rem rgba(15, 76, 129, 0.14);
}

.kk-tier-highlight {
    border: 2px solid var(--kk-blue);
    box-shadow: 0 0.5rem 1.5rem rgba(15, 76, 129, 0.18);
}

.kk-tier-badge {
    position: absolute;
    top: -0.8rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--kk-amber);
    color: #fff;
    font-weight: 700;
    padding: 0.35rem 1rem;
    border-radius: 2rem;
}

.kk-tier-price {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--kk-blue);
}

.kk-tier-period {
    font-size: 1rem;
    font-weight: 500;
    color: #6c757d;
}

.kk-check-list li {
    padding: 0.3rem 0;
}

/* ===== FAQ / legal ===== */
.kk-faq .accordion-button:not(.collapsed) {
    background: rgba(15, 76, 129, 0.06);
    color: var(--kk-blue);
    font-weight: 600;
}

.kk-legal h2 {
    color: var(--kk-blue);
}

/* ===== Portal (sidebar + KPI cards + status badges) ===== */
.kk-portal-section {
    background: var(--kk-gray-bg);
    min-height: 70vh;
}

.kk-portal-sidebar {
    position: sticky;
    top: 1rem;
}

.kk-portal-nav .kk-portal-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.6rem;
    color: #3d4a57;
    font-weight: 500;
}

.kk-portal-nav .kk-portal-link i {
    font-size: 1.05rem;
    color: rgba(15, 76, 129, 0.55);
}

.kk-portal-nav .kk-portal-link:hover {
    background: rgba(15, 76, 129, 0.06);
    color: var(--kk-blue);
}

.kk-portal-nav .kk-portal-link.active {
    background: var(--kk-blue);
    color: #fff;
}

.kk-portal-nav .kk-portal-link.active i {
    color: #fff;
}

.kk-kpi-card {
    border: 1px solid rgba(15, 76, 129, 0.10);
    border-radius: 1rem;
}

.kk-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.kk-kpi-icon-blue {
    background: rgba(15, 76, 129, 0.10);
    color: var(--kk-blue);
}

.kk-kpi-icon-amber {
    background: rgba(245, 158, 11, 0.14);
    color: var(--kk-amber);
}

.kk-kpi-icon-green {
    background: rgba(22, 163, 74, 0.12);
    color: var(--kk-green);
}

.kk-kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--kk-blue);
    line-height: 1.2;
}

.kk-kpi-label {
    color: #6c757d;
    font-size: 0.85rem;
}

.kk-progress {
    height: 6px;
    background: #E4EAF0;
}

.kk-progress .progress-bar {
    background: var(--kk-blue);
}

.kk-register-tabs .nav-link {
    color: #3d4a57;
    font-weight: 600;
    border: 1px solid rgba(15, 76, 129, 0.15);
}

.kk-register-tabs .nav-link.active {
    background: var(--kk-blue);
    border-color: var(--kk-blue);
}

/* Status badges per AuftragStatus group */
.kk-badge-offen {
    background: #E4EAF0;
    color: #46535f;
}

.kk-badge-eingegangen {
    background: rgba(46, 134, 222, 0.15);
    color: #1c5fa8;
}

.kk-badge-pruefung {
    background: rgba(15, 76, 129, 0.12);
    color: var(--kk-blue);
}

.kk-badge-rueckfrage {
    background: rgba(245, 158, 11, 0.18);
    color: #92600a;
}

.kk-badge-behoerde {
    background: rgba(99, 102, 241, 0.15);
    color: #4338ca;
}

.kk-badge-fertig {
    background: rgba(22, 163, 74, 0.15);
    color: #15803d;
}

.kk-badge-storniert {
    background: rgba(220, 53, 69, 0.14);
    color: #a71d2a;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 991.98px) {
    .kk-section {
        padding: 3rem 0;
    }

    .kk-price {
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .kk-hero h1 {
        font-size: 2.1rem;
    }

    .kk-tier-price {
        font-size: 1.85rem;
    }

    .kk-tracker .small {
        max-width: 60px;
    }
}