html {height:100%; scroll-behavior: smooth;}
*, ::before, ::after {box-sizing: border-box;}
* {padding:0; margin:0; box-sizing: border-box;}

@font-face {
  font-family: 'SFPRODISPLAYMEDIUM'; 
  src: url(/templates/standard_theme/fonts/SFPRODISPLAYMEDIUM.ttf) format('truetype');
  font-style: normal; 
}

:root {--seitenbreite: 1500px;}
:root {--blaueborderfarbe: #00c3ff;}
:root {--blauehintergrundfarbe: #e9f5ff;}

img {display: block; max-width: 100%; width:100%; height:auto;}
body {font-family: 'SFPRODISPLAYMEDIUM'; font-weight: 100; line-height: 150%; font-size:0.9rem; width: 100%;overflow-x: hidden;}
small {display:block;}
p {font-family: sans-serif;}
h1 {line-height: 1.07143; font-size: 55px; margin-bottom: 23px; color: #000000;}
h2 {line-height: 1.07143; font-size: 30px; letter-spacing: 1px; margin-bottom: 10px;}
ul {margin-left: 13px;}

h4 {color: rgb(0 0 0 / 90%); font-size: 12px; font-weight: 400; margin-bottom: 10px;}


header {align-items: center; max-width: var(--seitenbreite); margin:0 auto;}
#main-navigation-top {max-width: var(--seitenbreite) !important;}

.breadcrumb {padding: 5px 0; margin-bottom: 20px; margin: 0 auto; max-width: var(--seitenbreite);}
.breadcrumbs {list-style: none;padding: 0 30px;margin: 0;  display: flex;  flex-wrap: wrap;  align-items: center; font-size: 0.85rem; color: #666;}
.breadcrumbs li {display: flex; align-items: center;}
.breadcrumbs a {color: #b0b0b0; text-decoration: none; transition: color 0.2s;}
.breadcrumbs a:hover {color: #000000; text-decoration: underline;}
.breadcrumbs .sep {margin: 0 8px; color: #ccc; font-weight: 300;}
.breadcrumbs .current {color: #333; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  max-width: 300px;}

#open-user {display: flex; margin:-2px 0 0 0; gap:5px;}
.sorting-container {display: flex;justify-content: flex-end; width: 100%; margin-bottom: 30px;
& label {text-align: right;}
}

.mainnavi {display:flex; gap:10px;}
.maincontent {max-width: var(--seitenbreite); margin:0 auto; padding:31px;}

.cart_icon{max-height:20px;width: auto;margin-right: 2px;}
.copyright {text-align: center;}
.mb20 {margin-bottom: 20px;}
.mt20 {margin-top: 20px;}
.mt45 {margin-top: 45px;}
.mb40 {margin-bottom: 40px;}
.mt40 {margin-top: 40px;}
.cfc, .cfs  {display:flex; justify-content: center; flex-wrap: wrap; margin:0 auto; max-width: var(--seitenbreite); gap:50px;}
.cfsb {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; max-width: var(--seitenbreite); margin: 0 auto; gap:5px; width: 100%;}

.tac {text-align: center;}
.text-center {text-align: center;}
.gap5 {gap:5px;}
.gap10 {gap:10px;}
.gap20 {gap:20px;}

a, button {font-family: 'SFPRODISPLAYMEDIUM'; text-decoration: none; transition: all .3s ease;}
a:hover, button:hover {transition: all .3s ease;}

.contentbereich, .area {max-width: var(--seitenbreite); margin:0 auto;}
.contentbereich_inner, .area_inner, .area_inner_images {
  margin: 0 0 20px; background:#f2f2f2; padding: min(100px, 10%); border-radius: 20px;
  & .headline {padding:0 2%; margin-bottom: 2%;}
  & p {margin-bottom: 10px;}  
  @media (width < 700px) {
    padding: min(10px, 1%); padding-top:40px;font-size: 12px;
  }
}
.area_inner_images, .area_inner2 {padding:0; border-radius: 20px;background: transparent;}

.headline {margin:100px auto; }

.center {text-align: center;}
.flex500 {flex: 1 1 500px; margin: 0; & p {font-family: sans-serif;}}
.flex1000 {flex: 1 1 100%; margin: auto;}
.flex100 {flex: 1 1 100px; margin: 0; }
.flex50 {flex: 1 1 50px; margin: 0;}
.flex20 {flex: 1 1 20px; margin: 0;}
.flex200 {flex: 1 1 200px; margin: 0;}
.flex300 {flex: 1 1 300px; margin: 0;}
.flex800 {flex: 1 1 800px; margin: 0;}
@media (width < 500px) {
  .flex500 {margin: 0 0 30px;}
}
.flex-item {flex:1 1 500px;}

.title_bereich {padding:min(50px,5%); text-align: center;}

.product-item {flex:1 1 300px; max-width:340px; margin: 0; text-align: center; transition: all .3s ease; display: flex; flex-direction: column; justify-content: space-between;
  & .productpic {width: 100%; overflow: hidden; position: relative;border-radius: 20px; margin-bottom: 20px;}
  & h3, .circle {font-weight: 500; font-size: 16px; font-family: sans-serif;}
  & .short_description, .shipping-info-listing {font-weight: 100;font-family: sans-serif;font-size: 14px;line-height: 20px;padding: min(4px,1%); max-width: 249px; margin: 10px auto;}
  & .divider {width:100px; border-top:1px solid rgba(0,0,0,.1); margin:5px auto;}
  & .infos {display:flex; flex-direction: column; justify-content: space-between; padding: min(25px,5%);border-bottom-left-radius: 20px;border-bottom-right-radius: 20px; }
  & a {font-size:16px; color:#222;}
  & .price {font-size: 16px; color:#222;font-family: 'SFPRODISPLAYMEDIUM'; margin: 0 auto;}
  & svg {margin:0 auto; box-sizing:unset; border-radius: 50px; scale: 1.5; transition: all .3s ease;transform: rotate(-90deg);}

}
/*
.product-item:hover {scale:1.03; background:#2d2d2d; color:#fff; transition:all .5s ease; & h3, .price {color:#fff;transition:all .5s ease;}}
.product-item:hover svg {
  stroke: #fff;
  transition: all 0.3s ease-in-out;
  animation: aniborder 1s linear;
}
@keyframes aniborder {
  0% {box-shadow: 0 0 0 0 rgba(255,255,255,.1);}
  50% {box-shadow: 0 0 0 5px rgba(255,255,255,.5);}
   100% {box-shadow: 0 0 0 10px transparent;}
  }
  */

.fenster {margin-bottom: 40px;}

/* WARENKORB */ 
.cardlist {margin-bottom: 20px;}

.cardlist_container {display:flex; justify-content:space-between; align-items:center; padding:min(9px,1%); flex-wrap:nowrap;
& .bild {width: 60px;}
& .produktname {width: 300px; padding:0 5px; text-align: left;}
& .aktionen {width: 65px;}
& .einzelpreis {width: 100px;}
& .summe {width: 100px;}
& .sku-display {font-size: 12px;}
}
.fenster .cardlist_container:nth-child(even) {background:rgb(0 0 0 / 3%)}

#card_overview {margin:0;
  @media (width < 500px) {
    .cardlist_header {display: none;}
  }
}

.card {border-radius: 20px; background:#fff; padding:min(30px,7%); flex:1 1 200px; color:#222; max-width: 400px; min-width: 300px;}

/* B U T T O N S buttons */

.btn {background: transparent; height:30px; border: 1px solid rgba(0,0,0,.2);color: rgba(0,0,0,.5);font-family: sans-serif;font-size: 12px;font-weight: 400;padding: 7px 20px;display: inline; border-radius: 50px;transition: all .3s ease;}
.btn:hover {background:#000; color:#fff; scale:1.1;}
.btn_checkout_address {margin-left: 0;}
.btn_back {background:transparent; border:2px solid #222; color:#222;}
.btn_small {padding:2px 10px;height:20px;margin:2px auto;font-size: 12px;}
.btn_delete {background: #d6496e;}
.btn_warenkorb:disabled {background-color: #ccc; border-color: #bbb; color: #888; cursor: not-allowed; opacity: 0.6;}
.btn-secondary {background:transparent; border:2px solid #222; color:#222;}



/* INPUTFELDER */ 


input, textarea {font-family: sans-serif;
  font-weight: 400;
  border-radius: 5px;
  padding: 0 15px;
  line-height: 20px;
  z-index: 2;
  position: inherit;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 18px;
  border:0;
  background: #f9f9f9;
  outline:1px solid #c6c6c6;
  transition: all .3s ease;}

  input:hover, textarea:hover {outline: 1px solid var(--blaueborderfarbe);background: var(--blauehintergrundfarbe);}

  label {display: block; margin: 0 0 5px 0; font-size: 13px; color:#cecece; line-height: 16px; transition: all .3s ease;}
  label:hover {color:#000;}
  input:hover label {color:#000;}
  textarea {border-radius: 8px; font-size:14px;}
  .price {max-width: 130px;}
  .description {min-height: 180px;}
  input[type="checkbox"] {width: auto; margin:0; box-shadow: none;}
  input:focus, select:focus, textarea:focus {outline: 1px solid var(--blaueborderfarbe); background: var(--blauehintergrundfarbe);box-shadow: 0 4px 8px rgba(0,123,255,0.2); border: 1px solid transparent;}
  input::placeholder, textarea::placeholder {color:#ccc;}
  input {height:38px;}

  select {font-size: 15px; display: block; padding: 10px 35px 10px 15px; color: #262958; border: 1px solid #c6c6c6; border-radius: 8px; cursor: pointer;  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;
    background:#f2f2f2 url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%204%205%22%3E%3Cpath%20fill%3D%22%23444%22%20d%3D%22M2%200L0%202h4zm0%205L0%203h4z%22%2F%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat; background-position: right 10px center; background-size: 8px 10px; margin-bottom: 10px;}

    .input-group {position:relative;
    .eye, .btn-outline-secondary {position: absolute;right: 10px;z-index: 2;top: 7px; border:0; background:transparent; cursor: pointer; margin:0; padding:0; top:0;}
  }

  .text-danger {color:rgb(231, 57, 109);}
/* ADMIN - ICONS */

.icons{max-height: 20px;width: auto;}
.icon {border: 0;display: inline-flex;justify-content: center; align-items: center; height: 30px; border-radius: 50px; background: #222; color: #fff; cursor: pointer; width: 30px; padding: 7px; margin: 1px;}
.icon:hover {scale:1.3;}
.icon_loeschen {background:rgb(231, 57, 109);}


.toast {position: fixed; top: 00px; right: 20px; padding: 15px;
  background:  linear-gradient(23deg, rgb(30 255 221) 0%, rgb(0 188 250) 100%);
  color: white; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  opacity: 0; transition: opacity 0.5s, transform 0.5s;
  transform: translateY(-50px);
  z-index: 1000;}

  #toast-container .toast.info {
    background: linear-gradient(23deg, rgb(30 255 221) 0%, rgb(0 188 250) 100%);
    color: white;
}

#toast-container .toast.success {
    background: linear-gradient(23deg, rgb(30 255 221) 0%, rgb(0 188 250) 100%);
    color: white;
}
  
  .radiobutton_box {padding: 10px; margin-bottom: 30px;}
  
  #checkout_address_form, 
  #checkout_payment_form, 
  #checkout_shipping_form,
  #checkout_confirmation {
    & .contentbereich_inner {
      background:#ccccde;
    }
    & .input_element {max-width:500px;}
  }
  
  span.cart-item-count {font-size: 13px;font-weight: 400;}
  .shipping-option, .payment-option {margin:20px 0;}
  .box_jetzt_kaufen {padding: 30px; border-radius: 20px; border: 1px solid #222; margin: 20px;}
  
  #plusminus {border:1px solid #ccc; height:30px; display: flex; justify-content: center; align-items: center; width:140px;
    & button {flex:1 1 25%; min-width:30px; height:100%; border:0; width:33%; padding:3px; cursor: pointer;}
    & .plusminusinput {flex:1; width:50%; min-width: 70px; border:0;height:100%;margin:0; border-radius:0;}
  }
  

  
  .wkbutton_group {display: flex; justify-content:center; align-items: center; flex-wrap: wrap; flex-direction: column; max-width: 400px; margin:20px auto; 
    & .item:nth-child(1) {padding:0 5px; white-space: nowrap; & label {padding:0 5px;font-size: 13px;color: #919191;letter-spacing: .5px; text-transform: uppercase;}}
    & .item:nth-child(2) {padding:0; width: 100%;}
    & .btn_warenkorb {width: 100%;}
    & input {height:100%; border:1px solid #ccc; width: 50px; height: 25px; padding:0 4px; border-radius: 3px;}
    & button {padding: 0; margin: 5px 0 0 0; width: 100%;}
    
}

/* PRODuKT LISTING */ 

.product-info-listing {margin-top:auto;}

.product-detail {gap:50px;}

#product_details {padding: 0;
  & h1 {margin-bottom:50px;}
  & .main-image img {border-radius: 20px;}
  & .price {font-size:20px;}
  & .tax-info, .shipping-info {font-size:13px; font-family: sans-serif;}
  & .short_description {margin:20px 0; }
  & .base-price-text {font-weight:100;font-size: 13px;}
}

@media (width > 1067px) {
  #product_details .container {margin: 0 0 0 auto;}
}

.product_info2 {margin-top: 100px;
  & .leftside {flex: 1 1 300px; min-width: 300x;}
  & .rightside {flex: 1 1 300px; min-width: 300px; max-width: 400px;}
  & .brand-name {margin-right: auto;}
  & .brand-logo img {max-width: 100px; max-height: 50px; object-fit: contain; border-radius:3px;}
}

.manufacturer-info-box {font-size: 13px; font-family: sans-serif;}

.inputcard {
  border-radius: 10px;
  border: 1px solid #e4edf0;
  padding: 15px 10px 17px 11px;
  box-shadow: 0 17px 20px -15px rgba(0,0,0,.04);
  background: #f4f7f8;
  display: flex;
  flex-direction: column;
  min-width: 100%;
  margin-bottom: 20px;
  flex-wrap: wrap;
  & label, small {font-size:11px; font-family: sans-serif; color:rgba(0,0,0,.5);}
  
}

@media (width < 800px) {
  .contentbereich_inner {padding:0;margin:0; background:transparent;}
  & .cardlist_header{display: none;}
  .cardlist_container {padding: min(2px,1%); font-size:13px;
  & .produktname {max-width: 300px; width:140px}
  & .aktionen {width: 38px;}
  & .summe,.einzelpreis {width: 65px;}
  }
}

@media (width < 520px) {
  .cardlist_container {flex-wrap: wrap;background: rgb(0 0 0 / 3%); margin-bottom: 10px; padding:20px; border-radius: 20px;flex-direction:column; font-size:14px; white-space: nowrap;
    & .produktname {order:1; width: 100%; text-align: center;}
    & .bild {order:2}
    & .einzelpreis {order:3}
    & .menge {order:4}
    & .summe {order:5}
    & .aktionen {order:6}

  }
  
}

  @media (width < 650px) {
    h1 {font-size:40px;}
  }

  @media (width < 450px) {
    h1 {font-size:27px;}
  }


.thumbnail-list {display: flex; gap: 10px; margin-top: 10px;}

.thumbnail-list img {width: 80px; height: 80px; object-fit: cover; cursor: pointer; border-radius: 10px; transition: all .3s ease;}
.thumbnail-list img:hover {scale:1.1; }

.product-list-snippet {
  & .shipping-info-listing {font-size: 12px; line-height: 15px; margin-bottom: 7px;}
}

/* Der Container für die Produkte */
.product-grid {
  display: grid;
  /* Erzeugt Spalten, die mindestens 250px breit sind und sich automatisch verteilen */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px; /* Abstand zwischen den Boxen */
  margin-bottom: 30px;
}

/* Die einzelnen Produktboxen (deine .product-item) */


.productpic img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Der Button-Container */
.load-more-wrapper {
  width: 100%;
  text-align: center;
  padding: 20px 0;
}

/* Dein Button Styling */
.btn_load_more {
  padding: 12px 30px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.btn_load_more:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.opc-section.disabled { opacity: 0.4; pointer-events: none; filter: grayscale(1); }
.opc-section.active { opacity: 1; pointer-events: all; filter: none; transition: all 0.5s ease; }

.footer-block {flex: 1 1 200px; padding:0 20px; min-width: 350px; max-width:550px;
& .flex-item {flex:1 1 300px; max-width: 300px;}
& a {text-decoration: none; color:#000;}
& li {list-style: none;}
}
.footer-auto-menu {
  & ul li {list-style: none;}
}
.footer-text {font-size: 14px; line-height: 20px;}

.block {text-align: center;}
#shop-footer {font-weight: 100; font-family: sans-serif; font-size: 14px; line-height: 25px; padding: min(4px,1%);
    & h5 {font-size: 12px; font-weight: 100; font-family: sans-serif; text-transform: uppercase; margin-bottom: 13px; letter-spacing: .5px;}
    & ul {margin:0;}
}

/* Live Ticker */ 

.global-announcement-bar {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  z-index: 6;
  position: relative;
  padding: 5px 15px;
  transition: background 0.3s ease;
}

.ticker-link {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s;
}

.ticker-link:hover {
  opacity: 0.85;
  text-decoration: underline !important;
}

* Container oben rechts, über dem Live-Ticker */
#toast-container {
  
    position: fixed;
    top: 30px; /* Etwas tiefer, falls der Ticker ganz oben klebt */
    right: 20px;
    z-index: 1000; /* Höher als der Ticker */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.toast {
  margin-top:20px;
    background: #4ebc67;
    color: white;
    padding: 15px 25px;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-family: sans-serif;
    min-width: 250px;
    
    /* Animation: Von rechts (100%) nach links (0) */
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s;
    opacity: 0;
}

/* Diese Klasse wird per JS hinzugefügt */
.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.error { background-color: #dc3545; }

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}


#address_form {background:#f2f2f2; padding:100px 0;}
.border-primary {border:1px solid #69d582;}

#user-offcanvas {
.user-content-container {padding:30px;}
.btn {width: 100%;}
.form-check {width:100px; height:80px; text-align: center; border:0 !important; border-radius: 50px; outline: 2px;}
.form-check-input {width:30px; height:30px; border:0; border-radius: 50px; outline: 2px;}
.form-check-input:checked {border-radius: 50px; outline: 2px;}
}

.password-container {position:relative; margin:20px 0;}


#togglePassword {z-index: 10; user-select: none;right: 10px; top: 7px; position:absolute;}

/* Styling für die hervorgehobenen Menüpunkte */
.menu-link-hot {
  color: #dc3545 !important; /* Knalliges Rot (z.B. für % SALE % oder Neuheiten) */
  font-weight: bold !important;
}

/* Optional: Ein kleiner pulsierender Effekt oder sanfter Hover */
.menu-link-hot:hover {
  color: #bd2130 !important;
}