@charset "utf-8";

@font-face{
    font-family: 'Satoshi Bold';
    src: url('fonts/Satoshi-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: 'Satoshi Regular';
    src: url('fonts/Satoshi-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi Medium';
    src: url('fonts/Satoshi-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gopher Medium';
    src: url('fonts/Gopher-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gopher Bold';
    src: url('fonts/Gopher-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*,
*::before,
*::after { 
    box-sizing: border-box; 
}
:root{
  /* Container + Gutter */
  --maxw: 1200px;
  --gutter: clamp(12px, 4vw, 32px);

  /* Typo Scale */
  --fs-0: clamp(14px, 1.2vw, 16px);
  --fs-1: clamp(16px, 1.5vw, 20px);
  --fs-2: clamp(18px, 2vw,   24px);
  --fs-3: clamp(22px, 3vw,   32px);

  /* Spacing */
  --space-1: clamp(6px,  1.2vw, 10px);
  --space-2: clamp(10px, 2vw,   16px);
  --space-3: clamp(16px, 3vw,   24px);
  --radius: 10px;

  --meta-bg: #4a1d7c;
  --meta-hover: #7f69d7;
  --meta-accent: #e9551e;
  --text-light: #ffffff;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hover-shadow-purple:hover {
    box-shadow: 0 15px 25px -5px rgba(72, 39, 120, 0.55);
}
.container{
  width: min(100% - 2*var(--gutter), var(--maxw));
  margin-inline: auto;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}
b {
    font-weight: normal;
}
body {
    margin: 0;
    box-sizing: border-box;
}
hr {
    border: none;
}
.background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    object-fit: cover;
}
.content {
    opacity: 0;
    transition: opacity 2s;
    }
.content.fade-in {
    opacity: 1;
}
.mobile-background {
  display: none; 
}
@media screen and (max-width: 480px) {
    .mobile-background{
        display: flex;
	height: 1px;
        background-color: white;
    }
}
.meta-container {
    position: relative;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1% 15%;
    background-color: #4a1d7c;
    font-family: 'Gopher Medium';
    font-size: 16px;
}
@media screen and (max-width: 1550px) {
    .meta-container {
	padding: 1% 5%;
    }
}

.meta-section-left, .meta-section-right {
    display: flex;
    align-items: center;
}
.meta-section-left a {
    margin: 0 30px 0 0;
}
.meta-section-right a {
    margin: 0 0 0 30px;
}
.meta-section-right #login-trigger {
    cursor: pointer;
}
.meta-container a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    padding: 5px;
    transition: background-color 0.3s;
}

.cart-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    padding: 5px;
    transition: background-color 0.3s;
}

.cart-container a {
    margin: 0;
}

.cart-container:hover {
    background-color: #7f69d7;
}

.top-bar-icon {
    width: 30px;
    height: auto;
    margin-right: 10px;
}

.meta-section-left a:hover, .meta-section-right a:hover {
    background-color: #7f69d7;
}

.warenkorb-container {
    display: inline-block;
}

.webisco-cart-link {
    display: inline-block;
}

@media(max-width: 480px) {
    .meta-container {
	padding: 1%;
	width: 100%;
	box-sizing: border-box;
    }

    .meta-section-left {
	width: 100%;
	justify-content: space-between;
    }

    .meta-section-left a, .meta-section-right a {
	justify-content: center;
	margin-right: 0;
	margin-left: 0;
    }

    .top-bar-icon {
	width: 30px;
	height: 30px;
    }

    .meta-section-left a span, .meta-section-right a span {
	font-size: 12px;
    }
    .hide-mobile {
	display: none !important;
    }
    .meta-section-right {
	display: none;
    }
}

#back-to-top {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: 1000;
}
@media screen and (max-width: 480px) {
    #back-to-top {
	display: none;
    }
}
#back-to-top img {
    width: 20px;
    transform: rotate(270deg);
    transition: opacity 0.3s;
}

#back-to-top:hover img {
    opacity: 0.7;
}


:root {
  --sale-bg: #E9551E;
  --sale-text: #fff;
  --sale-font: 'Satoshi Medium', sans-serif;
}

.sale-container {
  font-family: 'Satoshi Medium', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* erlaubt Umbruch auf Mobile */
  gap: 0.75rem;
  background-color: #E9551E;
  color: #fff;
  width: 100%;
  padding: 0.4rem 0.8rem;   /* flach und gleichmäßig */
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  line-height: 1.3;
  text-align: center;
  box-sizing: border-box;
  border-bottom: 2px solid #ffffff26; /* leichter Trenner */
}
.sale-container p {
  margin: 0 2% 0 0;
  font-weight: 500;
  letter-spacing: 0.4px;
}
.sale-container strong {
  font-weight: 700;
}
.sale-content {
  display: flex;
  width: 90%;
  justify-content: center;
  align-items: center;
}

#timer {
  font-weight: 600;
  background: rgba(255, 255, 255, 0.25);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  min-width: 7ch;
  font-size: clamp(0.85rem, 1.7vw, 0.95rem);
  line-height: 1;
}

/* Nur Mobile: untereinander anordnen */
@media (max-width: 480px) {
  .sale-container {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
  }

  #timer {
    margin-left: 0;
  }
}
/* Sticky Header Container */

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 300;
    display: flex;
    flex-direction: row;
    padding: 0 15%;
    background-color: #FFFFFF;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}
@media screen and (max-width: 1550px) {
    .sticky-header {
	padding: 0 5%;
    }
}
.header-widgets-mobile {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 65px;
    justify-content: flex-end;
    align-items: center;
}

@media (max-width: 480px) {
    .sticky-header {
	flex-direction: column;
	padding: 0 2%;
	padding-top: 2%;
	align-items: initial;
	width: 100%;
    }
    .header-widgets-mobile {
	justify-content: flex-start;
    }
}

.website-logo {
    height: 50px;
    width: auto;
}

@media(max-width: 480px) {
    .website-logo {
	height: 30px;
    }
    .logo-container {
	margin-left: 0;
	display: flex;
	flex-direction: row;
    }
}

.menu-icon {
    display: none;
    height: 15px;
    width: 15px;
    position: sticky;
    top: 0;
    right: 10%;
    z-index: 1000;
}

.menu-icon img {
    height: 30px;
    width: 30px;
}

.menu {
    display: none;
    flex-direction: column;
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #7f69d7;
    transition: 0.5s;
    padding-top: 40px;
    z-index: 1001;
}

.menu a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-family: 'Gopher Medium';
    font-size: 24px;
    color: white;
    display: block;
    transition: 0.3s;
}
.menu ul {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    color: white;
    font-family: 'Gopher Medium';
    font-size: 20px;
    list-style-type: none;
}
#categories-container {
    margin-left: 15%;
}
.menu ul li a {
    padding: 5px 0 5px 37px;
}
.menu ul li ul li a {
    padding: 0 35px;
    font-size: 18px;
}
.menu ul li p {
    font-size: 24px;
}
.menu #categories-container p {
    display: flex;
}
.menu #categories-container a {
    display: block;
}
.menu #categories-container .category-item {
    display: flex;
    align-items: center;
}
.menu p {
    margin: 0;
    padding: 0 8px;
    color: white;
    font-family: 'Gopher Medium';
    font-size: 14px;
}
.menu .subcategories {
    display: none;
}
.menu .subcategories.show {
    display: block;
    padding: 10px 0;
}
.menu span {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 15%;
    font-size: 16px;
}
.menu span img {
    width: 30px;
    height: 30px;
}
.menu span a {
    padding: 0;
    margin-left: 7%;
    font-size: 16px;
}
.menu #menu-anmelden {
    margin-bottom: 2.5%;
}
.menu #menu-warenkorb {
    margin-bottom: 2.5%;
}
.menu #menu-garage {
    margin-bottom: 2.5%;
}
.menu #menu-newsletter {
    margin-bottom: 2.5%;
}
.menu #menu-europaweit {
    margin-bottom: 2.5%;
}
.menu #menu-anmelden #login-trigger {
    display: flex !important;
}
.menu #menu-anmelden a img {
    width: 30px;
    height: 30px;
}
.menu #menu-anmelden a {
    padding: 0;
    margin-left: 15%;
}
.menu #menu-anmelden a span {
    margin-left: 7%;
}
.menu #menu-garage span a span {
    margin-left: 0;
}
.menu #menu-newsletter a img {
    width: 30px;
    height: 30px;
}
.menu #menu-newsletter a {
    padding: 0;
    margin-left: 15%;
}
.menu #menu-newsletter #meta-popup-trigger {
    display: flex;
}
.menu #menu-newsletter span {
    margin-left: 7%;
}
.menu #menu-europaweit a img {
    width: 30px;
    height: 30px;
}
.menu #menu-europaweit a {
    padding: 0;
    margin-left: 15%;
    display: flex;
}
.menu #menu-europaweit a span {
    margin-left: 7%;
}
.menu #menu-fahrzeugInfo {
    display: none;
}
.menu #menu-contact {
    font-size: 14px;
    margin-top: 5%;
    margin-left: 15%;
}
.menu #menu-contact a {
    font-size: 14px;
    margin-left: 0;
}

#categories-container ul li img {
    width: 15px;
    height: 15px;
    transition: transform 0.3s;
}
#categories-container p {
    padding: 0 10%;
    font-size: 16px;
}
#categories-container a {
    font-size: 16px;
}
#categories-container .category-item img.rotated {
    transform: rotate(180deg);
}
@media screen and (max-width: 480px) {
    .menu-icon {
        display: block;
	position: absolute;
	top: 7%;
	right: 2%;
	width: 30px;
	height: 30px;
    }
}
/*Kurzinfo zum Warenkorb für Desktop*/
.header-cart #webisco-cartinfo {
    display: flex;
    color: white;
    flex-direction: row;
    font-family: 'Gopher Medium';
    font-weight: normal;
    background: #e9551e;
    align-items: center;
    height: 35px;
    margin-left: 5%;
    position: relative;
    transition: background 0.3s;
}
.header-cart #webisco-cartinfo:hover {
    background: #4a1d7c;
}
.header-cart #webisco-cartinfo .cart-img-container {
    max-width: 50px;
    min-width: 35px;
    margin-right: 5%;
    padding-left: 3%;
}
.header-cart #webisco-cartinfo .cart-img-container img {
    width: 100%;
}
.header-cart #webisco-cartinfo .webisco-cartinfo-content {
    min-width: 70px;
    margin-right: 1%;
}
.header-cart #webisco-cartinfo .webisco-cartinfo-sum {
    min-width: 100px;
}
#menu-fahrzeugauswahl {
    display: none;
    margin-left: 15%;
}
#menu-fahrzeugauswahl #webisco-car-selection-permanent-mobile {
    display: flex;
    flex-direction: column;
    font-family: 'Satoshi Medium';
    color: white;
    padding: 5%;
}
#menu-fahrzeugauswahl #webisco-car-selection-permanent-mobile select {
    background: #7f69d7;
    border-color: white;
    color: white;
}
#menu-fahrzeugauswahl .mobile-input-group {
    display: flex;
    flex-direction: column;
    margin-right: 15px;
}
#menu-fahrzeugauswahl .mobile-input-group input{
    background: #7f69d7;
    border-color: white;
    width: 110%;
}
#menu-fahrzeugauswahl #webisco-car-selection-hsn-permanent::placeholder {
    color: white;
}
#menu-fahrzeugauswahl #webisco-car-selection-tsn-permanent::placeholder {
    color: white;
}
#menu-fahrzeugauswahl .mobile-input-group label{
    font-size: 12px;
    font-weight: normal;
    padding-left: 2%;
}
#menu-fahrzeugauswahl #webisco-car-selection-number-form-permanent .table .row input[type="submit"] {
    width: 100%;
    background-color: #4a1d7c;
    color: white;
    font-family: 'Satoshi Medium';
    padding: 1% 10%;
    cursor: pointer;
    transition: background 0.3s;
}
#menu-fahrzeugauswahl #webisco-car-selection-number-form-permanent .table .row input[type="submit"]:hover {
    background: #e9551e;
}
#webisco-motor-selection-permanent-mobile {
    display: none;
}
@media screen and (max-width: 480px) {
    .header-cart {
	display: none;
    }
}
/*Kurzinformationen zum Warenkorb für mobil*/
.mobile-warenkorb {
    display: none;
}
.mobile-warenkorb .webisco-cartinfo-sum {
    display: none;
}
.mobile-warenkorb .webisco-cartinfo-content {
    display: flex;
    font-family: 'Satoshi Medium';
    font-weight: bold;
    font-size: 14px;
    color: #4a1d7c;
    position: absolute;
    top: 5%;
    right: 20%;
}
.mobile-warenkorb .webisco-cartinfo-content a img {
    width: 24px;
    height: 24px;
}
@media screen and (max-width: 480px) {
    .mobile-warenkorb {
	display: block;
	margin-top: 2.9%;
    }
    .mobile-warenkorb .webisco-cartinfo-content {
	right: 15%;
	top: 10%;
    }
}

/*Fahrzeugauswahl Garage*/
.FahrzeugauswahlDropdownBtn {
    margin-left: 2%;
    width: 100px;
    height: 35px;
}
.FahrzeugauswahlDropdownBtn img {
    width: 100px;
    height: 35px;
    transition: all 0.3s ease;
}
.FahrzeugauswahlDropdownBtn img:hover {
    content: url('Grafiken/Garage/icon_auto_auf_lila.png');
}
#fahrzeugauswahlWidget {
    display: flex;
    position: relative;
    width: 100%;
    height: auto;
    background: linear-gradient(135deg, #4a1d7c 0%, #7f69d7 100%);
    padding: 20px 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-bottom: 1%;
}

