/* ============================================================
   Kontakt-Elemente Demo – Block Styles
   Block: kss/kontakt-elemente-demo
   ============================================================ */

/* ── Abschnittsüberschrift ────────────────────────────────── */
.kss-ke-demo__section-heading {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 700;
    color: #111;
    margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.3;
    padding-bottom: 0.6rem;
}

/* ── Grid ─────────────────────────────────────────────────── */
.kss-ke-demo__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: stretch;
}

/* ============================================================
   Karten – Basis
   ============================================================ */
.kss-ke-demo__card {
    border-radius: 16px;
    padding: clamp(1.4rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Linke Karte: Kontaktliste ────────────────────────────── */
.kss-ke-demo__card--contacts {
    --ke-icon-color: #F59E0B;
    --ke-card-bg: #f9f9fb;
    background: var(--ke-card-bg);
    border: 1px solid #ebebf0;
}

.kss-ke-demo__card-title {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.3;
}

/* Kontaktliste */
.kss-ke-demo__contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kss-ke-demo__contact-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* Icon-Quadrat */
.kss-ke-demo__contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--ke-icon-color) 15%, transparent);
    color: var(--ke-icon-color);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Text-Block */
.kss-ke-demo__contact-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.kss-ke-demo__contact-label {
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.2;
}

.kss-ke-demo__contact-value {
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    font-weight: 700;
    color: #111;
    line-height: 1.3;
    text-decoration: none;
}

.kss-ke-demo__contact-value:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Rechte Karte: CTA ────────────────────────────────────── */
.kss-ke-demo__card--cta {
    --ke-from: #EF4444;
    --ke-to:   #F97316;
    background: linear-gradient(135deg, var(--ke-from) 0%, var(--ke-to) 100%);
    color: #ffffff;
    justify-content: center;
}

/* Header-Zeile (Icon + Headline) */
.kss-ke-demo__cta-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.kss-ke-demo__cta-icon {
    font-size: 1.25rem;
    opacity: 0.95;
    flex-shrink: 0;
}

.kss-ke-demo__cta-headline {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: #ffffff;
}

.kss-ke-demo__cta-subtitle {
    font-size: clamp(0.8rem, 1.1vw, 0.9rem);
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.55;
}

/* CTA-Button */
.kss-ke-demo__cta-btn {
    display: block;
    text-align: center;
    background: #ffffff;
    color: var(--ke-from);
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    font-weight: 700;
    padding: 0.7em 1.4em;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    cursor: pointer;
    margin-top: 0.25rem;
}

.kss-ke-demo__cta-btn:hover {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
}

/* ============================================================
   Slide-In Animation (Desktop + Mobil)
   ============================================================ */
.kss-ke-slide {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.kss-ke-slide--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback: kein JS → sofort sichtbar */
@media (scripting: none) {
    .kss-ke-slide {
        opacity: 1;
        transform: none;
    }
}

/* Barrierefreiheit: reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .kss-ke-slide {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Responsive: Mobil (Slick übernimmt das Layout) ─────── */
@media (max-width: 768px) {
    /* Grid abschalten – Slick braucht block/flex, kein grid */
    .kss-ke-demo__grid {
        display: block;
    }

    /* Slick-Dots zentriert unter dem Slider */
    .kss-ke-demo__grid .slick-dots {
        position: static;
        margin-top: 0.75rem;
        text-align: center;
    }

    /* Karten im Slider vollen Platz geben */
    .kss-ke-demo__grid .kss-ke-demo__card {
        margin: 0 0 0.25rem;
    }

    /* Slide-In-Animation auf Mobil deaktivieren (Slick übernimmt) */
    .kss-ke-slide {
        opacity: 1;
        transform: none;
        transition: none;
    }
}