/* =============================================================================
   ARTIKELSEITE - Galerie links, Angaben rechts (pages/artikel.php); Stückliste über .ausstattung (components.css)
   ============================================================================= */
.artikel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}

.artikel__bild {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--farbe-weiss);
}

/* Immer ganz zeigen - auch im Partnershop, der seine Karten beschneiden lässt. Das große Bild IST der
   Artikel, den der Kunde gerade bucht; ihn hier anzuschneiden, wäre in keiner Einstellung richtig. */
.artikel__bild img {
    width: 100%;
    height: 100%;
    padding: var(--space-lg);
    object-fit: contain;
}

.artikel__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.artikel__thumb {
    width: 72px;
    height: 54px;
    padding: 0;
    overflow: hidden;
    background: var(--farbe-weiss);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-schnell);
}

.artikel__thumb img { width: 100%; height: 100%; padding: 3px; object-fit: contain; }
.artikel__thumb:hover, .artikel__thumb[aria-pressed="true"] { border-color: var(--farbe-rot); }

.artikel__info .pfad { margin-bottom: var(--space-md); }
.artikel__titel { margin-bottom: var(--space-sm); font-size: var(--text-3xl); }
.artikel__nummer { font-size: var(--text-sm); color: var(--farbe-grau-gedaempft); }
.artikel__nummer:empty { display: none; }

.artikel__preis {
    margin-block: var(--space-md) var(--space-lg);
    font-size: var(--text-xl);
    font-weight: var(--fw-semibold);
    color: var(--farbe-rot);
}

.artikel__text { margin-bottom: var(--space-lg); color: var(--farbe-grau-gedaempft); }
.artikel__kurz { font-size: var(--text-lg); color: var(--farbe-grau); }
.artikel__text > div + div { margin-top: var(--space-md); }
.artikel__text p + p, .artikel__text ul, .artikel__text ol { margin-top: var(--space-sm); }
.artikel__text ul, .artikel__text ol { padding-left: 1.25rem; list-style: disc; }

.artikel__daten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    font-size: var(--text-sm);
}

.artikel__daten div { padding: var(--space-sm) var(--space-md); background: var(--farbe-creme); border-radius: var(--radius-sm); }
.artikel__daten dt { font-size: var(--text-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--farbe-grau-gedaempft); }
.artikel__daten dd { font-weight: var(--fw-semibold); }

.artikel__merken {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.artikel__merken .feld-eingabe { width: 5rem; height: 48px; text-align: center; }
.artikel__hinweis { margin-bottom: var(--space-md); font-size: var(--text-xs); color: var(--farbe-grau-gedaempft); }
.artikel__module { font-size: var(--text-sm); color: var(--farbe-grau-gedaempft); }
.artikel__module a { color: var(--farbe-rot); text-decoration: underline; text-underline-offset: 0.15em; }

@media (max-width: 48em) {
    .artikel { grid-template-columns: 1fr; gap: var(--space-xl); }
    .artikel__titel { font-size: var(--text-2xl); }
}