@media screen and (max-width: 480px) {
    .FahrzeugauswahlDropdownBtn {
        display: none;
    }
    #fahrzeugauswahlWidget {
	display: none;
    }
}

#fahrzeugauswahlWidget #fahrzeugauswahlGarage #webisco-car-selection-permanent {
    flex-direction: row;
}
#fahrzeugauswahlWidget #fahrzeugauswahlGarage {
    width: 100%;
}
#fahrzeugauswahlWidget #webisco-car-selection-incremental-permanent {
    width: 33%;
}

/* Labels & Text im Widget weiß auf lila Hintergrund */
#fahrzeugauswahlWidget label,
#fahrzeugauswahlWidget .cell label,
#fahrzeugauswahlWidget #extra-div,
#fahrzeugauswahlWidget #webisco-car-selection-number-label,
#fahrzeugauswahlWidget #webisco-car-selection-tsn-label {
    color: white !important;
    font-family: 'Satoshi Medium', sans-serif;
}

/* Selects & Inputs: weißer Hintergrund, Marken-Text */
#fahrzeugauswahlWidget select,
#fahrzeugauswahlWidget input[type="text"] {
    background: white !important;
    color: #4a1d7c !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    font-family: 'Satoshi Medium', sans-serif;
    border-radius: 4px;
}
#fahrzeugauswahlWidget #webisco-car-selection-permanent {
    width: 100%;
    padding: 0 15%;
}
@media screen and (max-width: 1550px) {
    #fahrzeugauswahlWidget #webisco-car-selection-permanent {
	padding: 0 5%;
    }
}
#fahrzeugauswahlWidget #webisco-car-selection-model-permanent {
    height: 30px;
    width: 280px;
}
#fahrzeugauswahlWidget #webisco-car-selection-type-permanent {
    height: 30px;
    width: 280px;
}
#fahrzeugauswahlWidget #webisco-car-selection-numbers-permanent {
    margin-top: 0;
    margin-left: 8%;
    width: 33%;
}
#fahrzeugauswahlWidget #webisco-motor-selection-permanent {
    margin-top: 0;
    margin-left: 7%;
    width: 33%;
}
#fahrzeugauswahlWidget #webisco-car-selection-number-form-permanent {
    text-wrap: nowrap;
}
#fahrzeugauswahlWidget #webisco-car-selection-incremental-form-permanent {
    text-wrap: nowrap;
}
#fahrzeugauswahlWidget #webisco-car-selection-manufacturer-permanent {
    height: 30px;
    width: 280px;
}
#fahrzeugauswahlWidget #webisco-car-selection-model {
    height: 30px;
    width: 280px;
}
#fahrzeugauswahlWidget #webisco-car-selection-type {
    height: 30px;
    width: 280px;
}
#fahrzeugauswahlWidget #webisco-car-selection-hsn-permanent {
    height: 30px;
    padding: 0 2%;
    font-family: 'Satoshi Medium';
    box-sizing: border-box;
}
#fahrzeugauswahlWidget #webisco-car-selection-tsn-permanent {
    height: 30px;
    padding: 0 2%;
    font-family: 'Satoshi Medium';
    box-sizing: border-box;
}
#fahrzeugauswahlWidget #extra-div {
    font-family: 'Satoshi Medium';
}
#fahrzeugauswahlWidget #webisco-motor-selection-code {
    height: 30px;
    width: 180px;
    padding: 0 1%;
    box-sizing: border-box;
}
#fahrzeugauswahlWidget #extra-div #webisco-car-selection-tsn-label {
    margin-left: 25%;
}
#fahrzeugauswahlWidget #webisco-motor-selection-code-form-permanent .cell {
    display: flex;
    flex-direction: column;
    margin-bottom: 1%;
}
#fahrzeugauswahlWidget #webisco-car-selection-numbers-permanent input[type="submit"] {
    height: 36px;
    width: 43%;
    margin: 2% 0 0 0;
    padding: 0;
    font-family: 'Satoshi Medium';
}
#fahrzeugauswahlWidget .close-btn img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15%;
    cursor: pointer;
    z-index: 2;
    height: 40px;
    width: 40px;
}
@media screen and (max-width: 1550px) {
    #fahrzeugauswahlWidget .close-btn img {
	right: 5%;
    }
}
#fahrzeugauswahlWidget #webisco-motor-selection-code-form-permanent input[type="submit"] {
    width: 180px;
    height: 36px;
    margin-top: 7.8%;
    box-sizing: border-box;
}
.html-inner1 {
    margin: 1% 15% 5% 15%;
    display: flex;
    flex-direction: row;
}
@media screen and (max-width: 1550px) {
    .html-inner1 {
	margin: 2% 5% 8% 5% !important;
    }
}
@media(max-width: 480px) {
    .html-inner1 {
	margin: 3% 2% 8% 2% !important;
    }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    padding-top: 20%;
}

.modal-content {
    position: relative;
    font-family: 'Satoshi Medium';
    margin: auto;
    background-color: #fefefe;
    padding: 10px 20px 20px 20px;
    border: 1px solid #888;
    width: 38%;
    max-width: 400px;
    border-radius: 15px;
    text-align: center;
}

.sun-container {
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
    height:100px;
    width: 100px;
}

.rotating-sun {
    animation: rotateSun 10s linear infinite;
    display: block;
    width: 100px;
}

@keyframes rotateSun {
    from {
	transform: rotate(0deg);
    }
    to {
	transform: rotate(360deg);
    }
}

.sun-text {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Gopher Medium';
    font-size: 16px;
    color: #fff;
}

@media screen and (max-width: 480px) {
    .modal-content {
	width: 80%;
    }
    .modal-content #headline {
	text-wrap: nowrap;
    }
    .sun-container {
	display: none;
    }
}

/* Slideshow Styles */
.slideshow-container {
    position: relative;
    width: 100%;
    background: #f3f4f6;
    min-height: 400px;
}

