/* ==========================================================================
   Erfolg beginnt im Kopf · Shop Seite
   Ergänzt robar.css, ändert dort nichts.
   Artikel mit CSS Klasse "shop-raster". Jedes Produkt ist eine Elementgruppe
   mit CSS Klasse "produkt" (Onlinekurs: "produkt kurs").
   ========================================================================== */

/* Raster: Überschriften und Einleitung über die volle Breite, Bücher nebeneinander */
#main .shop-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch}
#main .shop-raster > *{grid-column:1 / -1;margin-bottom:0 !important}
#main .shop-raster > .produkt{grid-column:auto}

/* Produktkarte: Elementgruppe mit CSS Klasse "produkt",
   darin ein Textelement (Bild, Titel, Preis, Text) und ein Hyperlink (Button) */
#main .produkt{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie,#E5E5E5);border-radius:14px;padding:24px 22px 22px;text-align:center;transition:box-shadow .2s,transform .2s}
#main .produkt:hover{box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-2px)}
#main .produkt::after,#main .produkt > *::after{display:none}
#main .produkt > *{margin:0 !important}
#main .produkt > .content-text{flex:1;display:flex;flex-direction:column}
#main .produkt figure{float:none !important;max-width:100% !important;margin:0 0 18px !important;order:-1}
#main .produkt img{display:block;width:auto;max-width:100%;height:260px;object-fit:contain;margin:0 auto;box-shadow:0 4px 14px rgba(0,0,0,.12)}
#main .produkt h2,#main .produkt h3{font-size:21px !important;line-height:1.3;margin:0 0 10px !important}
#main .produkt p{margin:0 0 10px}
#main .produkt p:last-child{margin-bottom:0}
#main .produkt p strong{color:var(--orange,#FF6100)}

/* Hyperlink in der Karte wird zum Button, unten bündig */
#main .produkt .content-hyperlink{margin-top:auto !important;padding-top:16px;text-align:center}
#main .produkt .content-hyperlink a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 22px;background:var(--orange,#FF6100);color:#fff;font-family:var(--schrift,'Ubuntu',sans-serif);font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;border:0;border-radius:2px;transition:background .15s}
#main .produkt .content-hyperlink a:hover,#main .produkt .content-hyperlink a:focus{background:var(--orange-dunkel,#C94D00);color:#fff}
#main .produkt .content-hyperlink a[target="_blank"]::after{content:"";width:14px;height:14px;margin-left:8px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat}

/* Onlinekurs: Karte über die volle Breite, weitere Überschriften mit Abstand nach oben */
#main .shop-raster > .produkt.kurs{grid-column:1 / -1}
#main .produkt.kurs{padding:28px 28px 26px}
#main .produkt.kurs img{height:220px}
#main .shop-raster > .content-headline:not(:first-child){margin-top:24px !important}

/* Warenkorbsymbol im Menü auch, wenn die Shop Seite gerade aktiv ist */
#hauptmenue .shop > strong{display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:0}
#hauptmenue .shop > strong::before{content:"";display:block;width:24px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20l-2.2 11.2a1.5 1.5 0 0 1-1.5 1.3H5.7a1.5 1.5 0 0 1-1.5-1.3z'/%3E%3Cpath d='M7 8l4-6M17 8l-4-6M8 12v5M12 12v5M16 12v5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h20l-2.2 11.2a1.5 1.5 0 0 1-1.5 1.3H5.7a1.5 1.5 0 0 1-1.5-1.3z'/%3E%3Cpath d='M7 8l4-6M17 8l-4-6M8 12v5M12 12v5M16 12v5'/%3E%3C/svg%3E") center/contain no-repeat}

/* Tablet und Handy: Produkte untereinander */
@media (max-width:640px){
  #main .shop-raster{grid-template-columns:1fr}
  #main .produkt img{height:220px}
}
@media (prefers-reduced-motion:reduce){#main .produkt,#main .produkt:hover{transition:none;transform:none}}