/* ============================================================
   SHOP_NEU.CSS – ZENTRALES SHOP-DESIGN
   Enthält:
   - Variablen
   - show_artikel Styles (1:1)
   - show_details Styles (1:1)
   ============================================================ */


/* ============================================================
   1) DESIGN-VARIABLEN
   ============================================================ */
:root {
	--shop-first-color: #005a9c;
	--shop-second-color: #005a9c;		
	--shop-light-grey: #cccccc;
	--shop-dark-grey: #333333;
	--shop-black: #000000;
	--shop-white: #ffffff;
    --shop-green: #4ba53b;
    --shop-green-dark: #218838;
    --shop-red: #d52b1e;
    --shop-red-dark: #b22215;
    --shop-product-old: #292929;	
    --shop-border: #ddd;
    --shop-text-dark: #2c3e50;
    --shop-muted: #888;
    --shop-radius: 0px;

	--brand-blue: #005a9c;        /* Hauptfarbe */
	--brand-green: #4ba53b;       /* Akzentfarbe */
	--brand-lightblue: #7fbce6;   /* Sekundärfarbe */
	--gray-soft: #f3f6fa;         /* Content-Hintergrund */
	--gray-dark: #333333;         /* Text */

}

  /* START Buttons für den gesamten Shop */

  button { cursor: pointer; }

  .btn {
	line-height: 20px;
	text-transform: none;
	font-size: 14px;
	font-weight: 700;
	border-radius: var(--shop-radius);
	-webkit-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out; }
  
  .btn:hover { -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; }  
  .btn:focus { -webkit-box-shadow: none; box-shadow: none; }
  
  .btn-shop { background-color: var(--shop-green); border:solid 0px var(--shop-green); color: var(--shop-white); }
  .btn-shop:hover { background-color: var(--shop-second-color); border:solid 0px var(--shop-second-color); color: var(--shop-white); }
  
  .btn-shop-send { background-color: var(--shop-red); border:solid 0px var(--shop-first-color); color: var(--shop-white); }
  .btn-shop-send:hover { background-color: var(--shop-second-color); border:solid 0px var(--shop-second-color); color: var(--shop-white); }
  .btn-shop-send.disabled, .btn-shop-send:disabled { color: var(--shop-black); background-color: var(--shop-second-color); border-color: var(--shop-first-color) }

  .alert-shop { background-color: var(--shop-first-color); opacity:1.0; color: var(--shop-white); border-radius: var(--shop-radius);}
  .infoCCC { background-color: var(--shop-red); opacity:1.0; color: var(--shop-white); margin-top:20x; padding:10px; }
  .infoShop { background-color: var(--shop-red); opacity:1.0; color: var(--shop-white); margin-top:20x; padding:10px; }
  .infoShopSuccess { background: var(--brand-green); color: var(--shop-white); opacity:0.9; padding:15px; margin-top:20px; font-size:16px; border-radius: var(--shop-radius);}

/* ============================================================
   2) SHOW_ARTIKEL – PRODUKTÜBERSICHT (1:1 übernommen)
   ============================================================ */

/* === Basisstruktur für alle Cards === */
.product-card {
  border: 1px solid #ddd;
  border-radius: var(--shop-radius);
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
}