.mySlides {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.mySlides.active {
    display: block;
}

.mySlides img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Dots Styling */
.dot {
    background: rgba(156, 163, 175, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.dot.active {
    background: #f97316;
    width: 48px;
}

.dot:hover {
    background: rgba(249, 115, 22, 0.7);
}

@media(max-width: 480px) {
    .html-inner1 {
	flex-direction: column-reverse;
	margin-left: 0;
    }
}

/* Webisco Cart Button Styling */
.webisco-cart-button-wrapper .webisco-article-put-cart {
    width: 100%;
    padding: 14px;
    background: #FF551E;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.webisco-cart-button-wrapper .webisco-article-put-cart:hover {
    background: #482778;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.webisco-cart-button-wrapper img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

/*Navigationsbereich 2*/
.main-headline {
    margin: 0 15%;
}
@media screen and (max-width: 1550px) {
    .main-headline {
	margin: 0 5%;
    }
}
@media screen and (max-width: 480px) {
    .main-headline {
	margin: 0 2%;
    }
}
.main-headline h2 {
    font-family: 'Gopher Medium';
    font-size: 26px;
    font-weight: normal;
    margin-bottom: 0;
}

.main-headline h3 {
    font-family: 'Gopher Medium';
    font-size: 26px;
    font-weight: normal;
    margin-top: 0;
    color: #7f69d7;
}
@media screen and (max-width: 480px) {
    .main-headline h2 {
	font-size: 20px;
    }
    .main-headline h3 {
	font-size: 20px;
    }
}
.seperator {
  background: linear-gradient(90deg, #e9551e, #ff7a3c);
  color: #fff;
  padding: 24px 16px;
  margin: 32px 0;
}

.seperator-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

/* Einzelne „Cards“ */
.seperator-item {
  flex: 1 1 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.seperator-item:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

/* Icon im Kreis */
.seperator-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.seperator-icon img {
  max-width: 60%;
  max-height: 60%;
  display: block;
}

/* Text */
.seperator-text {
  font-family: 'Gopher Medium', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: 260px;
}

/* Tablet / mittlere Screens */
@media screen and (max-width: 992px) {
  .seperator-inner {
    gap: 16px;
  }

  .seperator-item {
    padding: 14px 10px;
  }

  .seperator-text {
    font-size: 0.9rem;
  }
}

/* Mobile */
@media screen and (max-width: 600px) {
  .seperator {
    padding: 20px 12px;
  }

  .seperator-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .seperator-item {
    width: 100%;
  }
}
.beliebt-bilder.renner {
    position: relative;
    padding: 0 56px;
}
.beliebt-bilder .webisco-article {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Satoshi Medium';
    height: 100%;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}
.beliebt-bilder .webisco-article .webisco-article-cars {
    display: none;
}
@media screen and (max-width: 480px) {
    .beliebt-bilder .webisco-article {
	width: 240px;
	z-index: 200;
	flex: 0 0 100%;
    }
}
.beliebt-bilder .webisco-article-data h2 {
    font-family: 'Gopher Medium';
    font-weight: normal;
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* max 2 Zeilen */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.beliebt-bilder .webisco-article-data {
    font-size: 12px;
}
.beliebt-bilder .webisco-article-data .webisco-article-availability-value img {
    width: 10px;
    height: 10px;
    margin-right: 5%;
}
.beliebt-bilder .webisco-article-details {
    display: none;
}
.beliebt-bilder .webisco-article-price-value {
    color: #e9551e;
    font-weight: bold;
}
.beliebt-bilder .webisco-article-listprice-value {
    color: black;
    font-weight: normal;
}
.beliebt-bilder .webisco-article-datasheet .webisco-pdf-icon {
    display: none;
}
.beliebt-bilder .webisco-article-additional-info {
    display: none;
}
.beliebt-bilder .webisco-article-images {
    width: 100%;
    max-width: none; 
    aspect-ratio: 4 / 3; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 12px;
}
.beliebt-bilder .webisco-article-images img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
}
.beliebt-bilder .webisco-article-images > *:not(:first-child) { 
  display: none !important; 
}
.beliebt-bilder .webisco-article-images img + img,
.beliebt-bilder .webisco-article-images picture + picture {
  display: none !important;
}
.beliebt-bilder .webisco-article-image > *:not(:first-child) {
  display: none !important;
}
.beliebt-bilder .webisco-article-data .webisco-article-availability-key {
    display: none;
}
.beliebt-bilder .webisco-article-data .webisco-article-availability-branches-key {
    display: none;
}
.beliebt-bilder .webisco-article-data .webisco-article-availability-branches-value {
    display: none;
}
.webisco-article-availability-external-key .webisco-article-external-value {
    display: none;
}
.beliebt-bilder .webisco-article .duration {
    display: flex;
    align-items: center;
    margin-bottom: 5%;
}
.beliebt-bilder .webisco-article-data a {
    color: black;
    text-decoration: none;
}
.beliebt-bilder .webisco-article-data a:hover {
    text-decoration: underline;
}
@media screen and (max-width: 480px) {
    .beliebt-bilder .webisco-article .duration {
	margin-bottom: 4%;
    }
}
.beliebt-bilder .webisco-article .duration img {
    width: 15%;
    height: 15%;
    margin-right: 5%;
}
.beliebt-bilder .webisco-article .webisco-article-put-cart {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #e9551e;
    width: 90%;
    transition: background 0.3s;
    padding: 2% 2%;
    cursor: pointer;
}
.beliebt-bilder .webisco-article .webisco-article-put-cart:hover {
    background-color: #4a1d7c;
}
.beliebt-bilder .webisco-article .webisco-article-put-cart-text a {
    text-decoration: none;
    color: white;
    font-family: 'Satoshi medium';
    font-weight: normal;
    font-size: 12px;
}
.beliebt-bilder .webisco-article .webisco-article-put-cart-image {
    width: 20%
}
.beliebt-bilder .webisco-article .webisco-article-put-cart-image a img {
    width: 60%;
    height: 60%;
}
.beliebt-bilder .webisco-article .webisco-article-datasheet a {
    color: black;
}
.beliebt-kategorien .webisco-navigation-level-2 {
    display: none !important;
}

/*Marken-Karussell*/
.carousel-container {
    overflow: hidden;
    width: 100%;
    margin: 0;
}

.carousel {
    display: flex;
    animation: carousel-scroll 15s linear infinite;
    width: calc(250px * 14);
}

.carousel-slide {
    min-width: 250px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 480px) {
    .carousel-slide {
	width: 150px;
	min-width: 150px;
	height: auto;
    }
}
.carousel-slide img {
    width: 100%;
    height: 100%;
}

@keyframes carousel-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
@media screen and (max-width: 480px) {
    .carousel img {
	height: 100px;
    }
}
/*Beliebt-bilder slidetrack*/
.renner-carousel {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.renner-carousel-track {
    --gap: 24px;
    display: flex;
    align-items: stretch;
    gap: var(--gap);
    transition: transform 0.45s ease;
    will-change: transform;
}
.renner-carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: #fff;
    border: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
}
.renner-carousel-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.renner-carousel-button.left {
    left: -5%;
    transform: translateY(-50%) rotate(180deg);
}
.renner-carousel-button.right {
    right: -5%;
}

.renner-carousel-track > * {
    flex: 0 0 calc(25% - 18px);
    max-width: calc(25% - 18px);
    min-width: 0;
}

@media (max-width: 1024px) {
    .renner-carousel-track > * {
        flex: 0 0 calc(33.333% - 14px); /* 3 pro Zeile */
        max-width: calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .renner-carousel-track > * {
        flex: 0 0 calc(50% - 12px); /* 2 pro Zeile */
        max-width: calc(50% - 12px);
    }
}

.renner-carousel .webisco-article,
.renner-carousel .webisco-article-wrapper,
.renner-carousel .webisco-article-data {
  box-sizing: border-box;
}

.renner-carousel .webisco-article {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid #e9e9e9;
}
.renner-carousel .webisco-article:hover {
  border: 2px solid #e9551e;
}

/* Image/max area: fixed aspect so nothing is cropped weirdly */
.renner-carousel .webisco-article .webisco-article-image,
.renner-carousel .webisco-article .webisco-article-images,
.renner-carousel .webisco-article .webisco-article-picture,
.renner-carousel .webisco-article figure:first-of-type {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;         /* adjust to taste (square? 1/1) */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;            /* prevent overflow */
  margin: 0 0 12px 0;
}

.renner-carousel .webisco-article img {
  max-width: 100%;
  height: auto;
}

/* Product image inside the media box should fit, not crop */
.renner-carousel .webisco-article .webisco-article-image img,
.renner-carousel .webisco-article .webisco-article-images img,
.renner-carousel .webisco-article .webisco-article-picture img,
.renner-carousel .webisco-article figure:first-of-type img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Make the “data” area consume remaining space and clamp long text */
.renner-carousel .webisco-article .webisco-article-data {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.renner-carousel .webisco-article .webisco-article-data h2,
.renner-carousel .webisco-article .webisco-article-data .title,
.renner-carousel .webisco-article h2 {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 0 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* two lines max */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Keep buy button docked at the bottom and full width */
.renner-carousel .webisco-article .webisco-article-put-cart,
.renner-carousel .webisco-article .put-cart {
  margin-top: auto;
  width: 100%;
}

.renner-carousel .webisco-article .webisco-article-put-cart a,
.renner-carousel .webisco-article .webisco-article-put-cart button {
  width: 100%;
}

/* Prevent internal images (like availability icons) from stretching the card */
.renner-carousel .webisco-article .webisco-article-availability-value img,
.renner-carousel .webisco-article .webisco-article-put-cart img {
  width: auto;
  height: auto;
  max-height: 24px;
}

.beliebt-bilder .webisco-article-data .webisco-article-availability-value img {
  width: 12px !important;
  height: 12px !important;
  margin-right: 8px;
}

.beliebt-bilder .webisco-article-data .webisco-article-manufacturer,
.beliebt-bilder .webisco-article-data .webisco-article-car-selection,
.beliebt-bilder .webisco-article-data .webisco-article-datasheets,
.beliebt-bilder .webisco-article-data .webisco-article-manufacturer-note {
  display: none !important;
}

/*beliebt katalog*/

.beliebt-katalog {
    font-family: "Gopher Medium";
    font-size: 22px;
    margin-top: 3%;
    margin-left: 5%;
}

.beliebt-katalog p {
    margin: 0;
}

.beliebt-schrift {
    font-family: "Satoshi Medium";
    color: #7f69d7;
}

.beliebt-bilder {
    margin: 0 15% 3% 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}
@media screen and (max-width: 1550px) {
    .beliebt-bilder {
	margin: 0 5% 3% 5%;
    }
}
.beliebt-mehr {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

.beliebt-mehr a {
    font-family: 'Gopher Medium';
    text-decoration: none;
    color: black;
    font-weight: bold;
    display: flex;
    align-items: center;
    border: 2px solid black;
    padding: 0.5%;
    width: 180px;
    margin-bottom: 3%;
}
@media screen and (max-width: 480px) {
    .beliebt-mehr a {
	padding: 2%;
	margin-top: 2%;
	width: 175px;
	flex-wrap: nowrap;
	justify-content: space-between;
    }
}

.beliebt-mehr a:hover {
    color: #7f69d7;
    border: 2px solid #7f69d7;
}

.beliebt-mehr span {
    margin-right: 7%;
}

.beliebt-mehr img {
    display: inline-block;
    height: 18px;
    width: auto;
    margin-left: 1%;
}

/*
 Das Suchfeld
*/
.search-widget {
    margin-right: 2%;
    width: 45%;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .search-widget {
	width: 95%;
    }
}

#webisco-search {
    background-color: white;
    border: 2px solid #4a1d7c;
    padding: 0 0 0 2%;
    width: 100%;
}
#webisco-search-form {
    width: 100%;
    display: flex;
    align-items: center;
    height: 35px;
    margin-block-end: 0;
}
#webisco-search-button {
    height: 35px;
    width: 70px;
    background: #e9551e;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.3s ease;
}
#webisco-search-button:hover {
    background: #4a1d7c;
}
#webisco-search-button img {
    width: 50%;
    height: auto;
}
#webisco-search-label {
    display: none;
}

#webisco-search #webisco-search-inputfield {
    border: none;
    width: 90%;
}
#webisco-search #webisco-search-inputfield:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

#webisco-search #webisco-search-submit {
    display: none;
}

/*
Sprachauswahl
*/
.language-widget {
    height: 35px;
    margin-left: 2%;
    padding: 0.5%;
    border: 2px solid #4a1d7c;
    box-sizing: border-box;
}
.webisco-language-deu {
    align-items: center;
}
.webisco-language-deu img {
    width: 32px;
    height: auto;
}

/*Sprachauswahl mobil*/

@media screen and (max-width: 480px) {
    .language-widget {
	margin-left: 5%;
    }
    
}

/*Kontaktbereich*/
.contact-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: black;
    font-size: 16px;
    border-left: 2px solid black;
    padding-left: 5%;
    width: 20%;
    font-family: 'Satoshi Medium';
    font-weight: bold;
    margin-top: 1%;
    margin-bottom: 1%
}
@media screen and (max-width: 1550px) {
    .contact-section {
	padding-left: 2%;
    }
}
.contact-phrase {
    margin: 0 0 1% 0;
    padding: 0;
    font-size 16px;
}

.contact-phone {
    margin: 1% 0 0 0;
    padding: 0;
    font-size: 16px;
    color: #e9551e;
}

.contact-hours {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: normal;
}

.description {
    gap: 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* einzelne Cards */
.description span {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    padding: 0 0 18px 0;           /* oben übernimmt das Bild */
    box-sizing: border-box;

    /* 3 Spalten auf Desktop */
    flex: 1 1 calc(33.333% - 24px);
    max-width: 360px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.description span:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12);
}

/* Bild oben als „Card-Header“ */
.description img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Typografie */
.description h4 {
    font-family: "Satoshi Medium";
    font-size: 1.1rem;
    margin: 16px 18px 8px;
    color: #222;
}

.description p {
    font-family: "Satoshi Medium";
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 18px;
    color: #444;
}

/* Tablet: 2 Spalten */
@media screen and (max-width: 1024px) {
    .description {
        margin-top: 4%;
        padding: 0 12px;
    }

    .description span {
        flex: 1 1 calc(50% - 20px);
        max-width: 100%;
    }

    .description img {
        height: 200px;
    }
}

/* Mobile: 1 Spalte */
@media screen and (max-width: 600px) {
    .description {
        margin-top: 3%;
        padding: 0 10px;
    }

    .description span {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .description img {
        height: 190px;
    }

    .description h4 {
        font-size: 1rem;
        margin: 14px 14px 6px;
    }

    .description p {
        font-size: 0.9rem;
        margin: 0 14px 4px;
    }
}

/*
 Der kleine Kundenbereich, der immer igendwo auf der Webseite zu sehen ist (Login/Logout)
*/
#webisco-permanent-accountbox {

}
#webisco-permanent-login {
}
#webisco-permanent-login-name {
}

#webisco-permanent-login-password {
}
#webisco-permanent-login input {
    margin-bottom: 4%;
    border: black 2px solid;
    padding: 2% 2%;
    width: 90%;
}

#webisco-permanent-login input:hover {
    border-color: #e9551e;
}

#webisco-permanent-login input:focus {
    border-color: #e9551e;
}
#webisco-permanent-login #webisco-permanent-login-submit {
    background-color: #e9551e;
    color: white;
    width: 95%;
    border: none;
    transition: background 0.3s;
    font-family: 'Satoshi Medium';
    font-size: 16px;
}

#webisco-permanent-login #webisco-permanent-login-submit:hover {
    background-color: #4a1d7c;
    cursor: pointer;
}
#webisco-permanent-login #webisco-permanent-login-forgotpassword {
    display: flex;
    align-items: flex-start;
    margin-left: 3%;
}
#webisco-permanent-login #webisco-permanent-login-forgotpassword a {
    color: #e9551e;
    transition: color 0.3s;
}
#webisco-permanent-login #webisco-permanent-login-forgotpassword a:hover {
    color: #4a1d7c;
}
#webisco-permanent-login #webisco-permanent-login-newaccount {
    display: flex;
    align-items: flex-start;
    margin-left: 3%;
}
#webisco-permanent-login #webisco-permanent-login-newaccount a {
    color: #e9551e;
    transition: color 0.3s;
}
#webisco-permanent-login #webisco-permanent-login-newaccount a:hover {
    color: #4a1d7c;
}
#webisco-permanent-logout a {
    color: #e9551e;
    transition: color 0.3s ease;
}
#webisco-permanent-account-home a {
    color: #e9551e;
    transition: color 0.3s ease;
}
#webisco-permanent-logout a:hover, #webisco-permanent-account-home a:hover {
    color: #4a1d7c;
}

/*
 Die horizontale Navigationsleiste, um zur vorigen Kategorie zu kommen
*/
#webisco-rootline {
    margin: 2% 15%;
    color: black;
    text-align: left;
    font-family: 'Satoshi Medium';
    font-weight: normal;
    display: flex;
    flex-wrap: wrap;
}
@media screen and (max-width: 1550px) {
    #webisco-rootline {
	margin-left: 5%;
    }
}
@media screen and (max-width: 480px) {
    #webisco-rootline {
	margin-left: 2%;
    }
}
#webisco-rootline a{
    padding: 3px;
    color: black;
    font-family: 'Satoshi Medium';
    font-weight: normal;
    text-decoration: none;
}
#webisco-rootline a:hover {
    text-decoration: underline;
}
#webisco-rootline .webisco-rootline-title {
    padding: 3px 3px 3px 0;
}
#webisco-rootline .webisco-rootline-item {
    padding: 3px;
}
#webisco-rootline .webisco-rootline-separator {
    display: none;
}



/*
 Der Up-Button, um zur vorigen Kategorie zu kommen
*/
#webisco-step-up {
    background-color: #EEEEEE;
    border: 1px solid #00309C;
    text-align: center;
    float: left;
}
#webisco-step-up a {
    padding: 3px;
    display: block;
}
#webisco-step-up a:hover {
    background-color: #00309C;
    display: block;
    color: #FFCA00;
}

/*Navbar */

.mainDropdown {
    font-family: 'Gopher Medium';
    display: flex;
    flex-direction: column;
    list-style-type: none;
    width: 80%;
    background-color: #e9e9e9;
    justify-content: space-between;
}
.mainDropdown #dropdown-items-1 {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5%;
}
.mainDropdown #dropdown-items-2 {
    display: flex;
    flex-direction: row;
    margin-top: 0.5%;
}
.mainDropdown a {
    text-decoration: none;
    color: black;
}

.mainDropdown > li {
    position: relative;
    display: inline-block;
    padding: 10px;
    margin-right: 4%;
    cursor: pointer;
    text-wrap: nowrap;
    height: auto;
    width: auto;
    margin-top: 5%;
}

.mainDropdown .has-children > ul {
    display: none;
    position: absolute;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #e9e9e9;
    z-index: 1005;
    width: 20%;
    flex-direction: column;
}
.mainDropdown .has-children > ul > li > ul {
    display: none;
}
@media screen and (max-width: 1550px) {
    .mainDropdown .has-children > ul {
	width: 20%;
    }
}
.mainDropdown .has-children:hover > ul {
    display: flex;
}
.mainDropdown .has-children > ul > li {
    color: black;
    padding: 2% 4%;
    transition: color 0.3s ease;
}
.mainDropdown .has-children > ul > li a:hover {
    color: #e9551e;
}
.mainDropdown #dropdown-items-1 > li, .mainDropdown #dropdown-items-2 > li {
    padding: 0 4% 0 0;
    color: #4a1d7c;
}
.mainDropdown > li > ul > li a {
    color: #4a1d7c;
}
.mainDropdown #dropdown-items-1 > li:hover > a, .mainDropdown #dropdown-items-2 > li:hover > a {
    color: #e9551e;
}
.mainDropdown .has-children {
    padding: 0 3%;
}
.mainDropdown .has-children > a {
    display: inline-flex;
}

.mainDropdown .has-children > a img {
    margin-right: 10px;
    height: 20px;
    width: 20px
}

.mainDropdown #dropdown-items-1 > li:hover > a .nav-arrow, .mainDropdown #dropdown-items-2 > li:hover > a .nav-arrow {
    transform: rotate(270deg);
}


/*
 Die Baumnavigation für Angebote und Ersatzteile
*/

.navbar {
    display: flex;
    flex-direction: row;
    background-color: #e9e9e9;
    padding: 0 15%;
}
@media screen and (max-width: 1550px) {
    .navbar {
	padding: 0 5%;
    }
}

@media(max-width: 480px) {
    .navbar {
	display: none;
    }
}

