/* === Wrapper sorgt fürs Zentrieren === */
.htmo-pricing-wrap{
    display:flex;
    justify-content:center;
    width:100%;
}

.htmo-pricing{
    /* Variablen */
    --cols: 3;           /* gewünschte Max-Spalten (Editor) */
    --gap: 16px;
    --card-min: 260px;   /* min. Kartenbreite, ab der zweite/dritte Spalte möglich ist */
    --card-max: 360px;   /* harte Maximalbreite pro Karte */

    display:grid;
    gap: var(--gap);

    /* WICHTIG: so viele Spalten wie reinpassen (ab card-min),
       bleibt aber auf maximal --cols Spalten begrenzt via max-width darunter */
    grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
    justify-items: center;
    width: 100%;

    /* verhindert mehr Spalten als gewünscht und zentriert das ganze Grid optisch */
    max-width: calc(var(--cols) * var(--card-max) + (var(--cols) - 1) * var(--gap));
}

/* Breakpoints: automatisch weniger Spalten */
@media (max-width: 980px){
    .htmo-pricing{
        max-width: calc(2 * var(--card-max) + 1 * var(--gap));
    }
}
@media (max-width: 640px){
    .htmo-pricing{
        max-width: var(--card-max);
    }
}

/* Karte – respektiert die Maximalbreite */
.htmo-price{
    width: 100%;
    max-width: var(--card-max);
    background: var(--surface, #1a1a1a);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: var(--radius, 16px);
    padding: 16px;
    display:flex; flex-direction:column; gap:.5rem;
}
.htmo-price h3{ margin:.25rem 0; font-size:1.15rem; }
.htmo-price .htmo-price-value{ font-size:1.35rem; font-weight:700; margin:0 0 .25rem; color: var(--text,#e7e7e7); }

/* Bildbereich – begrenzte Höhe */
.htmo-price-media{
    position:relative; overflow:hidden; border-radius:12px; background:#0f0f10;
    height: clamp(160px, 28vw, 220px);
}
.htmo-price-image{ display:block; width:100%; height:100%; object-fit:cover; }
.htmo-price-media .htmo-price-media-actions{ position:absolute; right:8px; bottom:8px; display:flex; gap:6px; z-index:3; }

/* Liste & Button */
.htmo-price ul{ margin:.25rem 0 1rem 1.2rem; } .htmo-price li{ margin:.2rem 0; }
.htmo-price-buttons{ margin-top:auto; }
.htmo-price .wp-block-button__link{
    background:var(--accent,#3B82F6); color:#061121; border-radius:12px; padding:.6rem .9rem; font-weight:600;
    display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
}

/* Empfohlen-Badge als Overlay auf Bild */
.htmo-price.is-featured{ border-color: var(--accent,#3B82F6); box-shadow:0 10px 30px rgba(0,0,0,.35); position:relative; }
.htmo-price.is-featured .htmo-price-media::after{
    content:"Empfohlen"; position:absolute; top:10px; right:12px; z-index:2;
    font-size:.75rem; padding:.2rem .45rem; border-radius:8px;
    background: var(--accent,#3B82F6); color:#061121; font-weight:700; box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.htmo-price.is-featured::before{ display:none; }

/* Grid-Items sollen die Zeilenhöhe ausfüllen */
.htmo-pricing{
    align-items: stretch; /* NEU: alle Karten in einer Reihe gleich hoch */
}

/* Karte auf Zeilenhöhe strecken */
.htmo-price{
    height: 100%;        /* NEU: füllt die vom Grid vorgegebene Zeilenhöhe */
    align-self: stretch; /* (redundant, aber robust) */
}

/* ===== Modal (Anfrage) ===== */
.htmo-inquiry.hidden{ display:none; }
.htmo-inquiry{ position:fixed; inset:0; z-index:9999; }
.htmo-inquiry__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.htmo-inquiry__dialog{
    position:relative; z-index:1; width:min(560px, 92vw); margin:6vh auto 0;
    background:var(--surface,#1a1a1a); border:1px solid var(--border,#2a2a2a);
    border-radius:16px; padding:16px;
}
.htmo-inquiry__close{
    position:absolute; right:10px; top:10px; width:32px; height:32px;
    border:1px solid var(--border,#2a2a2a); border-radius:8px; background:#0f0f10; color:var(--text,#e7e7e7); cursor:pointer;
}
.htmo-inquiry__title{ margin:0 0 .75rem; }
.htmo-inquiry__grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
.htmo-inquiry label{ display:block; margin-bottom:.75rem; }
.htmo-inquiry input[type="text"],
.htmo-inquiry input[type="email"],
.htmo-inquiry textarea{
    width:100%; background:#0f0f10; border:1px solid var(--border,#2a2a2a); border-radius:12px; color:var(--text,#e7e7e7);
    padding:.65rem .75rem;
}
.htmo-inquiry__consent{ display:flex; align-items:flex-start; gap:.5rem; font-size:.9rem; color:var(--muted,#bdbdbd); }
.htmo-inquiry__actions{ display:flex; gap:8px; justify-content:flex-end; }
.htmo-inquiry__status{ margin:.25rem 0 0; min-height:1.2em; color:var(--muted,#bdbdbd); }
.htmo-inquiry__hp{ position:absolute !important; left:-9999px !important; opacity:0 !important; }
@media (max-width:600px){ .htmo-inquiry__grid{ grid-template-columns:1fr; } }

/* Theme-like Buttons (Fallback falls Theme-Klassen fehlen) */
.button{ display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px; border:1px solid transparent; cursor:pointer; }
.button.primary{ background:var(--accent,#3B82F6); color:#061121; font-weight:600; }
.button.secondary{ background:transparent; border-color:var(--border,#2a2a2a); color:var(--text,#e7e7e7); }