/**
 * haus100.de: Produktbox des Amazon-Moduls, Farben aus der haus100-Palette.
 * Ausgangspunkt war die Master-Referenz amazon/module/assets/produktbox-default.css.
 *
 * Startpunkt. Pro Projekt entweder die --ab-* Custom Properties ueberschreiben
 * oder komplett eigenes CSS schreiben - die BEM-Klassen bleiben stabil.
 * (browserdoktor.de stylt .ab-product direkt im eigenen Stylesheet mit seinen
 *  Marken-Tokens; dieses File ist die neutrale Vorlage fuer neue Projekte.)
 *
 * Selektoren bewusst OHNE Kontext-Praefix (kein .post-body), damit universell.
 * In Projekten mit globalen Listen-Bullets ggf. .ab-product__proscons ul/li::before
 * zuruecksetzen (background/border/border-radius:0), sonst doppelte Marker.
 */
:root {
    --ab-accent:      #c4572e;   /* haus100 Ziegel */
    --ab-accent-dark: #9e4220;
    --ab-cta:         #ff9900;   /* Amazon-Button bleibt Amazon-Orange */
    --ab-cta-dark:    #e88b00;
    --ab-cta-text:    #0f0f0f;
    --ab-ink:         #1f2d3a;   /* haus100 Tinte */
    --ab-ink-soft:    #475563;
    --ab-muted:       #6b7682;
    --ab-pro:         #3f6f45;
    --ab-con:         #9e4220;
    --ab-bg:          #fffdf9;
    --ab-line:        #e3d9c9;
    --ab-feedback-bg: #f2eadc;
    --ab-radius:      16px;
}

.ab-product{display:flex;gap:20px;align-items:flex-start;background:var(--ab-bg);
    border:1px solid var(--ab-line);border-left:4px solid var(--ab-accent);
    border-radius:var(--ab-radius);padding:18px 20px;margin:26px 0;color:var(--ab-ink-soft);}
.ab-product__image{flex:0 0 170px;position:relative;background:#fff;border:1px solid var(--ab-line);
    border-radius:10px;padding:10px;text-align:center;}
.ab-product__image img{max-width:100%;height:auto;max-height:180px;object-fit:contain;mix-blend-mode:multiply;}
.ab-product__badge{position:absolute;top:8px;left:8px;background:var(--ab-accent);color:#fff;
    font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;}
.ab-product__badge--nobild{position:static;display:inline-block;margin:0 0 8px;}
.ab-product__body{min-width:0;flex:1;}
.ab-product__title{font-size:19px;font-weight:700;margin:0 0 4px;color:var(--ab-ink);line-height:1.3;}
.ab-product__title a{color:var(--ab-ink);text-decoration:none;}
.ab-product__title a:hover{color:var(--ab-accent-dark);}
.ab-product__brand{display:block;font-size:13px;color:var(--ab-muted);margin:0 0 8px;}
.ab-product__price{font-size:23px;font-weight:800;color:var(--ab-ink);line-height:1.1;margin:0 0 12px;}
.ab-product__price-note{font-size:13px;font-weight:500;color:var(--ab-muted);}
.ab-product__price-stamp{font-size:12.5px;color:var(--ab-muted);margin:-8px 0 12px;}
.ab-product__desc{margin:0 0 14px;}
.ab-product__proscons{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:0 0 14px;}
.ab-product__proscons ul{margin:5px 0 0;padding:0;list-style:none;background:none;border:0;}
.ab-product__proscons li{position:relative;padding:2px 0 2px 22px;font-size:15px;line-height:1.45;}
.ab-product__pros-label,.ab-product__cons-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.ab-product__pros-label{color:var(--ab-pro);}
.ab-product__cons-label{color:var(--ab-con);}
.ab-product__pros li::before,.ab-product__cons li::before{position:absolute;top:0;font-weight:800;font-size:16px;line-height:1.4;}
.ab-product__pros li::before{content:"+";left:2px;color:var(--ab-pro);}
.ab-product__cons li::before{content:"!";left:4px;color:var(--ab-con);}
.ab-product__feedback{font-size:15px;background:var(--ab-feedback-bg);border-radius:8px;padding:11px 14px;margin:0 0 14px;}
.ab-product__verdict{font-size:15px;color:var(--ab-ink);border-left:3px solid var(--ab-accent);padding:2px 0 2px 12px;margin:0 0 16px;}
.ab-product__cta{display:inline-block;background:var(--ab-cta);color:var(--ab-cta-text);font-weight:700;
    padding:12px 26px;border-radius:9px;text-decoration:none;transition:background .15s ease,transform .15s ease;}