.contact-phone {
    color: #e9551e;
}

#webisco-navigation {
    color: black;
    margin: 0 15% 0 15%;
    width: auto;
    font-family: 'Gopher Medium';
    font-size: 16px;
    box-sizing: border-box;
}
#webisco-navigation ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}
#webisco-navigation li {
    font-weight: normal;
    display: block;
}
/*
 Alle <ul>-Elemente beinhalten eine Klasse mit ihrer Ebentiefe
*/
#webisco-navigation ul .webisco-navigation-level-0 {
    width: 100%;
}
#webisco-navigation ul .webisco-navigation-level-1 {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    text-decoration: none;
    padding: 0;
    flex-wrap: wrap;
}
.webisco-navigation-level-1 > li {
    flex: 1 1 20%;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 3%;
}
.webisco-navigation-level-1 img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .webisco-navigation-level-1 > li {
	flex: 1 1 50%;
    }
}
/*
 Alle <li>-Elemente beinhalten eine Klasse mit ihrer Ebentiefe
*/
#webisco-navigation li .webisco-navigation-level-0 {
}
#webisco-navigation li .webisco-navigation-level-1 span {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    max-width: 200px;
}

#webisco-navigation li .webisco-navigation-level-1 img {
    width: 200px;
    height: 200px;
}
@media screen and (max-width: 480px) {
    #webisco-navigation li .webisco-navigation-level-1 span {
	max-width: 150px;
	font-size: 14px;
    }
    #webisco-navigation li .webisco-navigation-level-1 img {
	width: 150px;
	height: 150px;
    }
}
.navbar #webisco-navigation .webisco-navigation-level-2 {
    display: none;
}

#webisco-navigation .webisco-navigation-item a img {
    background-color: #e9e9e9;
    transition: background 0.3s;
    margin-bottom: 5%;
}
#webisco-navigation a {
    display: flex;
    flex-direction: column;
    color: #000000;
    text-decoration: none;
    text-align: center;
    max-width: 211px;
}
@media screen and (max-width: 480px) {
    #webisco-navigation a {
	max-width: 1000px;
	align-items: initial;
	padding: 0;
    }
    #category-stretch {
	max-width: 1000px;
	word-break: break-word;
	white-space: normal;
	overflow-wrap: break-word;
    }
}
.webisco-navigation-item a img:hover {
    background-color: #7f69d7 !important;
}
#webisco-navigation a:hover {
    color: #7f69d7;
}
#webisco-navigation .webisco-navigation-title {
    display: none;
}
#webisco-navigation .webisco-navigation-active-path {
    color: #000000;
}
#webisco-navigation .webisco-navigation-active-path a {
    color: #000000;
}

/*Navigationsbereich für mobile */

@media screen and (max-width: 1550px) {
    #webisco-navigation {
	margin: 0 5%;
    }
}

@media screen and (max-width: 480px) {
    #webisco-navigation {
	margin: 0;
    }
    #webisco-navigation ul {
	display: flex;
	margin: 0;
	flex-wrap: wrap;
    }
    #webisco-navigation ul .webisco-navigation-level-1 {
	margin-right: 0;
	margin-bottom: 3%;
	justify-content: space-between;
	padding: 0 1%;
	box-sizing: border-box;
    }
}

/*
 SEO-Text Bereich
*/
.text-area {
    background: #fff;
    padding: 40px 20px;
    border-radius: 24px;
    line-height: 1.7;
}
.text-area a {
    color: #7f69d7;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(127, 105, 215, 0.2);
    transition: border-color 0.2s;
}

.text-area a:hover {
    border-bottom-color: rgba(127, 105, 215, 0.6);
}

.text-area p {
    margin-bottom: 20px;
    font-family: 'Satoshi Regular';
    font-size: 1rem;
    color: #333;
}

.text-area h2 {
    color: #7f69d7;
    font-family: 'Gopher Medium';
    margin-top: 40px;
    margin-bottom: 16px;
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 600;
    position: relative;
}

.text-area ul {
    margin-left: 1.5rem;
    margin-bottom: 24px;
    padding-left: 0;
    list-style: none;
}

.text-area ul li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 10px;
}

.text-area ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #7f69d7;
    font-size: 1.4rem;
    line-height: 1;
}
.text-area hr {
    border: none;
    height: 2px;
    width: 100%;
    background: linear-gradient(to right, #ddd, #aaa, #ddd);
    margin: 40px 0;
    border-radius: 2px;
}
@media screen and (max-width: 600px) {
    .text-area {
        padding: 24px 16px;
        border-radius: 16px;
    }
    .text-area h2 {
        font-size: 1.3rem;
        padding-left: 6px;
    }
    .text-area p,
    .text-area ul li {
        font-size: 0.95rem;
    }
}
/*
 Copyright-Vermerk von ByteRider
*/
#webisco-copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 10px;
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
}
#webisco-copyright img {
    margin-bottom: 1.5%;
}
#webisco-copyright a {
    color: white;
    text-decoration: none;
}
#webisco-tecdoc-copyright {
    color: white;
    font-size: 10px;
    text-align: center;
    margin: 1% 1% 0 1%;
    padding-bottom: 5%;
}
/*
 Der Hauptinhaltsbereich
*/
.main-area {
    display: flex;
}
#catMenuContainer {
    margin: 0 0 0 15%;
    width: 35%;
}
#catMenuHead {
    margin: 0;
    background-color: #7f69d7;
    color: white;
    font-family: 'Gopher Medium';
    padding: 2%;
    width: 100%;
}
#catMenuContainer ul {
    list-style-type: none;
    margin: 0;
    font-family: 'Satoshi Regular';
    padding: 2%;
    width: 100%;
}
#catMenuContainer li {
    list-style-type: none;
    font-family:'Satoshi Regular';
    padding: 2% 0;
    width: 100%;
    cursor: pointer;
    transition: background 0.3s ease;
}
#catMenuContainer li:hover {
    background-color: #e9e9e9;
}
#catMenuContainer span {
    padding: 0 2% 0 4%;
}
.nav-category-item {
    display: flex;
    align-items: center;
}
#catMenuContainer a {
    color: #7f69d7;
    text-decoration: none;
}
#catMenuContainer a:hover {
    text-decoration: underline;
}
#catMenuContainer .nav-subcategories {
    padding: 2% 0;
}
#webisco-content {
    margin: 0 15%;
    border: none;
    width: auto;
}
@media screen and (max-width: 1550px) {
    #webisco-content {
	margin: 0 5%;
    }
    #catMenuContainer {
	margin: 0 0 0 5%;
    }
}
@media screen and (max-width: 480px) {
    #webisco-content {
	margin: 0 2%;
    }
    #catMenuContainer {
	display: none;
    }
}
#webisco-content p {
    font-family: "Gopher Medium";
    font-size: 24px;
    margin: 0;
}
#webisco-content #webisco-car-selection {
    display: none;
}
/*
 Überschriften
*/
#webisco-content h1 {
    color: black;
    font-size: 24px;
    font-family: "Gopher Medium";
    font-weight: normal;
    margin-bottom: 0.5%;
}
#webisco-content h2 {
    color: #7f69d7;
    font-size: 24px;
    font-family: "Gopher Medium";
    font-weight: normal;
    margin-top: 0;
}

/*
 Die Fehlerausgabe
*/
#webisco-content .webisco-error {
    background: #FFF2F2;
    border: solid 1px #FF3030;
    color: #FF3030;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-family: 'Satoshi Medium';
}
#webisco-content .webisco-error img {
    width: 9%;
    margin-left: 5%;
}
@media screen and (max-width: 480px) {
    #webisco-content .webisco-error img {
	width: 10%;
	margin-left: 3%;
    }
}
/*
 Die normale Infoausgabe
*/
#webisco-content .webisco-message {
    border: none;
    color: black;
    font-family: 'Satoshi Medium';
    text-align: center;
    margin-bottom: 15px;
    font-size: 24px;
}
#webisco-content .webisco-message a {
    color: black;
}

/*
 Das Fenster mit der Meldung einer Ladeverzögerung
*/
#webisco-progress {
    clear: both;
    font-size: 18px;
    color: #DDDDDD;
    background: #666666;
    border: solid 1px #000000;
    z-index: 999;
    text-align: left;
    padding: 20px;
    opacity: .9;
    filter: alpha(opacity=90);
    position: absolute;
    visibility: hidden;
    top: 200px;
}
#webisco-progress-bar {
    color: #CCCCCC;
    height: 8px;
    margin-top: 20px;
}

/* Die Zusatztexte der Kategorien */

#webisco-content .custom-message {
    margin-top: 5%;
}
#webisco-content .custom-message h4 {
    font-size: 24px;
    font-family: 'Gopher Medium';
    color: #7f69d7;
    font-weight: normal;
    margin-bottom: 1%;    
}
#webisco-content .custom-message h2 {
    font-family: 'Gopher Medium';
    font-size: 26px;
}
#webisco-content .custom-message p {
    font-size: 16px;
    font-family: 'Satoshi Regular';
}
#webisco-content .custom-message ul li {
    font-size: 16px;
    font-family: 'Satoshi Regular';
    margin: 1% 0;
}

/*
 Das Feld zum Eintragen des Benutzernamens oder der Emailadresse
*/
#webisco-send-password {
    background: white;
    border: none;
    width: 70%;
    padding: 5px;
    font-family: 'Satoshi Medium';
}
#webisco-send-password form {
    display: flex;
    flex-direction: column;
}
#webisco-send-password p {
    font-size: 14px;
    margin-top: 3%;
    font-family: 'Satoshi Medium';
    font-weight: bold;
}
#webisco-send-password-input{
    margin-top: 1%;
    width: 50%;
    height: 30px;
    padding-left: 1%;
    box-sizing: border-box;
}
#webisco-send-password-input:hover {
    border: 1px solid #e9551e;
}
#webisco-send-password-input:focus {
    border: 1px solid #e9551e;
}
#webisco-send-password-submit{
    margin-top: 1%;
    cursor: pointer;
    width: 50%;
    box-sizing: border-box;
    height: 30px;
    color: white;
    background: #e9551e;
    border: none;
    transition: background 0.3s;
}
#webisco-send-password-submit:hover{
    background: #4a1d7c;
}
@media screen and (max-width: 480px) {
    #webisco-send-password {
	width: 98%;
    }
    #webisco-send-password-input {
	width: 98%;
    }
    #webisco-send-password-submit {
	width: 100%;
	margin-top: 3%;
    }
}

/*
 Die Fahrzeugauswahl
*/

.headline-container {
    height: 100%;
    width: 40%;
}

@media(max-width: 480px) {
    .headline-container {
	width: 100%;
	margin-bottom: 5%;
    }
}

.car-selection {
    width: 100%;
    height: 100%;
}

/* Webisco Fahrzeugauswahl Styles */
.vehicle-selector-webisco .table {
    width: 100%;
}

.vehicle-selector-webisco .cell {
    padding: 0.5rem 0;
}
.vehicle-selector-webisco #webisco-car-selection-last-cars-permanent {
    display: none;
}
.vehicle-selector-webisco select,
.vehicle-selector-webisco input[type="text"] {
    width: 100%;
    padding: 0.3rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.vehicle-selector-webisco select:focus,
.vehicle-selector-webisco input[type="text"]:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.vehicle-selector-webisco select:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
    opacity: 0.6;
}

.vehicle-selector-webisco input[type="submit"],
.vehicle-selector-webisco button[type="submit"] {
    width: 100%;
    background-color: #FF551E;
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.vehicle-selector-webisco input[type="submit"]:hover,
.vehicle-selector-webisco button[type="submit"]:hover {
    background-color: #482778;
}

.vehicle-selector-webisco input[type="submit"]:disabled,
.vehicle-selector-webisco button[type="submit"]:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

select.webisco-placeholder-select {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f3f4f6;
}

select.webisco-placeholder-select option {
    color: #9ca3af;
}

/* HSN/TSN Formular Styling */
.hsn-tsn-wrapper {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.hsn-container,
.tsn-container {
    display: flex;
    flex-direction: column;
    min-width: 140px;
    width: 48.8%;
}

.hsn-container label,
.tsn-container label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
    padding: 0.3rem;
}

.hsn-container input,
.tsn-container input {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

.hsn-container input:focus,
.tsn-container input:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.search-button {
    background-color: #f97316;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    height: 38px;
    margin-top: auto;
}

.search-button:hover {
    background-color: #ea580c;
}

.search-button:active {
    background-color: #c2410c;
}

/* Responsive Anpassung */
@media (max-width: 640px) {
    .hsn-tsn-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hsn-container,
    .tsn-container {
        width: 100%;
    }
    
    .search-button {
        width: 100%;
    }
}
#webisco-motor-selection-permanent {
    display: none;
}
#fahrzeugschein {
    display: none !important;
}

/*
 Die kleine Infobox über das aktuell gewählte Fahrzeug
*/
#webisco-car-info{
    display: flex;
    flex-direction: row;
    font-size: 18px;
    font-family: 'Satoshi Medium';
    background-color: #e9e9e9;
    border: none;
    padding: 0;
    width: 100%;
    margin: 0 15%;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 1550px) {
    #webisco-car-info {
	margin: 0 5%;
    }
}
#webisco-car-selected{
    display: inline-block;
    padding: 0.5%;
    border: 2px solid black;
}
#webisco-car-selected::before{
    content: "Gewähltes Fahrzeug:";
    font-family: 'Satoshi Medium';
    font-weight: bold;
    display: inline-block;
    margin-right: 50px;
}
#webisco-car-selected-permanent{
    display: none;
}
#webisco-car-not-selected{
}
#webisco-car-change{
    margin-left: 5%
}
#webisco-car-change a{
    text-decoration: none;
    color: white;
    background-color: #e9551e;
    padding: 7px 75px;
    transition: background-color 0.3s;
}
#webisco-car-change a:hover{
    background-color: #4a1d7c;
}




