/* Huddly-Seiten. Baut auf dem Raster von style.clickshare.css auf (cs-Klassen), hier nur das, was dort fehlt. */

/* Klassik-Theme: Gruppen bekommen einen inneren Container, der hier kein eigenes Layout bilden soll */
.weyel-huddly [class*="hd-"] > .wp-block-group__inner-container { display: contents; }

.weyel-huddly .hd-figure { margin: 0; }
.weyel-huddly .hd-figure img { display: block; width: 100%; height: auto; border-radius: var(--cs-radius); }
.weyel-huddly .hd-figure figcaption { margin-top: 10px; color: var(--cs-muted); font-size: 14px; line-height: 1.45; }
.weyel-huddly .hd-figure--product img { background: #ececec; }
.weyel-huddly .hd-figure--contain img { width: auto; max-width: 100%; margin: 0 auto; background: none; }
.weyel-huddly .hd-band { margin-top: clamp(32px, 5vw, 56px); }

/* Bildreihe, zwei oder drei Bilder nebeneinander */
.weyel-huddly .hd-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); margin-top: clamp(28px, 4vw, 48px); }
.weyel-huddly .hd-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.weyel-huddly .hd-gallery > * { min-width: 0; }

/* Produktübersicht auf der Hubseite: Trennlinien statt Kästen */
.weyel-huddly .hd-lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.weyel-huddly .hd-lineup li { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-top: 1px solid var(--cs-line-strong); }
.weyel-huddly .hd-lineup img { display: block; width: 100%; height: 190px; object-fit: contain; background: #ececec; border-radius: var(--cs-radius); }
.weyel-huddly .hd-lineup h3 { margin: 8px 0 0; color: var(--cs-navy); font-size: 22px; font-weight: 700; line-height: 1.2; }
.weyel-huddly .hd-lineup h3 a { color: inherit; text-decoration: none; }
.weyel-huddly .hd-lineup h3 a:hover { text-decoration: underline; }
.weyel-huddly .hd-lineup p { margin: 0; font-size: 16px; line-height: 1.55; }
.weyel-huddly .hd-lineup .hd-lineup__size { color: var(--cs-muted); font-size: 14px; font-weight: 600; }

/* Verweisliste am Seitenende */
.weyel-huddly .hd-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.weyel-huddly .hd-links li { padding: 14px 0; border-top: 1px solid var(--cs-line); }
.weyel-huddly .hd-links a { font-weight: 600; }
.weyel-huddly .hd-links span { display: block; margin-top: 2px; color: var(--cs-muted); font-size: 15px; }

/* Merkmalsliste mit Doppelpunkt-Trennung, etwa bei den KI-Funktionen */
.weyel-huddly .hd-facts { margin: 20px 0 0; padding: 0; }
.weyel-huddly .hd-facts div { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--cs-line); }
.weyel-huddly .hd-facts dt { margin: 0; font-weight: 700; color: var(--cs-navy); }
.weyel-huddly .hd-facts dd { margin: 0; }

.weyel-huddly .hd-logo { margin: 0 0 28px; }
.weyel-huddly .hd-logo img { display: block; width: auto; height: 44px; }

@media screen and (max-width: 899px) {
    .weyel-huddly .hd-lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .weyel-huddly .hd-gallery--3 { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 599px) {
    .weyel-huddly .hd-lineup, .weyel-huddly .hd-gallery, .weyel-huddly .hd-links { grid-template-columns: minmax(0, 1fr); }
    .weyel-huddly .hd-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}