.ab-product__cta:hover{background:var(--ab-cta-dark);color:var(--ab-cta-text);transform:translateY(-1px);}
@media(max-width:620px){
    .ab-product{flex-direction:column;gap:14px;}
    .ab-product__image{flex:none;width:100%;max-width:220px;margin:0 auto;}
    .ab-product__proscons{grid-template-columns:1fr;gap:10px;}
    .ab-product__cta{display:block;text-align:center;}
}

/* haus100: Produktabschnitt im Artikel */
.produkte .ab-product + .ab-product { margin-top: var(--s3, 24px); }
.text .ab-product__proscons ul { padding-left: 0; }
.text .ab-product__proscons li + li { margin-top: 4px; }
@media (min-width: 960px) {
	.produkte .ab-product__image { flex-basis: 220px; }
}

/* haus100: Produktkarten, drei nebeneinander über die volle Breite */
.karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3, 24px); }
@media (min-width: 640px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karte {
	display: flex; flex-direction: column; background: var(--ab-bg); color: var(--ab-ink-soft);
	border: 1px solid var(--ab-line); border-top: 4px solid var(--ab-accent); border-radius: var(--ab-radius); overflow: hidden;
}
.karte__bild { position: relative; background: #fff; border-bottom: 1px solid var(--ab-line); padding: 20px; display: grid; place-items: center; height: 230px; }
.karte__bild img { max-width: 100%; max-height: 190px; width: auto; height: auto; object-fit: contain; }
.karte__badge {
	position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--ab-accent); color: #fff;
	font-size: 12px; font-weight: 700; line-height: 1.3; padding: 4px 10px; border-radius: 20px;
}
.karte__rumpf { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.karte__titel { font-size: 1.1875rem; line-height: 1.3; margin: 0 0 4px; }
.karte__titel a { color: var(--ab-ink); text-decoration: none; }
.karte__titel a:hover { color: var(--ab-accent-dark); text-decoration: underline; }
.karte__marke { font-size: 13px; color: var(--ab-muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.karte__preis { font-size: 1.5rem; font-weight: 800; color: var(--ab-ink); line-height: 1.1; margin: 0 0 12px; }
.karte__preis span { font-size: 13px; font-weight: 500; color: var(--ab-muted); }
.karte__text { font-size: 15.5px; line-height: 1.55; margin: 0 0 14px; }
.karte__kopf { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
.karte__kopf--pro { color: var(--ab-pro); }
.karte__kopf--contra { color: var(--ab-con); }
.karte__liste { list-style: none; margin: 0 0 12px; padding: 0; }
.karte__liste li { position: relative; padding: 2px 0 2px 20px; font-size: 14.5px; line-height: 1.45; }
.karte__liste li::before { position: absolute; left: 2px; top: 1px; font-weight: 800; }
.karte__liste--pro li::before { content: "+"; color: var(--ab-pro); }
.karte__liste--contra li::before { content: "!"; left: 5px; color: var(--ab-con); }
.karte__passt { font-size: 14.5px; line-height: 1.5; background: var(--ab-feedback-bg); border-radius: 8px; padding: 10px 12px; margin: 2px 0 16px; }
.karte__passt strong { color: var(--ab-ink); }
.karte__knopf {
	margin-top: auto; display: block; text-align: center; background: var(--ab-cta); color: var(--ab-cta-text);
	font-weight: 700; padding: 13px 20px; border-radius: 9px; text-decoration: none; transition: background .15s ease;
}
.karte__knopf:hover { background: var(--ab-cta-dark); color: var(--ab-cta-text); }
.karten__stand { font-size: 13px; color: var(--ab-muted); margin: var(--s2, 16px) 0 0; }