#webisco-navigation-text-links {
}
#webisco-navigation-text-links .webisco-link{
    margin-right: 10px;
    font-size: 10px;
    border: 0px;
    background: inherit;
}
@media screen and (max-width: 480px) {
  #menu-fahrzeugauswahl{
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    grid-column-gap: 8px;
    grid-row-gap: 6px;
    align-items: center;
    padding: 8px 16px;
    font-family: 'Satoshi Medium';
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
  }
  #menu-fahrzeugauswahl #webisco-car-info img {
    grid-row: 1;
    grid-column: 1;
    width: 20px !important;
    height: auto;
  }
  #menu-fahrzeugauswahl #webisco-car-info {
    display: grid;
    grid-row: 1;
    grid-column: 2;
    background-color: #7f69d7;
    color: white;
  }
  #menu-fahrzeugauswahl {
    font-size: 13px;
  }
  #menu-fahrzeugauswahl #webisco-car-change {
    margin-top: 8px;
    grid-row: 2;
    grid-column: 1 / span 2;
  }
  #menu-fahrzeugauswahl #webisco-car-change a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
  }
}

/* Allgemeine Geschäftsbedingungen
*/
#webisco-agb {
    font-family: 'Satoshi Regular';
    font-size: 16px;
    color: black;
    margin-bottom: 10px;
    text-align: left;
}
#webisco-agb p {
    font-family: 'Satoshi Regular';
    font-size: 16px;
}
#webisco-agb h2 {
    color: black;
}

/* Widerrufsbelehrung
*/
#webisco-widerrufsbelehrung {
    margin-bottom: 10px;
    text-align: left;
}
#webisco-widerrufsbelehrung p {
    font-family: 'Satoshi Regular';
    font-size: 16px;
}
#webisco-widerrufsbelehrung h3 {
    font-family: 'Gopher Medium';
}
#webisco-widerrufsbelehrung a {
    color: #7f69d7;
    text-decoration: none;
}
#webisco-widerrufsbelehrung a:hover {
    text-decoration: underline;
}
/* Batterieverordnung
*/
#webisco-batterieverordnung {
    background: #EEEEEE;
    border: solid 1px #00309C;
    padding: 5px;
    margin-bottom: 10px;
    text-align: left;
}

/* Impressum
*/
#webisco-impressum {
    margin-bottom: 10px;
    text-align: left;
}
#webisco-impressum p {
    font-family: 'Satoshi Regular';
    font-size: 16px;
}
/* Datenschutz-Hinweise
*/
#webisco-datenschutz {
    margin-bottom: 10px;
    text-align: left;
}
#webisco-datenschutz p {
    font-family: 'Satoshi Regular';
    font-size: 16px;
}

/* Versand- und Zahlungsbedingungen
*/
#webisco-versandbedingungen {
    background: #EEEEEE;
    border: solid 1px #00309C;
    padding: 5px;
    margin-bottom: 10px;
    text-align: left;
}



/* Äußerer Container */
#webisco-subsections {
    padding: 1.25rem 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Kategorie-Grid (PHP setzt class=ap24-cat-grid) */
.ap24-cat-grid {
    display: grid !important;
    gap: 1rem !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 600px) {
    .ap24-cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
}

/* Gruppen (Top Kategorien / Sonstige Kategorien) nehmen volle Breite */
#webisco-subsections .webisco-subsection-shop {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 0 !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Gruppenüberschrift (Top Kategorien / Sonstige Kategorien) */
#webisco-subsections .webisco-subsection-shop h2 {
    grid-column: 1 / -1;
    display: block !important;
    font-family: 'Gopher Medium', sans-serif;
    font-size: 1.1rem;
    font-weight: normal;
    color: #4a1d7c;
    margin: 0.5rem 0 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #e9551e;
}

/* Einzelkategorien innerhalb einer Gruppe */
#webisco-subsections .webisco-subsection-shop .webisco-subsection {
    border-radius: 0.625rem;
    border: 1px solid #eeeef6;
    background: white;
    box-shadow: 0 2px 6px rgba(74, 29, 124, 0.05);
    transition: box-shadow 0.2s, transform 0.2s;
    overflow: hidden;
}

#webisco-subsections .webisco-subsection-shop .webisco-subsection:hover {
    box-shadow: 0 6px 18px rgba(74, 29, 124, 0.13);
    transform: translateY(-2px);
}

/* H2 der obersten Ebene ausblenden */
#webisco-subsections > h2 {
    display: none;
}

/* Kategorie-Karten Hover */
.webisco-subsection {
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.webisco-subsection:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(74, 29, 124, 0.25) !important;
    background: linear-gradient(135deg, #e9551e, #c43e10) !important;
}

@media screen and (max-width: 768px) {
    #webisco-subsections,
    #webisco-subsections .webisco-subsection-shop {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.5rem;
    }
}

@media screen and (max-width: 480px) {
    #webisco-subsections,
    #webisco-subsections .webisco-subsection-shop {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
        padding: 0.5rem 0;
    }
}
/*Die Filter über der Artikeltabelle*/
#webisco-content .webisco-article-filter {
    clear: left;
    float: left;
    text-align: left;
    margin-right: 2%;
    font-family: 'Satoshi Medium'
}
@media screen and (max-width: 480px) {
    #webisco-content .webisco-article-filter {
	float: initial;
    }
}
#webisco-content .webisco-article-filter label {
    padding-right: 10px;
}
#webisco-content .webisco-article-sort {
    font-family: 'Satoshi Medium';
}
@media screen and (max-width: 480px) {
    #webisco-content .webisco-article-sort {
	margin-left: 0;
    }
    #webisco-content .webisco-article-filter #filter-hersteller {
	width: 59%;
    }
    #webisco-content .webisco-article-sort #sort {
	width: 56%;
    }
}
#webisco-content .webisco-article-sort label {
    padding-right: 10px;
}

/*
 Die Anzeige der Artikel in einer Liste zum Durchblättern
*/
/* Details Tables Styling */
.article-row-details table {
    border-radius: 0.5rem;
    overflow: hidden;
}

.article-row-details table tr:last-child td {
    border-bottom: none;
}

/* Toggle Animations */
[data-toggle] {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

[data-toggle]:not(.hidden) {
    opacity: 1;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

/* Availability Icons fix */
.webisco-article-availability-image,
.webisco-article-stock-icon {
    max-width: 20px !important;
    max-height: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

/* Responsive Layout */
@media (min-width: 768px) {
    .article-row-image {
        border-right: 1px solid #e5e7eb;
    }
}

@media (max-width: 767px) {
    .article-row-image {
        border-bottom: 1px solid #e5e7eb;
    }
    
    .article-row-actions {
        border-top: 1px solid #e5e7eb;
        border-left: none !important;
    }
}

/* Hover Effects */
.webisco-article-table-row:hover {
    transform: translateY(-2px);
}

/* OE Numbers specific styling */
.oe-numbers-wrapper .oenumbers {
    font-size: 0.8rem;
    line-height: 1.6;
}

/* Button Hover Effects */
button[data-toggle-type]:hover {
    background-color: rgba(249, 115, 22, 0.1);
}
/* Quality Badge Styling */
.quality-badge-wrapper {
    animation: fadeInUp 0.5s ease-out;
}

.quality-badge {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quality-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.quality-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.quality-badge:hover::before {
    left: 100%;
}

/* OE-Qualität Badge - Blau */
.quality-badge.oe-quality {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

/* Smart Choice Badge - Grün */
.quality-badge.smart-choice {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Badge Icons */
.badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-text {
    line-height: 1.2;
}

/* Responsive Badge */
@media (max-width: 640px) {
    .quality-badge {
        padding: 0.75rem 1rem;
    }
    
    .badge-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    .badge-text .font-bold {
        font-size: 0.875rem;
    }
    
    .badge-text .text-xs {
        font-size: 0.75rem;
    }
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulsing Effect für neue Badges (optional) */
.quality-badge.new {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }
}
/* Minimales CSS für Detailansicht eines Artikels */
/* Tab Active State */
.tablinks.active {
    @apply border-purple-600 bg-purple-50 text-purple-700;
}

/* Tabcontent Display */
.tabcontent {
    display: none;
    animation: fadeIn 0.3s ease-in;
}

.tabcontent[style*="display: block"] {
    display: block !important;
}

/* Fade Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slideshow Fade */
.Slides.fade {
    animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Manufacturer Info Header */
.ap24-manufacturer-info {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ap24-manufacturer-name {
    font-weight: 600;
}

/* Manufacturer Info Toggle Button */
.ap24-manufacturer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    color: #666;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ap24-manufacturer-toggle:hover {
    background: #482778;
    border-color: #482778;
    color: #fff;
}

.ap24-manufacturer-toggle[aria-expanded="true"] {
    background: #482778;
    border-color: #482778;
    color: #fff;
}

.ap24-icon-info {
    font-style: normal;
    line-height: 1;
}

/* Manufacturer Note Toggle */
.ap24-manufacturer-note[hidden] {
    display: none;
}

.ap24-manufacturer-note:not([hidden]) {
    display: block;
    margin-top: 10px;
    padding: 12px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    font-size: 14px;
    line-height: 1.5;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

/* Responsive Table Scroll */
@media (max-width: 768px) {
    .webisco-article-cars-text table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Print Styles */
@media print {
    .prev, .next,
    .webisco-support-cart-container,
    .tab {
        display: none !important;
    }
    
    .tabcontent {
        display: block !important;
    }
}

/* Verfügbarkeits PopUp*/

#availabilityPopup {
    display: none;
    background: #7f69d7;
    position: absolute;
    top: 80%;
    left: 5%;
    width: 90%;
    color: white;
    min-height: 420px;
    font-family: 'Satoshi Medium';
}
#availabilityPopup h2 {
    font-family: 'Gopher Medium';
    font-weight: normal;
}
#availabilityTable {
    margin-top: 2%;
}
#availabilityContent {
    width: 100%;
    margin: 0 5%;
}
#availabilityContent p {
    margin: 0;
}
#availabilityTableHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #e9e9e9;
    color: #7f69d7;
    padding: 1% 7% 1% 3%;
    font-weight: bold;
}
#availabilityTableContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 1em;
    padding: 2% 2% 2% 0;
    border-top: 1px solid white;
}
#filialeHamburg1 {
    display: flex;
    flex-direction: row;
}
#filialeHamburg1 p {
    margin: 0;
}
#filialeHamburg1 img {
    margin: 0;
    width: 20px;
    height: 20px;
    transform: rotate(270deg);
}
#closeAvailabilityPopup {
    position: absolute;
    top: 5%;
    right: 5%;
    width: 3%;
    height: auto;
    cursor: pointer;
}
@media screen and (max-width: 1550px) {
    
}

/*
 Die Renneransicht
*/
#webisco-content .webisco-teaser {
    display: none;
    background: #EEEEEE;
    border: solid 1px #00309C;
    margin-top: 7px;
    margin-bottom: 7px;
    margin-left: 0px;
    margin-right: 0px;
    overflow: auto;
}
/* <table> */
#webisco-content .webisco-teaser table {
    width: 100%;
}
#webisco-content .webisco-teaser .webisco-article {
    border: none;
    display: block;
    padding: 0px;
    margin: 0px;
    width: auto;
}
#webisco-content .webisco-teaser .webisco-article-data {
    float: left;
    margin-left: 20px;
}
#webisco-content .webisco-article-data .check-duration {
    display: flex;
    align-items: center;
}
#webisco-content .webisco-article-data .check-duration img {
    width: 8%;
    margin-right: 5%;
}
#webisco-content .webisco-article-data .check-duration p {
    font-family: 'Satoshi Medium';
    font-weight: normal;
    font-size: 16px;
}
#webisco-content .webisco-article-data .check-availability {
    display: flex;
    align-items: center;
}
#webisco-content .webisco-article-data .check-availability img {
    width: 8%;
    margin-right: 5%;
}
#webisco-content .webisco-article-data .check-availability a {
    font-family: 'Satoshi Medium';
    font-weight: normal;
    font-size: 16px;
    color: black;
}
#webisco-content .webisco-article-support {
    background-color: #e9e9e9;
    padding: 3% 5%;
}
#webisco-content .webisco-article-support p {
    font-family: 'Satoshi Medium';
    font-size: 12px;
    margin: 2% 0;
}
#webisco-content .webisco-article-support .support-header {
    border-bottom: 1px solid black;
}
#webisco-content .webisco-article-support #support-header {
    font-family: 'Satoshi Bold';
    font-size: 16px;
}
#webisco-content .webisco-article-support #support-tel {
    font-family: 'Satoshi Medium';
    font-size: 14px;
    color: #7f69d7;
}
#webisco-content .webisco-article-support #support-mail {
    color: #7f69d7;
    font-size: 14px;
    font-family: 'Satoshi Medium';
}
/* <div> */
#webisco-content .webisco-teaser .table {
    margin: 5px;
    display: block;
}
#webisco-content .webisco-teaser .row {
    float: left;
    width: 100%;
    display: table-row;
}
#webisco-content .webisco-teaser .cell  {
    display: table-cell;
    float: left;
}
#webisco-content .webisco-teaser-1 .cell {
    width: 100%;
}
#webisco-content .webisco-teaser-2 .cell {
    width: 50%;
}
#webisco-content .webisco-teaser-3 .cell {
    width: 33%;
}
#webisco-content .webisco-teaser-4 .cell {
    width: 25%;
}
#webisco-content .webisco-teaser .cell div .webisco-article-data  {
    margin-left: 0px;
    position: relative;
    float: left;
    width: auto;
}
#webisco-content .webisco-teaser .cell div .webisco-article-data .table {
    margin-left: 0px;
    display: table;
    float: none;
}
#webisco-content .webisco-teaser .cell div .webisco-article-data .table .row {
    display: table-row;
    float: none;
}
#webisco-content .webisco-teaser .cell div .webisco-article-data .table .cell {
    display: table-cell;
    width: auto;
    float: none;
    padding-bottom: 1px;
    padding-top: 1px;
    vertical-align: middle;
}
/*
 Die Detailansicht des Warenkorbs
*/
.webisco-cart {
    max-width: 1400px;
    margin: 0 auto;
}

