/* ==========================================================================
   certana/firm-sizes  („Für Kanzleien jeder Größe“)
   Mobil (Entwurf): Überschrift, Karten untereinander (Symbol links, Text rechts),
                    Button unter der Liste.
   Ab 992px (freigegebene Variante C): links Überschrift, Einleitung und Button,
                    rechts die Karten als Liste mit Pfeil.
   ========================================================================== */

.firm-sizes {
    padding-block: clamp(3rem, 6vw, 5rem);
    background: var(--c-bg);
}

.firm-sizes__inner {
    display: grid;
    gap: 1.5rem;
    grid-template-areas:
        "intro"
        "list"
        "action";
}

.firm-sizes__intro { grid-area: intro; }
.firm-sizes__list { grid-area: list; }
.firm-sizes__action { grid-area: action; }

.firm-sizes__eyebrow { margin-bottom: 0.75rem; }

.firm-sizes__title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    text-wrap: balance;
}

.firm-sizes__lead {
    display: none;
    max-width: 30rem;
    margin: 1rem 0 0;
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
    line-height: 1.6;
    color: var(--c-muted);
}

/* Liste ------------------------------------------------------------------ */
.firm-sizes__list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.firm-size {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: center;
    padding: 1.15rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(11, 18, 32, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03), 0 14px 36px -28px rgba(11, 18, 32, 0.35);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.firm-size--highlight { border-color: rgba(247, 144, 30, 0.4); }

.firm-size__icon { display: inline-flex; color: var(--c-accent); }
.firm-size__icon .icon { width: 38px; height: 38px; stroke-width: 1.6; }

.firm-size__title {
    margin: 0 0 0.2rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--c-ink);
}
.firm-size__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--c-muted);
}

/* Pfeil nur ab Tablet (Mobil-Entwurf ohne Pfeil) */
.firm-size__arrow { display: none; color: var(--c-ink); }
.firm-size__arrow .icon { width: 22px; height: 22px; transition: transform 0.2s var(--ease); }

/* Ganze Karte klickbar, Link sitzt am Titel */
.firm-size__link { color: inherit; text-decoration: none; }
.firm-size__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.firm-size__link:focus-visible { outline: none; }
.firm-size__link:focus-visible::after { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.firm-size--linked:hover {
    transform: translateY(-2px);
    border-color: rgba(247, 144, 30, 0.4);
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 22px 44px -26px rgba(11, 18, 32, 0.4);
}
.firm-size--linked:hover .firm-size__title { color: var(--c-accent-strong); }
.firm-size--linked:hover .firm-size__arrow .icon { transform: translateX(4px); }

.firm-sizes__action .btn { width: 100%; }

/* Tablet ----------------------------------------------------------------- */
@media (min-width: 576px) {
    .firm-sizes__action .btn { width: auto; }
}

@media (min-width: 768px) {
    .firm-sizes__lead { display: block; }
    .firm-size {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        column-gap: 1.5rem;
        padding: 1.4rem 1.75rem;
    }
    .firm-size__icon .icon { width: 46px; height: 46px; }
    .firm-size__title { font-size: 1.25rem; margin-bottom: 0.3rem; }
    .firm-size__text { font-size: 1rem; }
    .firm-size__arrow { display: inline-flex; }
}

/* Desktop: Variante C ---------------------------------------------------- */
@media (min-width: 992px) {
    .firm-sizes__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "intro  list"
            "action list"
            ".      list";
        column-gap: clamp(2.5rem, 6vw, 5rem);
        row-gap: 2rem;
        align-items: start;
    }
    .firm-sizes__intro { align-self: end; }
    .firm-sizes__list { gap: 1rem; align-self: center; }
}