/*
 * Öffentlicher Shop (Phase B) — baut auf site.css auf (Türkis-CI der
 * öffentlichen Seite). CI-Karten für den Katalog, Detail-Layout mit
 * Preisbox und das Anfrage-/Bestellformular. Produkt-CI-Overrides kommen
 * als CSS-Variable --shop-akzent (validierter Hex-Wert) aus formular_ci_json.
 */

.shop-einleitung { color: var(--site-text-hell); margin: 0 0 20px; }

/* --- Katalog-Raster (CI-Karten) ------------------------------------------- */

.shop-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 16px 0 32px;
}

.shop-karte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--site-rahmen);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--site-text);
    background: var(--site-flaeche);
    box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.08);
    transition: box-shadow 170ms ease, transform 170ms ease;
}
.shop-karte:hover {
    box-shadow: 0 10px 20px -4px rgba(16,24,40,.24), 0 20px 44px -12px rgba(16,24,40,.32);
    transform: translateY(-3px);
    color: var(--site-text);
}

.shop-karte-bild { display: block; height: 160px; background: var(--site-flaeche-2); }
.shop-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-karte-platzhalter {
    display: flex; align-items: center; justify-content: center;
    height: 100%; font-family: "Montserrat", Arial, sans-serif;
    font-weight: 700; font-size: 2rem; color: var(--site-akzent);
}

.shop-karte-inhalt { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.shop-karte-titel { font-family: "Montserrat", Arial, sans-serif; font-size: 1.05rem; }
.shop-karte-teaser { font-size: 0.9rem; color: var(--site-text-hell); }
.shop-karte-preis { margin-top: auto; font-weight: 600; color: var(--site-akzent-dunkel); }

/* --- Produkt-Detail --------------------------------------------------------- */

.shop-zurueck { margin: 16px 0 0; }
.shop-vorschau-hinweis {
    padding: 8px 12px; border: 1px solid var(--site-akzent);
    border-radius: 8px; background: var(--site-flaeche-2); font-weight: 600;
}

.shop-detail { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin: 8px 0 8px; }
.shop-detail-haupt { flex: 2 1 420px; min-width: 0; }
.shop-detail-seite { flex: 1 1 220px; }

.shop-galerie { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.shop-galerie-haupt { width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; }
.shop-galerie-klein { width: 120px; height: 84px; object-fit: cover; border-radius: 8px; }

.shop-teaser { font-size: 1.1rem; color: var(--site-text-hell); }
.shop-beschreibung { margin: 8px 0 16px; }

.shop-preisbox {
    border: 1px solid var(--site-rahmen);
    border-radius: 12px;
    padding: 16px;
    background: var(--site-flaeche-2);
}
.shop-preisbox h2 { margin: 0 0 8px; font-size: 1.1rem; }
.shop-preis { margin: 4px 0; font-weight: 700; font-size: 1.15rem; color: var(--site-akzent-dunkel); }

/* --- Anfrage-/Bestellformular ---------------------------------------------- */

.shop-formular { --shop-akzent: var(--site-akzent); max-width: 640px; }
.shop-formular--kompakt .shop-feld { margin-bottom: 8px; }
.shop-formular--normal  .shop-feld { margin-bottom: 14px; }
.shop-formular--weit    .shop-feld { margin-bottom: 22px; }

.shop-feld label { display: block; font-weight: 600; font-size: 0.95rem; }
.shop-eingabe {
    display: block; width: 100%; margin-top: 4px; padding: 9px 12px;
    border: 1px solid var(--site-rahmen); border-radius: 8px;
    font: inherit; color: var(--site-text); background: var(--site-flaeche);
}
.shop-eingabe:focus { outline: 3px solid var(--shop-akzent); outline-offset: 0; border-color: var(--shop-akzent); }

.shop-pflicht { color: var(--shop-akzent); }
.shop-feld-hinweis { margin: 4px 0 0; font-size: 0.875rem; color: var(--site-text-hell); }

.shop-radio, .shop-typwahl { border: 1px solid var(--site-rahmen); border-radius: 8px; padding: 10px 14px; margin: 0; }
.shop-radio legend, .shop-typwahl legend { font-weight: 600; padding: 0 6px; }
.shop-radio-option, .shop-typwahl label { display: block; font-weight: 400; margin: 4px 0; }
.shop-checkbox { font-weight: 400 !important; }

.shop-typwahl { margin-bottom: 14px; }
.shop-bestell-bestaetigung { padding: 10px 14px; border: 1px solid var(--shop-akzent); border-radius: 8px; }

.shop-kontakt { margin-top: 14px; }

.shop-fehler {
    border: 1px solid #B71C1C; border-radius: 8px;
    background: #FDECEA; color: #7A1010;
    padding: 12px 16px; margin-bottom: 16px;
}
.shop-fehler ul { margin: 8px 0 0; padding-left: 20px; }

.shop-datenschutz-hinweis { font-size: 0.875rem; color: var(--site-text-hell); }

.shop-absenden {
    display: inline-block; padding: 12px 28px; min-height: 44px;
    border: 0; border-radius: 8px; cursor: pointer;
    background: var(--shop-akzent); color: #FFFFFF;
    font: inherit; font-weight: 600; font-size: 1rem;
}
.shop-absenden:hover { filter: brightness(0.9); }

.shop-nummer { font-size: 1.25rem; letter-spacing: 1px; }

/* Honeypot: fuer Menschen unsichtbar (nicht display:none — manche Bots
   erkennen das), aus dem Sichtbereich geschoben. */
.shop-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* Zwei-spaltige Feldgruppen auf der oeffentlichen Seite (site.css kennt
   aam-form-2 nicht — schlanke Entsprechung). */
.shop-formular .aam-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) {
    .shop-formular .aam-form-2 { grid-template-columns: 1fr; }
    .shop-detail { flex-direction: column; }
}