.webisco-cart .table {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Cart Row Hover Effect */
.webisco-cart-row {
    transition: all 0.3s ease;
}

.webisco-cart-row:hover {
    transform: translateX(4px);
}

/* Remove Button */
.remove-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-center;
}

.remove-button:hover svg {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* Quantity Input */
input[name^="quantity"] {
    -moz-appearance: textfield;
}

input[name^="quantity"]::-webkit-outer-spin-button,
input[name^="quantity"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Summary Row */
.summary-row {
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
}

/* Loading Spinner */
.loading-spinner {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Mobile Optimierungen */
@media (max-width: 768px) {
    .webisco-cart {
        padding: 0.5rem;
    }
    
    .webisco-cart-row {
        margin-bottom: 1rem;
    }
}

/* Empty Cart Message */
.empty-cart-message {
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.empty-cart-message svg {
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1rem;
    opacity: 0.3;
}
/* Warenkorb-Summe */
.webisco-cart-sum {
    position: sticky;
    bottom: 0;
    z-index: 20;
    backdrop-filter: blur(10px);
}

.webisco-cart-sum .table {
    display: flex;
    flex-direction: column;
}

.webisco-cart-sum-tax {
    transition: background-color 0.2s ease;
}

.webisco-cart-sum-tax:hover {
    background-color: #f9fafb;
}

.webisco-cart-sum-total {
    position: relative;
    overflow: hidden;
}

.webisco-cart-sum-total::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.webisco-cart-sum-total:hover::before {
    left: 100%;
}

/* Action Buttons */
.webisco-cart-actions {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Continue Shopping Button */
.webisco-cart-continue-shopping a {
    position: relative;
    overflow: hidden;
}

.webisco-cart-continue-shopping a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.webisco-cart-continue-shopping a:hover::before {
    width: 300px;
    height: 300px;
}

/* Order Button */
.webisco-cart-order a {
    position: relative;
    overflow: hidden;
}

.webisco-cart-order a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.webisco-cart-order a:hover::after {
    width: 400px;
    height: 400px;
}

/* Empty Cart Button */
.webisco-cart-empty a {
    position: relative;
}

.webisco-cart-empty a:hover svg {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .webisco-cart-sum {
        position: static;
    }
    
    .webisco-cart-actions {
        flex-direction: column;
    }
    
    .webisco-cart-continue-shopping,
    .webisco-cart-order,
    .webisco-cart-empty {
        width: 100%;
    }
    
    /* Mobile: Reihenfolge ändern */
    .webisco-cart-actions {
        display: flex;
        flex-direction: column-reverse;
    }
    
    /* Order Button zuerst auf Mobile */
    .webisco-cart-order {
        order: 1;
    }
    
    .webisco-cart-continue-shopping {
        order: 2;
    }
    
    .webisco-cart-empty {
        order: 3;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e5e7eb;
    }
}

/* Loading State */
.cart-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.cart-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty Cart State */
.cart-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    rounded: 1rem;
    border: 2px dashed #d1d5db;
}

.cart-empty-state svg {
    width: 6rem;
    height: 6rem;
    margin: 0 auto 1.5rem;
    color: #9ca3af;
}

.cart-empty-state h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #374151;
    margin-bottom: 0.5rem;
}

.cart-empty-state p {
    color: #6b7280;
    margin-bottom: 2rem;
}
/*
 Der Bereich zum Blättern in Seiten
*/
#webisco-content .webisco-page-flip-container {
    font-family: 'Satoshi Medium';
    float: right;
    text-align: right;
    clear: right;
    margin-top: 3px;
    margin-bottom: 3px;
}
#webisco-content .webisco-page-flip {
    padding-left: 5px;
    font-weight: bold;
}
#webisco-content .webisco-page-flip a {
    font-weight: normal;
    color: black;
    text-decoration: none;
}
#webisco-content .webisco-page-flip a:hover {
    text-decoration: underline;
    color: #7f69d7;
}
#webisco-content .webisco-page-flip-current a { /* die aktuelle Seite */
    font-weight: bold;
    color: #7f69d7;
    text-decoration: underline;
}
#webisco-content .webisco-page-flip-1 { /* Zu Seite 1 springen */
}
#webisco-content .webisco-page-flip-back { /* Eine Seite zurück springen */
}
#webisco-content .webisco-page-flip-forward { /* Eine Seite vor springen */
}


#webisco-content .webisco-account-home-header {
    font-family: 'Gopher Medium';
    margin-bottom: 10px;
}
#webisco-content .webisco-account-home-header h4 {
    margin-top: 0;
    font-weight: normal;
    color: #7f69d7;
    font-size: 24px;
}
#webisco-content .webisco-account-home-header h2 {
    margin-bottom: 0;
    font-weight: normal;
}
#webisco-content .webisco-account-home-action {
    width: 250px;
    max-width: 250px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: #482778;
    border: none;
    margin: 20px;
    padding: 0 1%;
    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 480px) {
    #webisco-content .webisco-account-home-action {
        width: 150px;
        line-height: initial;
        text-align: initial;
        margin: 10px;
    }
}
#webisco-content .webisco-account-home-actions-wrapper {
    display: flex;
    flex-wrap: wrap;
}
#webisco-content .webisco-account-home p {
    font-size: 18px;
    margin-bottom: 2%;
}
#webisco-content .webisco-account-home-action a{
    display: block;
    color: white;
    font-family: 'Gopher Medium';
    text-decoration: none;
}
#webisco-content .webisco-account-home-action:hover{
    background-color: #e9551e;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
#webisco-content .webisco-account-home-action img {
    width: 10%;
}
#webisco-content .webisco-account-cart-show {
}
#webisco-content .webisco-account-cart-show a {
}
#webisco-content .webisco-account-cart-order { /* Nur vorhanden wenn der Warenkorb Artikel enthält */
}
#webisco-content .webisco-account-cart-order a {
}
#webisco-content .webisco-account-edit {
}
#webisco-content .webisco-account-edit a {
}
#webisco-content .webisco-account-continue-shopping {
    display: none;
}
#webisco-content .webisco-account-continue-shopping a {
}
#webisco-content .webisco-account-order-history {
}
#webisco-content .webisco-account-order-history a {
}
#webisco-content .webisco-account-logout {
}
#webisco-content .webisco-account-logout a {
}

/*
 Die Kundenstammdaten zum Bearbeiten
*/
#webisco-content .webisco-account-details-required {
    display: none;
}
#webisco-content #login-div-1 {
    display: flex;
    flex-direction: row;
}
#webisco-content #login-div-3 {
    display: flex;
    flex-direction: row;
}
#webisco-content #login-div-4 {
    display: flex;
    flex-direction: row;
}
#webisco-content #login-div-5 {
    display: flex;
    flex-direction: row;
}
@media screen and (max-width: 480px) {
    #webisco-content #login-div-1 {
	flex-direction: column;
    }
    #webisco-content #login-div-3 {
	flex-direction: column;
    }
    #webisco-content #login-div-4 {
	flex-direction: column;
    }
    #webisco-content #login-div-5 {
	flex-direction: column;
    }
}
#webisco-content .shipping-div-1 {
    display: flex;
    flex-direction: row;
}
#webisco-content .shipping-div-2 {
    display: flex;
    flex-direction: row;
}
#webisco-content .shipping-div-3 {
    display: flex;
    flex-direction: row;
}
@media screen and (max-width: 480px) {
    #webisco-content .shipping-div-1 {
	flex-direction: column;
    }
    #webisco-content .shipping-div-2 {
        flex-direction: column;
    }
    #webisco-content .shipping-div-3 {
        flex-direction: column;
    }
}
#webisco-content .webisco-account-details-edit {
    margin-bottom: 20px;
}
#webisco-content .webisco-account-details-edit #kundendaten{
    padding: 1rem 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),
                0 4px 6px -4px rgba(0,0,0,0.1);
}
#webisco-content .webisco-account-details-edit table {
    border-spacing: 0px;
}
#webisco-content .webisco-account-details-edit td {
    padding: 3px;
}
#webisco-account-details-edit-table {
    font-family: 'Satoshi Medium';
}
#webisco-account-details-edit-table .table {
    display: table;
}
@media screen and (max-width: 480px) {
    #webisco-account-details-edit-table .table {
	width: 100%;
    }
}
#webisco-account-details-edit-table .table .row {
    display: flex;
    flex-direction: column;
}
#webisco-account-details-edit-table .cell {
    display: table-cell;
    padding: 10px 10px 10px 0;
    vertical-align: top;
}
#webisco-account-details-edit-table-billing-address {
    display: table;
}
#webisco-account-details-edit-table-billing-address .table input {
    font-family: 'Satoshi Medium';
}
#webisco-account-details-edit-table-billing-address .table select {
    font-family: 'Satoshi Medium';
}
#webisco-account-details-edit-table-billing-address .table {
}
#webisco-account-details-edit-table-billing-address .row {
    display: table-row;
}
#webisco-account-details-edit-table-billing-address .cell{
    display: table-cell;
    padding: 4px 0;
}
#webisco-account-details-edit-table-billing-address .cell input,
#webisco-account-details-edit-table-billing-address .cell select {
    width: 220px !important;
    height: 30px !important;
    margin-right: 20px;
    box-sizing: border-box;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    transition: all .15s ease;
}
#webisco-account-details-edit-table-billing-address .cell input:hover {
    border-color: #cbd5e1;
    background: #ffffff;
}
#webisco-account-details-edit-table-shipping-address .cell input,
#webisco-account-details-edit-table-shipping-address .cell select {
    width: 220px !important;
    height: 30px !important;
    margin-right: 20px;
    box-sizing: border-box;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    transition: all .15s ease;
}
#webisco-account-details-edit-table-shipping-address .cell input:hover {
    border-color: #cbd5e1;
    background: #ffffff;
}
#webisco-account-details-edit-table-shipping-address.table {
    display: none;
}
#webisco-account-details-edit-table-shipping-address .row {
    display: table-row;
}
#webisco-account-details-edit-table-shipping-address .cell{
    display: table-cell;
    padding: 4px 0;
}
@media screen and (max-width: 480px) {
    #webisco-account-details-edit-table-billing-address .cell input,
    #webisco-account-details-edit-table-billing-address .cell select {
        width: 98% !important;
	height: 25px !important;
	margin-right: 5px;
    }
    #webisco-account-details-edit-table-shipping-address .cell input,
    #webisco-account-details-edit-table-shipping-address .cell select {
        width: 98% !important;
	height: 25px !important;
	margin-right: 5px;
    }
    #webisco-account-details-edit-table-billing-address .cell{
        display: flex;
        padding: 4px 0;
    }
    #webisco-account-details-edit-table-shipping-address .cell{
        display: flex;
        padding: 4px 0;
    }
}
#webisco-account-details-edit-table .webisco-shipping-address {
    float: left;
}
#webisco-content .webisco-account-details-edit-table-shipping-address {
}
#webisco-content #webisco-account-details-edit-checkbox-shipping-address {
    margin-left: 0;
}
#webisco-content #webisco-account-details-edit-table-settings .row {
    flex-direction: row;
}
#webisco-content #webisco-account-details-edit-submit {
    color: white;
    background: #e9551e;
    height: 35px;
    border: none;
    cursor: pointer;
    padding: 0 15%;
}
#webisco-content #webisco-account-details-edit-submit:hover {
    background: #4a1d7c;
}



/*
 Der Fortschritt ders Bestellvorgangs
*/
/* Progress Steps - Feintuning */
.progress-steps-container {
    position: relative;
}

.step-container {
    cursor: pointer;
    user-select: none;
}

.step-icon {
    z-index: 10;
}

/* Smooth Animations */
@keyframes pulse-soft {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

.animate-pulse {
    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.webisco-login-header {
    text-align: center;
    font-size: large;
    font-family: "Gopher Medium";
}
#webisco-login-form .table .row {
    margin: 1rem 0;
}
#webisco-create-customer .webisco-login-body {
    margin-top: 1rem;
}
/*PayPal Express Checkout*/
#webisco-content .webisco-login-body p {
    font-size: 18px;
    margin: 1rem 0;
    font-family: "Satoshi Medium";
    font-weight: unset;
}

/* Payment/Shipping Options Styling */
.payment-logo,
.shipping-logo {
    max-height: 32px;
    width: auto;
}

