/* ── KlimaPartner Cluster – Frontend Styles ──────────────────────────────
 * Design-Refresh passend zu meineklimaanlage.com
 * Markenfarben: #005453 (Primär), #008B8D (Akzent), #99BFC1 (Sekundär)
 * ────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Markenfarben ─────────────────────────────────────────────── */
    --kpc-primary:        #005453;   /* Tiefes Teal, Hauptmarkenton  */
    --kpc-primary-dark:   #003E3D;   /* Hover / Pressed              */
    --kpc-accent:         #008B8D;   /* Akzent, lebendiges Teal      */
    --kpc-accent-light:   #99BFC1;   /* Sekundär, sanfter Ton        */

    /* ── Hintergründe & Tints (abgeleitet) ────────────────────────── */
    --kpc-tint-50:        #F2F8F8;
    --kpc-tint-100:       #E3F0F0;
    --kpc-tint-200:       #CFE3E3;

    /* ── Neutralpalette ───────────────────────────────────────────── */
    --kpc-text:           #0F2424;
    --kpc-text-muted:     #5C7373;
    --kpc-text-soft:      #8AA1A1;
    --kpc-border:         #DCE7E7;
    --kpc-border-strong:  #BDD0D0;
    --kpc-bg:             #FFFFFF;
    --kpc-bg-soft:        #F7FAFA;

    /* ── Lizenzfarben (harmonisiert) ──────────────────────────────── */
    --kpc-silver-bg:      #ECF1F4;
    --kpc-silver-text:    #5B6E7A;
    --kpc-gold-bg:        #FBF1D9;
    --kpc-gold-text:      #8C6A12;
    --kpc-platinum-bg:    #E0EFEF;
    --kpc-platinum-text:  #005453;

    /* ── Tokens ───────────────────────────────────────────────────── */
    --kpc-radius:         16px;
    --kpc-radius-sm:      10px;
    --kpc-radius-pill:    999px;
    --kpc-shadow-sm:      0 1px 2px rgba(0, 84, 83, .06);
    --kpc-shadow:         0 4px 16px rgba(0, 84, 83, .08);
    --kpc-shadow-md:      0 10px 30px rgba(0, 84, 83, .12);
    --kpc-shadow-focus:   0 0 0 4px rgba(0, 139, 141, .18);
    --kpc-transition:     220ms cubic-bezier(.4, 0, .2, 1);
    --kpc-font:           inherit;
}

/* ── Wrapper ───────────────────────────────────────────────────────── */
.kpc-search-wrap {
    font-family: var(--kpc-font);
    max-width: 720px;
    margin: 0 auto;
    color: var(--kpc-text);
    line-height: 1.55;
}

.kpc-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 1rem;
    color: var(--kpc-primary);
    position: relative;
    padding-bottom: .65rem;
}

.kpc-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--kpc-primary), var(--kpc-accent));
}

/* ── Suchformular ──────────────────────────────────────────────────── */
.kpc-search-form {
    display: flex;
    gap: .5rem;
    align-items: stretch;
    background: var(--kpc-bg);
    border: 1.5px solid var(--kpc-border);
    border-radius: var(--kpc-radius);
    padding: .4rem .4rem .4rem .25rem;
    box-shadow: var(--kpc-shadow-sm);
    transition: border-color var(--kpc-transition),
                box-shadow var(--kpc-transition),
                transform var(--kpc-transition);
}

.kpc-search-form:hover {
    border-color: var(--kpc-border-strong);
}

.kpc-search-form:focus-within {
    border-color: var(--kpc-accent);
    box-shadow: var(--kpc-shadow-focus);
}

.kpc-plz-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    background: transparent;
    color: var(--kpc-text);
    min-width: 0;
    letter-spacing: .06em;
    padding: .65rem .85rem;
}

.kpc-plz-input::placeholder {
    color: var(--kpc-text-soft);
    font-weight: 400;
    letter-spacing: .02em;
}

.kpc-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--kpc-primary);
    color: #fff;
    border: none;
    border-radius: var(--kpc-radius-sm);
    padding: .75rem 1.4rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 84, 83, .25);
    transition: background var(--kpc-transition),
                box-shadow var(--kpc-transition),
                transform 120ms ease;
}

.kpc-search-btn:hover {
    background: var(--kpc-accent);
    box-shadow: 0 4px 14px rgba(0, 139, 141, .35);
}

.kpc-search-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 84, 83, .25);
}

.kpc-search-btn:focus-visible {
    outline: 2px solid var(--kpc-accent);
    outline-offset: 2px;
}

.kpc-search-btn svg {
    flex-shrink: 0;
}

/* ── Ergebnis-Container ────────────────────────────────────────────── */
.kpc-results {
    margin-top: 1.5rem;
    min-height: 0;
}

/* Loader */
.kpc-loader {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--kpc-text-muted);
    font-size: .95rem;
    padding: 1rem 1.25rem;
    background: var(--kpc-bg-soft);
    border-radius: var(--kpc-radius);
    border: 1px solid var(--kpc-border);
}

.kpc-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--kpc-tint-200);
    border-top-color: var(--kpc-accent);
    border-radius: 50%;
    animation: kpc-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes kpc-spin { to { transform: rotate(360deg); } }

/* Fehler */
.kpc-error {
    background: #FEF4F4;
    border: 1px solid #F8D5D5;
    color: #B23535;
    border-radius: var(--kpc-radius);
    padding: .9rem 1.1rem;
    font-size: .95rem;
    font-weight: 500;
}

/* ── Fallback-Hinweise (abgestuft nach Distanz) ────────────────────── */
.kpc-notice {
    border-radius: var(--kpc-radius);
    padding: .9rem 1.1rem;
    font-size: .94rem;
    line-height: 1.55;
    margin-bottom: 1rem;
    border: 1px solid;
}

