<style>
.shop-page * { box-sizing: border-box; }
.shop-page { font-family: system-ui, sans-serif; color: #222; }

/* Header */
.shop-page .shop-header {
  display: flex; justify-content: space-between; align-items: center;
  background: #007a5e; color: #fff; padding: 15px 20px; border-radius: 8px;
}
.shop-page .shop-header h1 { margin: 0; font-size: 20px; }
.shop-page .warenkorb-info {
  background: #fff; color: #007a5e; padding: 6px 12px; border-radius: 20px; font-weight: bold; border: none; cursor: pointer;
}

/* Filter */
.shop-page .filter {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0;
  background: #fff; border: 1px solid #ddd; padding: 10px; border-radius: 8px;
}
.shop-page .filter label { display: flex; gap: 8px; align-items: center; }
.shop-page .filter select, .shop-page .filter button {
  padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; background: #fff;
}
.shop-page .filter .reset { margin-left: auto; color: #007a5e; text-decoration: none; }

/* Produktgrid */
.shop-page .shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;
  max-width: 1200px; margin: 0 auto;
}
.shop-page .produkt {
  background: #fff; border: 1px solid #ccc; padding: 15px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
}
.shop-page .produkt img { width: 100%; height: auto; margin-bottom: 10px; border-radius: 6px; }
.shop-page .produkt .kbadge {
  display:inline-block; font-size:12px; color:#007a5e; background:#e6f4ea; padding:3px 8px; border-radius:12px; margin-bottom:8px;
}
.shop-page .produkt h3 { font-size: 16px; margin: 6px 0; }
.shop-page .produkt p { margin: 0 0 10px; }
.shop-page .preis { font-weight: bold; margin-top: 4px; }
.shop-page .btn {
  background: #007a5e; color: #fff; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; margin-top: 8px;
}
.shop-page .btn:hover { background: #00614c; }

/* Footer */
.shop-page .shop-footer { margin-top: 40px; text-align: center; color: #555; }

/* Modal */
.shop-page .modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index: 999; }
.shop-page .modal {
  display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; padding:20px; max-width:860px; width:95%; border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.2); z-index: 1000;
}
.shop-page #descModal header { font-weight:bold; margin-bottom:12px; font-size:18px; }
.shop-page #descModal .modal-content { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; }
.shop-page #descModal .modal-image { flex: 0 0 260px; max-width: 260px; }
.shop-page #descModal .modal-image img { width: 100%; height: auto; display: block; border-radius: 6px; }
.shop-page #descModal .modal-text { flex: 1; max-height: 60vh; overflow-y: auto; line-height: 1.6; padding-right: 10px; position: relative; }
.shop-page #modalCartForm { position: sticky; bottom: 0; background: #fff; padding: 10px 0; border-top: 1px solid #ddd; }
.shop-page #modalCartForm .btn { margin-top: 0; width: 100%; }
.shop-page #descModal .actions { margin-top: 15px; text-align: right; }
.shop-page #descModal .actions button { padding: 8px 12px; }
@media (max-width: 640px) { .shop-page #descModal .modal-content { flex-direction: column; } }
</style>