/* Register Boxes */
.register-box h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.register-box form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.register-box input[type="text"],
.register-box input[type="email"],
.register-box input[type="password"] {
    width: 100%;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid #e5e7eb;
    transition: all 0.2s;
}

.register-box input[type="text"]:focus,
.register-box input[type="email"]:focus,
.register-box input[type="password"]:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.register-box button {
    width: 100%;
    background: linear-gradient(to right, #f97316, #ea580c);
    color: white;
    font-weight: 600;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.register-box button:hover {
    background: linear-gradient(to right, #ea580c, #c2410c);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* Mobile Optimierung */
@media (max-width: 640px) {
    .register-box h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .register-box form {
        gap: 0.75rem;
    }
    
    .register-box input[type="text"],
    .register-box input[type="email"],
    .register-box input[type="password"] {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .register-box button {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .progress-line,
    .progress-line-active {
        top: 1.5rem !important;
    }
}
/*
 Die Bestellhistorie
*/
#webisco-order-history-form img {
    width: 40px;
    height: 40px;
    margin-right: 1%;
}
#webisco-order-history .webisco-order-history-filter{
    background: white;
    border: solid 1px black;
    margin-bottom: 1px;
    padding-left: 1%;
    clear: both;
    float: left;
    width: 100%;
}
#webisco-order-history .webisco-order-history-filter form{
    font-family: 'Satoshi Medium';
    display: flex;
    float: left;
    margin: 3px;
    width: 100%;
    align-items: center;
}
#webisco-order-history .webisco-order-history-filter label {
    margin-right: 1%;
}
#webisco-order-history .webisco-order-history-filter input{
    max-width: 80px;
    width: 80px;
    max-height: 30px;
    height: 30px;
    text-align: center;
    background-color: #1a62be;
    color: white;
    margin-right: 1%;
    border: none;
    font-family: 'Satoshi Medium';
}
#webisco-order-history #webisco-order-history-filter-submit {
    background-color: #e9551e;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}
#webisco-order-history #webisco-order-history-filter-submit:hover {
    background-color: #4a1d7c;
}
#webisco-order-history .webisco-order {
    margin: 10px 0;
    width: 100%;
    border: solid 1px black;
    display: block;
    float: left;
    background: white;
    clear: both;
    font-family: 'Satoshi Medium';
}
#webisco-order-history .webisco-order-header {
    display: table;
    margin-top: 1%;
    margin-left: 1%;
}
#webisco-order-history .webisco-order-header div.row {
    display: table-row;
    float: none;
}
#webisco-order-history .webisco-order-header div.cell {
    display: table-cell;
    width: auto;
    float: none;
    padding: 5px;
    padding-bottom: 1px;
    padding-top: 1px;
    vertical-align: middle;
}
#webisco-order-history .webisco-order-items {
    clear: both;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 20px;
    float: left;
    margin: 15px 5px 5px 5px;
    width: 99%;
    background: #FFFFFF;
}
#webisco-order-history .webisco-order-items .header {
    display: contents;
    font-family: 'Satoshi Bold';
    font-weight: bold;
    color: #1A62BE;
}
#webisco-order-history .webisco-order-items .header div.cell {
    border-bottom: 1px solid black;
}
#webisco-order-history .webisco-order-items .row {
    display: contents;
}
#webisco-order-history .webisco-order-items .cell {
    padding: 10px;
    text-align: left;
}
#webisco-order-history .webisco-order-items .cell a {
    color: black;
}
#webisco-order-history .cell.stretch {
    gird-column: span 2;
}
.mobile-order-history .article-summary {
    display: flex;
    align-items: center;
    padding: 0 1%;
    color: #1a62be;
    justify-content: space-between;
    width: 95%;
    border-bottom: 1px solid #1a62be;
}
.mobile-order-history .article-summary img {
    width: 6%;
    transition: transform 0.3s ease;
}
.mobile-order-history .article-summary img.rotate {
    transform: rotate(180deg);
}
.mobile-order-history-dropdown {
    display: none;
}
.mobile-order-history-dropdown.show {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    justify-content: space-between;
    padding: 0 1%;
}
.mobile-order-history-dropdown .row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.mobile-order-history-dropdown .header {
    display: block !important;
}
.mobile-order-history .article-shipping-cost {
    display: table;
}
.mobile-order-history .article-shipping-cost .cell {
    display: table-cell;
    padding: 5px;
}
.popup{
  display:none;
  position:fixed; inset:0; z-index:3001;
  background:rgba(0,0,0,.4);
  padding:16px;
  align-items:center; justify-content:center;
}
.popup-content{
  position:relative;
  background:#4a1d7c;
  width:min(92vw, 760px);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  color:#fff;
  padding:24px 24px 20px 56px;
}
#popup-newsletter-icon{
  position:absolute;
  left:20px;       
  top:22px;
  width:26px; height:26px;
}
@media (max-width:520px){
  .popup-content{ padding:18px 16px 16px 48px; }
  #popup-newsletter-icon{ left:16px; top:18px; width:22px; height:22px; }
}
.close-btn-popup{
  position:absolute;
  top:10px; right:10px;
  cursor:pointer;
}
.close-btn-popup img{ width:24px; height:24px; display:block; }
#mc_embed_signup,
#popup_mc_embed_signup{
  width:100% !important;
  background:transparent !important;
}
#popup_mc_embed_signup_scroll h4,
#popup_mc_embed_signup_scroll p,
.popup-content p{
  color:#fff; font-family:'Satoshi Medium', system-ui, sans-serif;
  margin:0 0 10px 0;
}
.popup-mc-field-group{
  display:grid !important;
  grid-template-columns:1fr auto;
  gap:12px; align-items:center;
  margin:12px 0;
}
.popup-mc-field-group input[type="email"]{
  height:44px; width:100%;
  padding:0 12px; border:0; border-radius:6px; box-sizing:border-box;
}
#popup-mc-embedded-subscribe.button{
  height:44px !important;
  padding:0 14px;
  border:0; border-radius:6px;
  background:#e9551e; color:#fff; cursor:pointer;
  white-space:nowrap; transition:background .25s ease;
}
#mc-embedded-subscribe {
    margin: 1em 0 1em 0 !important;
}
#popup-mc-embedded-subscribe.button:hover{ background:#7f69d7; }
@media (max-width:520px){
  .popup-mc-field-group{ grid-template-columns:1fr; }
  #popup-mc-embedded-subscribe.button{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  #popup-mc-embedded-subscribe.button{ transition:none; }
}

ul {
    padding-inline-start: 0;
}

/* ========================================
   GARAGE WIDGET STYLING
   ======================================== */

#garage-webisco-widget {
    font-family: 'Satoshi Medium', system-ui, -apple-system, sans-serif;
    padding-bottom: 1rem;
}

/* Hauptcontainer - Reset und neues Layout */
#garage-webisco-widget #webisco-car-selection-permanent {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 1.5rem;
    width: 100% !important;
    padding: 0 !important;
    margin: 0;
}

/* Alle direkten Kinder untereinander */
#garage-webisco-widget #webisco-car-selection-permanent > * {
    width: 100% !important;
    flex-shrink: 0;
}

/* Innere Table-Struktur auch vertikal */
#garage-webisco-widget #webisco-car-selection-permanent > .table {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

#garage-webisco-widget #webisco-car-selection-permanent > .table > .row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Section Headers */
#garage-webisco-widget .table > .row:first-child > .cell {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    padding: 0.75rem 0;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1rem;
}

/* Form Container Styling - Reset old styles and apply new */
#garage-webisco-widget #webisco-car-selection-incremental-permanent,
#garage-webisco-widget #webisco-car-selection-numbers-permanent,
#garage-webisco-widget #webisco-motor-selection-permanent {
    background: #f9fafb;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    margin-bottom: 1rem;
    /* Reset old positioning */
    margin-left: 0;
    margin-top: 0;
    width: 100%;
    float: none;
    position: relative;
}

/* Select Dropdowns */
#garage-webisco-widget select {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background-color: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem;
}

#garage-webisco-widget select:hover {
    border-color: #9333ea;
}

#garage-webisco-widget select:focus {
    outline: none;
    border-color: #9333ea;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

#garage-webisco-widget select:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

#garage-webisco-widget select option {
    padding: 0.5rem;
}

#garage-webisco-widget select optgroup {
    font-weight: 600;
    color: #4b5563;
    background: #f3f4f6;
}

/* Cell Layout für Selects */
#garage-webisco-widget .table .row .cell {
    margin-bottom: 1rem;
}

/* HSN/TSN Wrapper */
#garage-webisco-widget .hsn-tsn-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

#garage-webisco-widget .hsn-container,
#garage-webisco-widget .tsn-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#garage-webisco-widget .hsn-container label,
#garage-webisco-widget .tsn-container label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    order: -1;
}

/* Input Fields */
#garage-webisco-widget input[type="text"] {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background-color: white;
    color: #374151;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#garage-webisco-widget input[type="text"]:hover {
    border-color: #9333ea;
}

#garage-webisco-widget input[type="text"]:focus {
    outline: none;
    border-color: #9333ea;
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

#garage-webisco-widget input[type="text"]::placeholder {
    color: #9ca3af;
}

/* Submit Buttons */
#garage-webisco-widget input[type="submit"],
#garage-webisco-widget .search-button {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

#garage-webisco-widget input[type="submit"]:hover,
#garage-webisco-widget .search-button:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

#garage-webisco-widget input[type="submit"]:active,
#garage-webisco-widget .search-button:active {
    transform: translateY(0);
}

/* Motorcode Input */
#garage-webisco-widget #webisco-motor-selection-code {
    width: 100%;
    max-width: 300px;
}

/* Multiple Choice Container */
#garage-webisco-widget .multiple-choice-container {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    padding: 1.5rem;
}

#garage-webisco-widget .multiple-choice-container p {
    color: #92400e;
    margin-bottom: 1rem;
}

#garage-webisco-widget .multiple-choice-container select {
    border-color: #f59e0b;
}

#garage-webisco-widget .multiple-choice-container input[type="submit"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    margin-top: 1rem;
}

#garage-webisco-widget .multiple-choice-container input[type="submit"]:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

/* Placeholder Selects */
#garage-webisco-widget .webisco-placeholder-select {
    opacity: 0.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    #garage-webisco-widget .hsn-tsn-wrapper {
        grid-template-columns: 1fr;
    }

    #garage-webisco-widget .hsn-tsn-wrapper input[type="submit"],
    #garage-webisco-widget .hsn-tsn-wrapper .search-button {
        width: 100%;
        margin-top: 0.5rem;
    }

    #garage-webisco-widget #webisco-car-selection-incremental-permanent,
    #garage-webisco-widget #webisco-car-selection-numbers-permanent,
    #garage-webisco-widget #webisco-motor-selection-permanent {
        padding: 1rem;
    }
}

/* Ausgewähltes Fahrzeug */
#garage-webisco-widget #webisco-car-selected-permanent {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    color: #065f46;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#garage-webisco-widget #webisco-car-selected-permanent::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2310b981' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: contain;
    flex-shrink: 0;
}

/* Fahrzeug ändern Link */
#garage-webisco-widget #webisco-car-change a {
    color: #9333ea;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

#garage-webisco-widget #webisco-car-change a:hover {
    color: #7c3aed;
    text-decoration: underline;
}

/* Labels */
#garage-webisco-widget label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 0.5rem;
}

/* Row/Cell Grid Layout Improvements */
#garage-webisco-widget .table {
    display: block;
}

#garage-webisco-widget .table > .row {
    display: block;
    margin-bottom: 0.5rem;
}

#garage-webisco-widget .table > .row > .cell {
    display: block;
}

/* ============================================================
   Meine Bestellungen / Rechnungen – Tabs + Cards
   ============================================================ */

/* ── Tab-Bar ─────────────────────────────────────────────── */
#order-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 1.25rem;
}

.order-tab {
    padding: 8px 20px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.order-tab:hover {
    border-color: #f97316;
    color: #f97316;
}

.order-tab--active {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
}

/* ── Bestellkarte ────────────────────────────────────────── */
.order-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ── Tracking-Bereich ────────────────────────────────────── */
.order-tracking-area {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.order-tracking-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.order-tracking-badge--dhl {
    background: #FFCC00;
    color: #1a1a1a;
    border-color: #e5b800;
}

.order-tracking-badge a {
    color: inherit;
    text-decoration: underline;
}

/* ── Rechnungskarten ─────────────────────────────────────── */
#rechnungen-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rechnung-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.rechnung-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.rechnung-card__nr {
    font-weight: 700;
    font-size: 15px;
    color: #111827;
}

.rechnung-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 10px;
}

.rechnung-card__preis {
    font-weight: 600;
    color: #374151;
}

.rechnung-card__actions {
    display: flex;
    justify-content: flex-end;
}

.rechnung-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.rechnung-status--bezahlt {
    background: #d1fae5;
    color: #065f46;
}

.rechnung-status--offen {
    background: #fee2e2;
    color: #991b1b;
}

.rechnung-pdf-btn {
    display: inline-block;
    padding: 6px 14px;
    background: #f97316;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.rechnung-pdf-btn:hover {
    background: #ea6c0a;
}

/* ============================================================
   Design Improvements – Automobileparts24
   Brand: Orange #FF551E | Dark Purple #482778 | Light Purple #7f69d7
   ============================================================ */