.kpc-notice p { margin: 0; }
.kpc-notice strong { font-weight: 700; }

/* Stufe 1 – gleiches Bundesland (am nächsten) */
.kpc-notice--level1 {
    background: var(--kpc-tint-100);
    border-color: var(--kpc-tint-200);
    color: var(--kpc-primary);
}

/* Stufe 2 – gleicher 2-stelliger PLZ-Bereich */
.kpc-notice--level2 {
    background: var(--kpc-tint-50);
    border-color: var(--kpc-tint-200);
    color: var(--kpc-primary);
}

/* Stufe 3 – gleicher 1-stelliger PLZ-Bereich */
.kpc-notice--level3 {
    background: #F4F8F8;
    border-color: #E1ECEC;
    color: var(--kpc-text-muted);
}

/* Stufe 4 – deutschlandweit (am weitesten) */
.kpc-notice--level4 {
    background: var(--kpc-bg-soft);
    border-color: var(--kpc-border);
    color: var(--kpc-text-muted);
}

.kpc-fallback-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .3rem .65rem;
    border-radius: var(--kpc-radius-pill);
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(0, 84, 83, .12);
    color: inherit;
    margin-bottom: .45rem;
}

.kpc-notice--level3 .kpc-fallback-badge,
.kpc-notice--level4 .kpc-fallback-badge {
    background: #fff;
    border-color: var(--kpc-border);
}

/* ── Partner-Karten ────────────────────────────────────────────────── */
.kpc-partner-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.kpc-partner-card {
    position: relative;
    background: var(--kpc-bg);
    border: 1px solid var(--kpc-border);
    border-radius: var(--kpc-radius);
    padding: 1.15rem 1.3rem;
    box-shadow: var(--kpc-shadow-sm);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    overflow: hidden;
    transition: box-shadow var(--kpc-transition),
                border-color var(--kpc-transition),
                transform var(--kpc-transition);
}

/* Dezenter Akzentstreifen links */
.kpc-partner-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--kpc-primary), var(--kpc-accent));
    opacity: 0;
    transition: opacity var(--kpc-transition);
}

.kpc-partner-card:hover {
    border-color: var(--kpc-accent-light);
    box-shadow: var(--kpc-shadow-md);
    transform: translateY(-2px);
}

.kpc-partner-card:hover::before {
    opacity: 1;
}

/* Avatar mit Marken-Farbverlauf */
.kpc-partner-avatar {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--kpc-primary) 0%, var(--kpc-accent) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 84, 83, .18);
    overflow: hidden;
}

/* Logo-Variante: weißer Hintergrund + dezenter Rahmen, damit Logos sauber wirken */
.kpc-partner-avatar--logo {
    background: #fff;
    border: 1px solid var(--kpc-border);
    padding: 6px;
    box-shadow: 0 2px 6px rgba(0, 84, 83, .08);
}

.kpc-partner-avatar--logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.kpc-partner-body {
    flex: 1;
    min-width: 0;
}

.kpc-partner-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: .4rem;
}

.kpc-partner-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--kpc-text);
    margin: 0;
    line-height: 1.3;
}

/* Lizenz-Badges */
.kpc-license-badge {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .6rem;
    border-radius: var(--kpc-radius-pill);
    line-height: 1;
}

.kpc-license-silver {
    background: var(--kpc-silver-bg);
    color: var(--kpc-silver-text);
}

.kpc-license-gold {
    background: var(--kpc-gold-bg);
    color: var(--kpc-gold-text);
}

.kpc-license-platinum {
    background: var(--kpc-platinum-bg);
    color: var(--kpc-platinum-text);
    border: 1px solid var(--kpc-tint-200);
}

/* Kontakt-Links */
.kpc-partner-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .7rem;
    margin-top: .55rem;
}

.kpc-contact-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--kpc-primary);
    text-decoration: none;
    padding: .35rem .7rem .35rem .55rem;
    border-radius: var(--kpc-radius-pill);
    background: var(--kpc-tint-50);
    border: 1px solid transparent;
    transition: background var(--kpc-transition),
                color var(--kpc-transition),
                border-color var(--kpc-transition);
}

.kpc-contact-link:hover {
    background: var(--kpc-tint-100);
    color: var(--kpc-primary-dark);
    border-color: var(--kpc-tint-200);
    text-decoration: none;
}

.kpc-contact-link:focus-visible {
    outline: 2px solid var(--kpc-accent);
    outline-offset: 2px;
}

.kpc-contact-link svg {
    flex-shrink: 0;
    color: var(--kpc-accent);
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .kpc-title {
        font-size: 1.3rem;
    }

    .kpc-search-form {
        flex-direction: column;
        padding: .5rem;
        gap: .4rem;
    }

    .kpc-plz-input {
        font-size: 1rem;
        padding: .65rem .75rem;
        text-align: center;
    }

    .kpc-search-btn {
        width: 100%;
        padding: .8rem 1.25rem;
    }

    .kpc-partner-card {
        flex-direction: column;
        padding: 1rem 1.1rem;
    }

    .kpc-partner-avatar {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .kpc-partner-avatar--logo {
        padding: 4px;
    }

    .kpc-contact-link {
        font-size: .85rem;
    }
}

/* ── Reduced Motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .kpc-search-form,
    .kpc-search-btn,
    .kpc-partner-card,
    .kpc-partner-card::before,
    .kpc-contact-link {
        transition: none;
    }

    .kpc-partner-card:hover {
        transform: none;
    }

    .kpc-spinner {
        animation-duration: 1.5s;
    }
}