/* === Gemeinsame UI-Elemente === */
.image-wrapper { position: relative; }
.badge-new {
  background: rgba(40,167,69,0.95);
  color: #fff;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: var(--shop-radius);
}
.rating {
  color: #f5c518;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.price-block {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.price-new {
  font-weight: bold;
  color: #2c3e50;
}
.price-old {
  font-size: 0.9rem;
  color: #888;
  margin-left: 6px;
}
.price-new.discount {
  color: #28a745;
  font-size: 1.3rem;
  font-weight: 700;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* === Buttons === */
.btn-details {
  background-color: #28a745;
  color: #fff;
  border: none;
}
.btn-details:hover {
  background-color: #218838;
  color: #fff;
}
.btn-merken {
  background-color: #d52b1e;
  color: #fff;
  border: none;
}
.btn-merken:hover {
  background-color: #b22215;
  color: #fff;
}

/* === Kachelansicht === */
.col-md-3 { display: flex; }
.product-card.kachel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-card.kachel .card-img-top {
  width: 100%;
  height: 250px;
  object-fit: cover;
  padding: 8px;
  box-sizing: border-box;
  border-radius: var(--shop-radius);
}
.product-card.kachel .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
}
.product-card.kachel .card-text {
  line-height: 1.6em;
  max-height: 3.2em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card.kachel .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

/* === Listenansicht === */
.product-card.list {
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: var(--shop-radius);
  overflow: hidden;
  background: #fff;
  min-height: 260px;
}
.product-card.list .image-col {
  max-width: 260px;
  min-width: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color:#FFFFFF;
}
.product-card.list .content-col {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.product-card.list .card-title {
  margin-bottom: 0.5rem;
}
.product-card.list .card-text {
  line-height: 1.6em;
  max-height: 3.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}
.product-card.list .actions {
  width: 100%;
  text-align: right;
}
.product-card.list .actions .btn {
  margin-left: 8px;
}

.image-wrapper,
.image-col,
.col-md-4 {
  background-color: transparent !important;
}

.product-card.list .card-img-top {
  background-color: #fff !important;
  object-fit: contain;
  display: block;
  margin: auto;
  max-height: 190px;
}
.product-card.list .image-col {
  background-color: #fff !important;
}

.lightbox-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border: 4px solid #fff;
  border-radius: var(--shop-radius);
}


/* ============================================================
   3) SHOW_DETAILS – PRODUKTDETAILSEITE (1:1 übernommen)
   ============================================================ */

.produkt-container { font-family: "Segoe UI", sans-serif; max-width: 1200px; margin: 2rem auto; display: flex; flex-direction: column; gap: 2rem; }
.block { background: #fff; padding: 2rem; border-radius: var(--shop-radius); box-shadow: 0 2px 6px rgba(0,0,0,0.1); }

/* Grüner Rahmen */
.block.produkt-header,
.block.produkt-main,
.block.produkt-beschreibung {
  border-bottom: 3px solid #28a745;
}

.produkt-header { font-size: 2.2rem; font-weight: 600; color: #333; padding-bottom: 0.5rem; }
.produkt-main { display: grid; grid-template-columns: 420px 1fr; gap: 2rem; }

/* Galerie */
.produkt-bilder { width: 420px; position: relative; overflow: visible; }
.hauptbild img {
  width: 100%; height: 300px; object-fit: contain;
  border-radius: var(--shop-radius); 
  border: 1px solid #ccc;
  background: #fafafa; 
  cursor: pointer;
}

/* Thumbnails */
.thumbnails button {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--shop-radius);
}
.thumbnails img {
  width: 84px;
  height: 60px;
  object-fit: contain;
  border: 1px solid #ccc;
  border-radius: var(--shop-radius);
  background: #fafafa;
  transition: transform 0.2s ease;
}
.thumbnails img:hover { transform: scale(1.06); }

.thumbnails-wrapper { position: relative; margin-top: 0.75rem; z-index: 5; }
.thumbnails {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
  position: relative;
  z-index: 3;
}
.thumbnails::-webkit-scrollbar { height: 6px; }
.thumbnails::-webkit-scrollbar-thumb { background-color: #ccc; }
.thumbnails::-webkit-scrollbar-track { background: transparent; }

/* Scroll-Pfeile */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 1.2rem;
  z-index: 10;
  opacity: 0.8;
  transition: opacity 0.2s ease;
  display: none;
}
.scroll-arrow:hover { opacity: 1; }
.scroll-arrow.left { left: 0; }
.scroll-arrow.right { right: 0; }

/* Infos rechts */
.produkt-info { display: flex; flex-direction: column; gap: 1.5rem; }

/* Attribute */
.produkt-attribute ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: var(--shop-radius);
  overflow: hidden;
}
.produkt-attribute li {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #eee;
  font-size: 1rem;
}
.produkt-attribute li:nth-child(odd) { background: #f9f9f9; }
.produkt-attribute li:last-child { border-bottom: none; }
.produkt-attribute strong { color: #222; font-weight: 600; }

/* Formular */
.produkt-formular label { font-weight: 500; margin-right: 0.5rem; }
.produkt-formular input[type="number"] { width: 80px; padding: 0.35rem; border: 1px solid #ccc; border-radius: var(--shop-radius); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border: none;
  border-radius: var(--shop-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.1s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-cart { background-color: #28a745; color: #fff; }
.btn-cart:hover { background-color: #218838; }

.btn-wishlist { background-color: #c0392b; color: #fff; }
.btn-wishlist:hover { background-color: #a93226; }

.produkt-buttons { margin-top: 1rem; display: flex; gap: 1rem; }

/* Beschreibung */
.produkt-beschreibung {
  background: #fdfdfd;
  padding: 2rem;
  border-radius: var(--shop-radius);
  border: 1px solid #ddd;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.08);
  line-height: 1.6;
  font-size: 1.05rem;
  color: #333;
}
.produkt-beschreibung h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #28a745;
  margin-bottom: 1rem;
  border-left: 4px solid #28a745;
  padding-left: 0.5rem;
}
.produkt-beschreibung p { margin-bottom: 1rem; }

/* Lightbox */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.lightbox-content { position: relative; }
.lightbox-img { max-width: 90%; max-height: 80vh; }
.lightbox-prev, .lightbox-next, .lightbox-close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  font-size: 1.4rem;
}
.lightbox-prev { left: -50px; }
.lightbox-next { right: -50px; }
.lightbox-close { top: -40px; right: 0; transform: none; }

/* Select */
.produkt-attribute select {
  padding: 0.4rem 0.6rem;
  border: 1px solid #ccc;
  border-radius: var(--shop-radius);
  background-color: #fff;
  font-size: 1rem;
  font-family: inherit;
  min-width: 140px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35 50 L70 85 L105 50' stroke='%23333' stroke-width='15' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 12px;
}

/* Bewertungen */
.review-section {
  margin-top: 2rem;
  padding: 1.5rem;
  border: 1px solid #ddd;
  border-radius: var(--shop-radius);
  background: #fafafa;
}
.review-section h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #28a745;
  margin-bottom: 1rem;
}
.review-block {
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
}
.review-block:last-child {
  border-bottom: none;
}
.review-stars {
  color: #f39c12;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}
.review-meta {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.review-text {
  font-size: 1rem;
  color: #333;
  line-height: 1.4;
}
.product-rating {
  font-size: 1.1rem;
  color: #f39c12;
}
.product-rating span {
  color: #333;
}
.review-pagination {
  margin-top: 1rem;
  text-align: center;
}
.review-pagination .page-link {
  display: inline-block;
  margin: 0 0.3rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccc;
  border-radius: var(--shop-radius);
  color: #333;
  text-decoration: none;
}
.review-pagination .page-link.active {
  background: #28a745;
  color: #fff;
  border-color: #28a745;
}
.review-pagination .page-link:hover {
  background: #f0f0f0;
}

  /* START shop_start */

  .block-content ul li 
  { 
	padding:5px;
    display:inline; 
    list-style-type:none;
    list-style-position: inside;
    border-bottom: 1px solid var(--shop-light-grey);
  }
  
  .block-content a i
  { 
  color: var(--shop-first-color);
  }
  
  .dashboard-left { margin-right:40px; }

/* ============================================
   MOBILE-OPTIMIERUNG shop_start
   ============================================ */
@media (max-width: 767px) {

    /* Linke Spalte über volle Breite */
    .dashboard-left {
        width: 100%;
        margin-bottom: 25px; /* Abstand zum Text */
    }

    /* Rechte Spalte ebenfalls volle Breite */
    .dashboard-right {
        width: 100%;
        margin-top: 10px;
    }

    /* Navigation optisch als eigener Block */
    .dashboard-left .block-content {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 10px;
    }

    .dashboard-left .list-group-item {
        padding: 14px 12px;
        font-size: 1rem;
    }

    /* Begrüßungstext etwas luftiger */
    .welcome-msg .row {
        margin-bottom: 15px;
    }
}

  /* ENDE shop_start */

  /* START shop_wishlist */
  
  .wishlist .headline th{ background-color:var(--shop-first-color); color:var(--shop-white); }
  .wishlist td { border-bottom:var(--shop-light-grey) solid 1px; border-top:var(--shop-light-grey) solid 1px;}
  .wishlist tr { border-bottom:var(--shop-light-grey) solid 1px; border-top:var(--shop-light-grey) solid 1px;}
  
  /* ENDE shop_wishlist */

  /* START shop_auftraege */
  
  .orders .headline th{ background-color:var(--shop-first-color); color:var(--shop-white); }
  .orders td { border-bottom:var(--shop-light-grey) solid 1px; border-top:var(--shop-light-grey) solid 1px;}
  .orders tr { border-bottom:var(--shop-light-grey) solid 1px; border-top:var(--shop-light-grey) solid 1px;}
  
  /* ENDE shop_auftraege */

  /* ENDE shop_edit_user */
  
  .shop-edit-user .form-control {
	  border-color: var(--shop-first-color);
	  margin-bottom: 10px;
	  border-radius: var(--shop-radius);
	  width: 100% !important;
	  display: block !important;
	  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  }
  
  .shop-edit-user .form-control:focus {
	  box-shadow: 0 0 8px rgba(40,167,69,0.4);
	  border-color: var(--shop-red);
  }
  
  /* ENDE shop_auftraege */

  /* ENDE shop_lieferadresser */

  .shop_delivery .form-control {
	  border-color: var(--shop-first-color);
	  margin-bottom: 10px;
	  border-radius: var(--shop-radius);
	  width: 100% !important;
	  display: block !important;
	  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  }
  
  .shop_delivery .form-control:focus {
	  box-shadow: 0 0 8px rgba(40,167,69,0.4);
	  border-color: var(--shop-red);
  }

  .shop_delivery .form-select {
	  border-color: var(--shop-first-color);
	  margin-bottom: 10px;
	  border-radius: var(--shop-radius);
	  width: 100% !important;
	  display: block !important;
	  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  }
  
  .shop_delivery .form-select:focus {
	  box-shadow: 0 0 8px rgba(40,167,69,0.4);
	  border-color: var(--shop-red);
  }

  .shop_delivery { margin-bottom:20px; }
  
  /* ENDE shop_lieferadresse */

  /* START Shop allgemein */
  
  .alert-shop-save { background-color:var(--shop-second-color); color:var(--shop-white); padding:16px; opacity:0.9; margin-bottom:30px; border-bottom:var(--shop-first-color) solid 2px; }
  .alert-shop-danger { background-color:var(--shop-red); color:var(--shop-white); padding:16px; opacity:0.9; margin-bottom:30px; border-bottom:var(--shop-red-dark) solid 2px; }

  .table_lieferdaten { width:100%; }
  .table_bankdaten { width:100%; }
  .table_r_anschrift { width:100%; }
  .table_l_anschrift { width:100%; }
  .table_zahlungsarten { width:100%; }
  .table_zusatz { width:100%; }
  .table_uebersicht { width:100%; }
  .table_agb { width:100%; }
  
  .left { background-color: var(--shop-first-color); color: var(--shop-white); padding:16px; margin-bottom:3px; border-bottom: var(--shop-white) solid 1px; width:70%; }
  .right { background-color: var(--shop-light-grey); color: var(--shop-dark-grey); padding:16px; margin-bottom:3px; border-bottom: var(--shop-white) solid 1px;}

  .left2 { background-color: var(--shop-first-color); color: var(--shop-white); padding:16px; margin-bottom:3px; border-bottom: var(--shop-white) solid 1px; width:95%; }
  .right2 { background-color: var(--shop-light-grey); color: var(--shop-dark-grey); padding:16px; margin-bottom:3px; border-bottom: var(shop-white) solid 1px;}

  .left3 { background-color: var(--shop-first-color); color: var(--shop-white); padding:16px; margin-bottom:3px; border-bottom: var(--shop-white) solid 1px; width:70%; }
  .right3 { background-color: var(--shop-light-grey); color: var(--shop-dark-grey); padding:16px; margin-bottom:3px; border-bottom: var(--shop-white) solid 1px;}

  .left-form { background-color:#508698; color: var(--shop-white); }
  .right-form { background-color: var(--shop-light-grey); color: var(--shop-dark-grey); }
  .preis { font-weight:bold; }
  
  .table_lieferdaten .left2 { background-color: var(--shop-first-color); color: var(--shop-white); padding:16px; margin-bottom:3px; border-bottom: var(--shop-white) solid 1px; width:50%; }

  a.linkcontent { color:#508698; }
  a.linkvertrag { color:#b8508f; text-decoration:underline; }
  a:hover.linkvertrag { color: var(--shop-dark-grey); text-decoration:underline; }
  a:hover.linkcontent { color: var(--shop-black); }

  hr.style {
	  border: 0;
	  height: 1px;
	  background: var(--shop-dark-grey);
	  background-image: linear-gradient(to right, #005a9c, #12511a, #005a9c);
  }

  /* START shop_reg_ek */

  <!-- WICHTIG für Kontaktformular und Shop Registrierung-->
  .shop-reg-page .checkcheck{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
  }

  .reg-bg { margin-bottom:10px; }
  
  .shop-reg-page .form-control { border-color: var(--shop-light-grey) !important; padding:10px; }
  
  .shop-reg-page h4 { font-size:18px; text-transform:uppercase; color: var(--shop-first-color); margin-top:20px; margin-bottom:10px; }
  .shop-reg-page .btn-primary { background-color: var(--shop-first-color); color: var(--shop-white); padding:16px; }
  .shop-reg-page .btn-primary:hover { background-color: var(--shop-second-color); color: var(--shop-white); padding:16px; }

  .shop-info { background-color:var(--shop-second-color); color:var(--shop-white); margin-bottom:0px; padding:10px 10px 10px 10px;}
  .shop-info a {color: var(--shop-white); text-decoration:underline; }
  .shop-info label { color:var(--shop-white); }

  .popover.primary { border-color:#337ab7; }
  .popover.primary>.arrow { border-top-color:#337ab7; }
  .popover.primary>.popover-title { color: var(shop-white); background-color:#337ab7; border-color:#337ab7; }
  .popover.success { border-color:#d6e9c6; }
  .popover.success>.arrow { border-top-color:#d6e9c6; }
  .popover.success>.popover-title { color:#3c763d; background-color:#dff0d8; border-color:#d6e9c6; }
  .popover.info { border-color:#bce8f1; }
  .popover.info>.arrow { border-top-color:#bce8f1; }
  .popover.info>.popover-title { color:#31708f; background-color:#d9edf7; border-color:#bce8f1; }
  .popover.warning { border-color:#faebcc; }
  .popover.warning>.arrow { border-top-color:#faebcc; }
  .popover.warning>.popover-title { color:#8a6d3b; background-color:#fcf8e3; border-color:#faebcc; }
  .popover.danger { border-color:#ebccd1; }
  .popover.danger>.arrow { border-top-color:#ebccd1; }
  .popover.danger>.popover-title { color:#a94442; background-color:#f2dede; border-color:#ebccd1; }
  
  .alert-error { background-color:var(--shop-red); opacity:1.0; color: var(--shop-white); }
  
  /* ENDE shop_reg_ek */  

  /* START shop_zahlungsarten & shop_direkt_zahlungsarten */
  
  .w-30 { width:30px; }
  
  /* ENDE shop_zahlungsarten & shop_direkt_zahlungsarten */  

  /* ============================================
	 FORMULAR shop_lieferdaten – Modern, Eckig, Mobile
	 ============================================ */
  
  .form-section {
	  margin-bottom: 30px;
  }
  
  .form-row {
	  display: flex;
	  gap: 20px;
	  margin-bottom: 20px;
  }
  
  .form-field {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
  }
  
  .form-field.small {
	  flex: 0 0 150px;
  }
  
  .form-field label {
	  font-weight: 600;
	  margin-bottom: 6px;
  }
  
  .form-field input {
	  border: 1px solid #ccc;
	  border-radius: 0;          /* <<< KEINE ABGERUNDETEN ECKEN */
	  padding: 10px 12px;
	  font-size: 1rem;
  }
  
  /* Textarea ebenfalls eckig */
  textarea.form-control,
  textarea.noBorder {
	  border-radius: 0 !important;   /* <<< WICHTIG */
  }
  
  /* MOBILE */
  @media (max-width: 767px) {
  
	  .form-row {
		  flex-direction: column;
		  gap: 15px;
	  }
  
	  .form-field.small {
		  flex: 1;
	  }
  
	  .form-field input {
		  font-size: 1rem;
		  padding: 12px;
	  }
  }

  /* ============================================
	 FORMULAR shop_lieferdaten – Modern, Eckig, Mobile ENDE
	 ============================================ */

  /* START breadcrumb */

  .checkout-steps {
	  margin: 20px 0;
  }
  
  .breadcrumb-steps {
	  display: flex;
	  justify-content: space-between;
	  padding: 0;
	  margin: 0;
	  list-style: none;
  }
  
  .breadcrumb-steps .step {
	  flex: 1;
	  text-align: center;
	  padding: 10px 5px;
	  background: #e9ecef;
	  font-size: 13px;
	  color: #333;
	  border: 1px solid #ccc;
	  border-right: none;
  }
  
  .breadcrumb-steps .step:last-child {
	  border-right: 1px solid #ccc;
  }
  
  .breadcrumb-steps .step.active {
	  background: var(--brand-green);
	  color: var(--shop-white);
	  font-weight: bold;
	  text-transform:uppercase;
  }
 
  .breadcrumb-steps .step a {
	  color: var(--shop-black);
	  font-weight:bold;
	  text-transform:uppercase;
  }

  .breadcrumb-steps .step a:hover {
	  color: var(--brand-blue);
	  font-weight:bold;
	  text-transform:uppercase;
  }
  
  /* ENDE breadcrumb */
    
  .bg-red { background-color: var(--shop-first-color);}
   h3 { color: var(--shop-white);}
   li > i { color: var(--shop-first-color); }
  .border-bottom { border-bottom: var(--shop-light-grey) solid 1px; height:60px; line-height:60px; }

  /* Produkt Slider HOME*/
  .pt-30 { padding-top:30px; }
  .price-new { color: var(--shop-first-color); }
  .price-old { color: var(--shop-product-old); }
  
  .login { color: var(--shop-white); margin-right:8px;}

  .alert-info { background-color:#db3f3f; opacity:0.9; color: var(--shop-white);}
  .alert-success { background-color: var(--brand-green); opacity:0.9; color: var(--shop-white); border-radius: var(--shop-radius);}
  label { font-weight:bold; color: var(--shop-black); }
  .invalid-feedback { color: var(--shop-black); margin-left:15px; margin-top:6px;}
  .linkDatenschutz { color: var(--shop-black); text-decoration:underline; }

  .rot { color: var(--shop-red); }

  .blur-up {
	  -webkit-filter: blur(5px);
	  filter: blur(5px);
	  transition: filter 400ms, -webkit-filter 400ms
  }
  .blur-up.lazyloaded {
	  -webkit-filter: blur(0);
	  filter: blur(0)
  }

  /* START shop_bestellungen */

  .alert-shop .form-check-label {
	  margin-left: 8px;
	  color: #fff; /* oder eine andere passende Farbe */
  }

  .alert-shop .form-check-input {
	  margin-top: 2px;
  }

  /* START shop_kasse */
  
  /* ========================================================================
	 WICHTIGER HINWEIS – BITTE LESEN
	 ========================================================================
	 Dieser komplette CSS‑Block steuert das Layout des Warenkorbs
	 (cart-wrapper, cart-item, ci-col, mobile Darstellung usw.).
  
	 Obwohl der Selektor ".shop_kasse" heißt, wird dieses Layout
	 NICHT nur in der Seite "shop_kasse" verwendet.
  
	 ► shop_kasse  UND  shop_bestellen  verwenden BEIDE dieses CSS.
	 ► shop_bestellen hat deshalb ebenfalls einen Wrapper <div class="shop_kasse">.
	 ► Der Name ".shop_kasse" bleibt aus historischen Gründen bestehen.
	 ► NICHT umbenennen, NICHT duplizieren – beide Seiten teilen sich diesen Block.
  
	 Wenn du in Zukunft Änderungen am Warenkorb Layout machst,
	 musst du sie HIER durchführen, damit shop_kasse UND shop_bestellen
	 identisch aussehen und mobil sauber funktionieren.
	 ======================================================================== */

  /* ============================================================
	 SHOP_KASSE – Grundstruktur
	 ============================================================ */
  .shop_kasse .cart-wrapper {
	  width: 100%;
  }
  
  /* ============================================================
	 HEADLINE (nur Desktop)
	 ============================================================ */
  .shop_kasse .cart-header {
	  background: var(--brand-green);
	  padding: 10px 0;
	  font-weight: 700;
	  color: var(--shop-white);
	  border-bottom: 2px solid var(--brand-blue);
  }
  
  .shop_kasse .cart-header .ch-col {
	  padding: 0 10px;
	  white-space: nowrap;
  }
  
  /* Standardbreiten der Headline */
  .shop_kasse .cart-header .ch-image  { width: 90px; }
  .shop_kasse .cart-header .ch-article { flex-grow: 1; }
  .shop_kasse .cart-header .ch-price  { width: 120px; text-align: right; }
  .shop_kasse .cart-header .ch-qty    { width: 100px; text-align: center; }
  .shop_kasse .cart-header .ch-action { width: 60px;  text-align: center; }
  .shop_kasse .cart-header .ch-total  { width: 120px; text-align: right; }
  
  /* ============================================================
	 DESKTOP (ab 768px)
	 ============================================================ */
  @media (min-width: 768px) {
  
	  /* Artikelzeile */
	  .shop_kasse .cart-item {
		  display: flex;
		  align-items: center;
		  border-bottom: 1px solid #ddd;
		  padding: 12px 0;
	  }
  
	  .shop_kasse .ci-col {
		  padding: 0 10px;
		  white-space: nowrap;
	  }
  
	  /* Bild */
	  .shop_kasse .ci-image {
		  width: 90px;
		  flex-shrink: 0;
	  }
  
	  .shop_kasse .ci-image img {
		  width: 100%;
		  height: auto;
	  }
  
	  /* Artikeltext */
	  .shop_kasse .ci-article {
		  flex-grow: 1;
		  white-space: normal;
	  }
  
	  /* Menge + Refresh → immer in einer Zeile */
	  .shop_kasse .ci-qty {
		  width: 110px;
		  min-width: 110px;
		  text-align: center;
		  display: flex;
		  justify-content: flex-end;
		  align-items: center;
		  gap: 8px;
		  white-space: nowrap;
	  }
  
	  /* Löschen */
	  .shop_kasse .ci-delete {
		  width: 60px;
		  min-width: 60px;
		  text-align: center;
		  flex-shrink: 0;
	  }
  
	  /* Gesamtpreis */
	  .shop_kasse .ci-total {
		  width: 130px;
		  min-width: 130px;
		  text-align: right;
		  flex-shrink: 0;
	  }
  }
  
  /* ============================================================
	 Refresh bei Konfigurator komplett ausblenden
	 ============================================================ */
  .shop_kasse .ci-refresh.disabled {
	  display: none !important;
  }

@media (max-width: 767px) {

    /* Karte */
    .shop_kasse .cart-item {
        display: block;              /* statt flex */
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 15px;
        background: #fff;
    }

    /* Bild eigene Zeile */
    .shop_kasse .ci-image {
        width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: left;
        margin-bottom: 10px;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 10px;
    }

    .shop_kasse .ci-image img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }

    /* Artikelinfos eigene Zeile */
    .shop_kasse .ci-article {
        width: 100%;
		align-items: left;
        margin: 10px 0;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 10px;
    }

    .shop_kasse .ci-price {
        font-weight: bold;
		display: flex;
		justify-content: flex-start;
		align-items: left;
    }

    .shop_kasse .ci-qty {
		display: flex;
		justify-content: flex-start;
		align-items: left;
		gap: 8px;
		white-space: nowrap;
    }

    .shop_kasse .ci-qty-select {
        width: 70px;
    }

    .shop_kasse .ci-refresh.disabled {
        display: none !important;
    }

    /* Trennlinie unter der 3er-Zeile */
    .shop_kasse .ci-delete {
		display: flex;
		justify-content: flex-start;
		align-items: left;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    /* Gesamtpreis unten groß + farbig */
    .shop_kasse .ci-total {
		display: flex;
		justify-content: flex-end;
		align-items: right;
        font-size: 1.3rem;
        font-weight: bold;
        color: #006600;
        margin-top: 5px;
    }
}

@media (max-width: 767px) {

    /* Karte */
    .shop_kasse .cart-item {
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 15px;
        background: #fff;
    }

    /* 1️⃣ Bild in eigener Zeile (links, nicht mittig) */
    .shop_kasse .ci-image {
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }

    .shop_kasse .ci-image img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }

    /* 2️⃣ Trennlinie */
    .shop_kasse .ci-image {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 10px;
    }

    /* 3️⃣ Artikelbeschreibung */
    .shop_kasse .ci-article {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .shop_kasse .ci-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .shop_kasse .ci-partno {
        font-size: 0.85rem;
        color: #777;
        margin-bottom: 6px;
    }

    /* 4️⃣ Trennlinie */
    .shop_kasse .ci-article {
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 10px;
    }

    .shop_kasse .ci-price {
        width: 100%;
        font-weight: bold;
        text-align: left;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 10px;
    }

    .shop_kasse .ci-qty {
        width: 100%;
        text-align: left;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 10px;
		padding-top:10px;
    }

    .shop_kasse .ci-qty-select {
        width: 70px;
    }

    .shop_kasse .ci-refresh.disabled {
        display: none !important;
    }

    .shop_kasse .ci-delete {
        width: 100%;
        text-align: left;
		border-bottom: 1px solid #e5e5e5;
		padding-bottom: 10px;
		padding-top: 10px;
    }

    .shop_kasse .ci-delete i {
        font-size: 1.4rem;
        color: #c00;
    }

    /* 6️⃣ Trennlinie */
    .shop_kasse .ci-row-pricing {
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 10px;
    }

    /* 7️⃣ Gesamtpreis groß + farbig */
    .shop_kasse .ci-total {
        font-size: 1.3rem;
        font-weight: bold;
        color: #006600;
        margin-top: 5px;
    }
}
  
  /* ============================================================
	 Allgemeine Styles
	 ============================================================ */
  .shop_kasse .ci-title {
	  font-weight: 600;
  }
  
  .shop_kasse .ci-partno {
	  font-size: 0.85rem;
	  color: #777;
  }
  
  .shop_kasse .ci-price-alt {
	  font-size: 0.8rem;
	  color: #999;
	  text-decoration: line-through;
  }
  
  .shop_kasse .ci-del-btn i {
	  color: #c00;
  }
  
  .shop_kasse .ci-refresh i {
	  color: #444;
  }

@media (max-width: 767px) {

  /* Buttons unten: volle Breite, kein Padding, kein Bootstrap-Offset */
  .shop_kasse .row.mb-3.mt-3 {
	  margin-left: 0 !important;
	  margin-right: 0 !important;
  }

  .shop_kasse .row.mb-3.mt-3 > [class^="col-"],
  .shop_kasse .row.mb-3.mt-3 > [class*=" col-"] {
	  padding-left: 0 !important;
	  padding-right: 0 !important;
	  flex: 0 0 100% !important;
	  max-width: 100% !important;
	  width: 100% !important;
	  text-align: center;
	  margin-bottom: 10px;
  }

  .shop_kasse .row.mb-3.mt-3 .btn {
	  width: 100% !important;
	  text-align: center !important;
	  display: block !important;
  }
}

/* ============================================
   Checkout Buttons – Desktop & Mobile
   ============================================ */

.checkout-buttons {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0;
}

/* Desktop: Buttons nebeneinander */
.checkout-buttons .btn-left,
.checkout-buttons .btn-right {
    flex: 1;
}

/* Mobile: Buttons untereinander, 100% Breite */
@media (max-width: 767px) {

    .checkout-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .checkout-buttons .btn-left,
    .checkout-buttons .btn-right {
        width: 100%;
    }
}