/* 1. Category card gradient backgrounds */
.gradient-bg-1  { background: linear-gradient(135deg, #482778 0%, #7f69d7 100%); }
.gradient-bg-2  { background: linear-gradient(135deg, #5c3095 0%, #9b87e8 100%); }
.gradient-bg-3  { background: linear-gradient(135deg, #c43f16 0%, #FF551E 100%); }
.gradient-bg-4  { background: linear-gradient(135deg, #6b3da0 0%, #482778 100%); }
.gradient-bg-5  { background: linear-gradient(135deg, #FF551E 0%, #c43f16 100%); }
.gradient-bg-6  { background: linear-gradient(135deg, #7f69d7 0%, #482778 100%); }
.gradient-bg-7  { background: linear-gradient(135deg, #482778 0%, #FF551E 100%); }
.gradient-bg-8  { background: linear-gradient(135deg, #9b87e8 0%, #482778 100%); }
.gradient-bg-9  { background: linear-gradient(135deg, #FF551E 0%, #7f69d7 100%); }
.gradient-bg-10 { background: linear-gradient(135deg, #7f69d7 0%, #FF551E 100%); }

/* 2. Bestseller section – branded gradient header */
.bestseller-section {
    overflow: hidden;
}

.section-brand-header {
    background: linear-gradient(135deg, #482778 0%, #7f69d7 100%);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.section-brand-header h2 {
    color: #ffffff;
    margin: 0;
}

.section-brand-header .carousel-btn {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.section-brand-header .carousel-btn:hover:not(:disabled) {
    border-color: #FF551E;
    background: rgba(255, 85, 30, 0.2);
    color: #FF551E;
}

/* 3. Product cards – orange hover & top-border reveal */
.product-card .product-title a:hover,
.product-card .product-manufacturer a:hover {
    color: #FF551E !important;
    text-decoration: none;
}

.product-card {
    border-top: 3px solid transparent;
    transition: border-color 0.25s, box-shadow 0.3s, transform 0.3s;
}

.product-card:hover {
    border-top-color: #FF551E;
}

/* 4. Section title accent – orange/purple left border */
.brand-section-title {
    position: relative;
    padding-left: 1.25rem;
}

.brand-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.12em;
    bottom: 0.12em;
    width: 4px;
    background: linear-gradient(to bottom, #FF551E, #482778);
    border-radius: 2px;
}

/* 5. Hero section – brand accent top borders */
#lcp-hero-section .vehicle-selector-wrapper .bg-white {
    border-top: 4px solid #482778;
}

#lcp-hero-section .slideshow-wrapper .bg-white {
    border-top: 4px solid #FF551E;
}

/* 6. Separator / trust badges – brand gradient */
.seperator {
    background: linear-gradient(135deg, #482778 0%, #7f69d7 100%);
    border-radius: 1rem;
    margin-bottom: 2rem;
}

.seperator .seperator-text {
    color: #ffffff !important;
}

.seperator .seperator-icon img {
    filter: brightness(0) invert(1);
}

/* 7. Text area headings – orange left border */
.text-area h2 {
    position: relative;
    padding-left: 1rem;
    border-left: 4px solid #FF551E;
}

/* 8. Category cards – orange bottom border reveal on hover */
.ccategory-card .category-content {
    border-bottom: 3px solid transparent;
    transition: border-color 0.25s;
}

.ccategory-card:hover .category-content {
    border-bottom-color: #FF551E;
}

.ccategory-card .category-name {
    transition: color 0.25s;
}

.ccategory-card:hover .category-name {
    color: #482778;
}

/* 9. Vehicle selector placeholder – purple shimmer */
#vehicle-selector-placeholder .animate-pulse .bg-gray-200 {
    background: linear-gradient(90deg, #f0ebf8 25%, #e4d9f5 50%, #f0ebf8 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 10. CTA arrow – slide on hover */
.cta-btn-group-arrow {
    transition: transform 0.3s;
}

.popular-categories-section a:hover .cta-btn-group-arrow {
    transform: translateX(5px);
}

/* 11. Chatbot button – attention pulse ring */
#ap24-chat-btn {
    position: relative;
}

#ap24-chat-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    border: 2px solid #FF551E;
    opacity: 0;
    animation: chat-pulse 2.5s ease-out infinite;
}

@keyframes chat-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.5); }
}

/* 12. Smooth section reveal */
@media (prefers-reduced-motion: no-preference) {
    .bestseller-section,
    .popular-categories-section,
    .text-area,
    .seperator {
        animation: section-reveal 0.5s ease both;
    }
}

@keyframes section-reveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   AP24 SHOP – ENHANCED DESIGN LAYER
   Ziel: konsistentes, markentreues Design für den Shop-Bereich
   Farben: #4a1d7c (Lila), #7f69d7 (Lila-hell), #FF551E (Orange)
   Fonts: Gopher Medium (Überschriften), Satoshi (Text)
   ============================================================ */

/* --- Seitenstruktur & Hintergrund --- */
body {
    background-color: #f5f5f8;
}

/* --- Rootline / Breadcrumb --- */
.rootline {
    background: #4a1d7c;
    padding: 0.55rem 15%;
    display: flex;
    align-items: center;
}

/* Alles weiß – inkl. non-link Text (aktive Seite) */
.rootline #webisco-rootline {
    margin: 0 !important;
    color: white !important;
    font-family: 'Satoshi Medium', sans-serif;
    font-size: 0.875rem;
}

.rootline #webisco-rootline a {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none;
    transition: color 0.15s;
}

.rootline #webisco-rootline a:hover {
    color: #FF551E !important;
    text-decoration: none;
}

/* Alle span-Elemente (inkl. aktive Position) weiß */
.rootline .webisco-rootline-item,
.rootline .webisco-rootline-title {
    color: white !important;
}

/* Letztes Item = aktive Seite: fett & voll weiß */
.rootline .webisco-rootline-item:last-child {
    color: white !important;
    font-family: 'Satoshi Bold', sans-serif;
}

/* Separator zwischen Items */
.rootline .webisco-rootline-item::after {
    content: '›';
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0.35rem;
}

.rootline .webisco-rootline-item:last-child::after {
    display: none;
}

/* --- Fahrzeug-Info-Bar --- */
#webisco-car-info {
    background: linear-gradient(90deg, #4a1d7c 0%, #6b4fa3 100%) !important;
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 0.65rem clamp(1rem, 5%, 15%) !important;
    color: white !important;
    gap: 1.25rem;
    box-shadow: 0 2px 6px rgba(74, 29, 124, 0.25);
    align-items: center;
}

#webisco-car-selected {
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 0.5rem;
    padding: 0.35rem 0.875rem !important;
    background: rgba(255,255,255,0.1);
    color: white;
    font-family: 'Satoshi Medium', sans-serif;
    font-size: 0.9rem;
}

#webisco-car-selected::before {
    content: "Fahrzeug:" !important;
    margin-right: 0.6rem !important;
    color: rgba(255,255,255,0.6) !important;
    font-weight: normal !important;
    font-family: 'Satoshi Regular', sans-serif;
    font-size: 0.8rem;
}

#webisco-car-change {
    margin-left: 0 !important;
}

#webisco-car-change a {
    background-color: #FF551E !important;
    border-radius: 0.5rem !important;
    padding: 0.4rem 1.1rem !important;
    font-family: 'Satoshi Medium', sans-serif !important;
    font-size: 0.85rem;
    transition: background-color 0.2s, transform 0.15s !important;
    display: inline-block !important;
}

#webisco-car-change a:hover {
    background-color: #e03d00 !important;
    transform: translateY(-1px);
}

/* --- Hauptbereich Layout --- */
.main-area {
    display: block !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#webisco-content {
    box-sizing: border-box;
}

/* --- Kategorien-Sidebar: original beibehalten, nur optisch verbessern --- */
#catMenuHead {
    background: linear-gradient(135deg, #4a1d7c 0%, #7f69d7 100%) !important;
    font-family: 'Gopher Medium', sans-serif !important;
    letter-spacing: 0.05em;
}

#catMenuContainer li:hover {
    background-color: #faf8ff !important;
}

#catMenuContainer a {
    color: #4a1d7c !important;
    transition: color 0.15s, padding-left 0.15s;
}

#catMenuContainer a:hover {
    color: #FF551E !important;
    padding-left: 1.5em !important;
}

/* --- Webisco Content-Bereich --- */
#webisco-content {
    background: transparent;
}

#webisco-content h1 {
    font-size: 1.625rem !important;
    font-family: 'Gopher Medium', sans-serif !important;
    color: #1a0d2e !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em;
}

#webisco-content h2 {
    color: #7f69d7 !important;
    font-family: 'Satoshi Medium', sans-serif !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    letter-spacing: 0.01em;
}

/* Einzelne Kategorie-Kacheln: Farbe wird via PHP/Tailwind gesetzt */
.webisco-subsection a {
    display: flex;
    text-decoration: none;
    font-family: 'Satoshi Medium', sans-serif;
    font-size: 0.875rem;
    transition: color 0.15s;
}

.webisco-subsection-name {
    display: block;
}

/* --- Artikel-Tabellenzeilen --- */
.webisco-article-table-row {
    border-radius: 0.75rem !important;
    border: 1px solid #eeeef6 !important;
    background: white !important;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 6px rgba(74, 29, 124, 0.04);
    transition: box-shadow 0.25s, transform 0.2s !important;
    overflow: hidden;
}

.webisco-article-table-row:hover {
    box-shadow: 0 8px 24px rgba(74, 29, 124, 0.11) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(127, 105, 215, 0.28) !important;
}

/* Preis – orange & prominent */
.cell.price,
.webisco-article-price,
[class*="webisco-article-price"],
[class*="article-price"] {
    color: #FF551E !important;
    font-family: 'Gopher Medium', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: normal !important;
}

/* Hersteller-Info */
.ap24-manufacturer-name {
    font-family: 'Satoshi Medium', sans-serif;
    color: #4a1d7c;
    font-size: 0.9rem;
}

.ap24-manufacturer-toggle {
    background: none;
    border: 1px solid #dcd8f2;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #7f69d7;
    font-size: 0.65rem;
    padding: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    vertical-align: middle;
}

.ap24-manufacturer-toggle:hover {
    background: #4a1d7c;
    color: white;
    border-color: #4a1d7c;
}

.ap24-manufacturer-note {
    background: #faf9ff;
    border-top: 1px solid #eeeef6;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-family: 'Satoshi Regular', sans-serif;
    color: #555;
    border-radius: 0 0 0.5rem 0.5rem;
    margin-top: 0.5rem;
}

/* --- Filter & Sortierung --- */
.webisco-article-filter select,
.webisco-article-sort select {
    border: 1px solid #e0ddf5;
    border-radius: 0.5rem;
    padding: 0.35rem 0.6rem;
    font-family: 'Satoshi Medium', sans-serif;
    font-size: 0.875rem;
    color: #2a1d42;
    background: white;
    cursor: pointer;
    transition: border-color 0.2s;
}

.webisco-article-filter select:focus,
.webisco-article-sort select:focus {
    outline: none;
    border-color: #7f69d7;
    box-shadow: 0 0 0 3px rgba(127, 105, 215, 0.12);
}

/* --- Pagination --- */
.webisco-page-flip-forward a,
.webisco-page-flip-back a,
[class*="webisco-page"] a {
    font-family: 'Satoshi Medium', sans-serif !important;
    color: #4a1d7c !important;
    transition: color 0.2s;
}

.webisco-page-flip-current {
    color: #FF551E !important;
    font-family: 'Satoshi Bold', sans-serif !important;
}

/* --- Verfügbarkeits-Popup --- */
#availabilityPopup {
    background: rgba(26, 13, 46, 0.6) !important;
    backdrop-filter: blur(4px);
}

#availabilityContent {
    border-radius: 1.125rem !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25), 0 4px 12px rgba(74,29,124,0.12) !important;
}

/* --- Warenkorb-Button im Artikel --- */
.webisco-article-table-row input[type="submit"],
.webisco-article-table-row button[type="submit"],
[class*="webisco-order"] input[type="submit"],
[class*="webisco-cart"] input[type="submit"] {
    background-color: #4a1d7c !important;
    border: none !important;
    border-radius: 0.5rem !important;
    color: white !important;
    font-family: 'Satoshi Medium', sans-serif !important;
    transition: background-color 0.2s, transform 0.15s !important;
    cursor: pointer;
}

.webisco-article-table-row input[type="submit"]:hover,
.webisco-article-table-row button[type="submit"]:hover {
    background-color: #FF551E !important;
    transform: translateY(-1px);
}

/* --- Responsiv --- */
@media (max-width: 1550px) {
    .rootline {
        padding: 0.55rem 5%;
    }
}

@media (max-width: 480px) {
    .rootline {
        padding: 0.5rem 2%;
    }

    #webisco-content h1 {
        font-size: 1.25rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webisco-article-table-row,
    .webisco-subsection-shop,
    #catMenuContainer a,
    #webisco-car-change a {
        transition: none !important;
        transform: none !important;
    }
}

/* --- Garage Popup: hover/group-hover Varianten (nicht in compiliertem Tailwind) --- */
.hover\:border-purple-600:hover { border-color: #7e22ce; }
.hover\:bg-purple-50:hover { background-color: #faf5ff; }
.group:hover .group-hover\:bg-purple-50 { background-color: #faf5ff; }
.group:hover .group-hover\:text-purple-700 { color: #6d28d9; }
.hover\:bg-purple-700:hover { background-color: #6d28d9; }
.hover\:bg-purple-600:hover { background-color: #7e22ce; }