@charset "utf-8";
/* ======================== */
/*   FONTS/BASICS/GENERAL   */
/* ======================== */

@font-face {
  font-family: 'MMHeadlinePro';
  src: url('https://red.mediamarkt.at/x-fonts/MMHeadlinePro-Regular_1.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: 'Noto Sans', Arial, sans-serif;
}

/* Seite / Hintergrund allgemein */
body {
  margin: 0;
  color: #fff;
  background: #020206; /* Fallback-Farbe */
  position: relative;
  overflow-x: hidden;
}

/* Inhaltsebene über dem Effekt */
/*#page-content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: auto;
}*/

/* Lichtspuren im Hintergrund */
/*body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(110deg,
      rgba(223,0,0,0) 0%,
      rgba(223,0,0,0.85) 40%,
      rgba(223,0,0,0) 80%
    ),
    linear-gradient(115deg,
      rgba(255,120,0,0) 10%,
      rgba(255,120,0,0.9) 45%,
      rgba(255,120,0,0) 85%
    ),
    linear-gradient(120deg,
      rgba(120,0,255,0) 20%,
      rgba(120,0,255,0.6) 55%,
      rgba(120,0,255,0) 90%
    );
  background-repeat: no-repeat;
  background-size: 260% 140%, 280% 140%, 300% 140%;
  background-position: -150% 70%, -170% 80%, -190% 75%;
  filter: blur(10px);
  opacity: 0.45;
  animation: rushLights 4s linear infinite;
  pointer-events: none;
}*/

/* Vignette */
/*body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at top center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 60%);
  pointer-events: none;
  inset: 0 15px 0 0;
}

@keyframes rushLights {
  0% {
    background-position: -150% 70%, -170% 80%, -190% 75%;
  }
  100% {
    background-position: 150% 70%, 170% 80%, 190% 75%;
  }
}*/

/* ========================= */
/*           HEADER          */
/* ========================= */

/* äußerer, roter Balken */
header#main-header {
  background-color: #DF0000;
  padding: 0.5rem 0;
  padding-bottom: 0;
}

/* innerer Container: max 1472px, zentriert */
#header-inner {
  max-width: calc(1472px + 2rem);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* linker Bereich: Logo */
#logo-box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

header img.logo-svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* mittlerer Bereich: Suche + Icons */
#header-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

/* rechter Bereich: Language Switcher */
#header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Basis: Logo-Container */
#logo {
  max-width: 10rem;
  position: relative;
}

/* Swirl initial unsichtbar */
.logo-swirl {
  display: none;
}

/* MOBILE: statt Wort-Logo nur Swirl zeigen */
@media (max-width: 674.98px) {
  #logo {
    max-width: 2.5rem;       /* kompakter */
  }

  #logo .logo-svg {
    display: none;           /* MM-Logo ausblenden */
  }

  #logo .logo-swirl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #logo .logo-swirl svg {
    width: 50px;
    height: 50px;
    display: block;
  }
	
	#shop-icons .rush-account-btn,
	shop-icons .rush-icon-btn {
	width: 40px;
    height: 40px;
	}
	
	#shop-icons .rush-account-btn,
	#shop-icons .rush-icon-btn {
    width: 40px;
    height: 40px;
}
	
#shop-icons .rush-account-icon svg,
#shop-icons .rush-icon-inner svg {
    width: 24px;
    height: 24px;
}
}

/* ========================= */
/*    PAGE LAYOUT / BOXEN    */
/* ========================= */

/*div#content-box {
  max-width: 1472px;
  margin: 0 auto;
  padding: 1rem;
}*/

div#intro-box {
	display: flex;
	padding-bottom: 0;
}

#intro-box .image-box {
  justify-content: center;
  display: flex;
  align-items: center;
    min-width: 30%;
}

/* Beide Spalten exakt 50 %, inkl. Padding */
#intro-box .text-box,
#intro-box .image-box {
  box-sizing: border-box;   /* WICHTIG */
}

/* Padding kannst du lassen */
#intro-box .text-box {
  padding: 3rem!important;
}

.text-box {
	flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rush-compact-layout {
  padding: 3rem;
}

@media (max-width: 674.98px) {
	div#intro-box {
    display: flex;
    flex-direction: column-reverse;
}

  #intro-box .text-box {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  #intro-box .text-box {
    padding: 1.5rem;             /* etwas weniger Abstand auf Mobile */
  }

}

.rush-compact-layout {
  padding: 1rem;
}

/* Wrapper für alle Rush-Promos */
/* Standard: 1 Promo pro Zeile */
#rush-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
  display: none;
}

/* Ab ~900px: genau 2 Promos pro Zeile */
@media (min-width: 900px) {
  #rush-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ========================= */
/*        RUSH BANNER        */
/* ========================= */

.rush-banner {
  background: #000000;
  color: #fff;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  box-shadow: 0 1px 5px rgba(255,255,255,20%);
  position: relative;
  overflow: hidden;
  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.2s ease,
    opacity 0.2s ease;
}

/* Ausverkauft-Zustand */
.rush-banner.is-soldout {
  opacity: 0.45;
  filter: grayscale(1);
}

/* Klick deaktivieren */
.rush-banner.is-soldout .rush-highlight-link {
  pointer-events: none;
  cursor: default;
}

/* Verbotszeichen-Cursor (Desktop) */
.rush-banner.is-soldout,
.rush-banner.is-soldout * {
  cursor: not-allowed !important;
}

/* SOLD OUT: Verfügbarkeitsbalken + Label ausblenden */
.rush-banner.is-soldout .rush-stock-bar {
  display: none;
}

/* Header-Bereich im Banner */
.rush-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.rush-badge {
  color: #df0000;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  border: 2px solid #df0000;
  box-shadow: none;
  line-height: 1.2rem;
}

.rush-subline {
  font-size: 11px;
  color: #ddd;
  text-align: right;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inhalt: Produkt links, Timer rechts */
.rush-content {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  position: relative;
  z-index: 1;
  width: 100%;
justify-content: center;
}

.rush-product {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  max-width: 500px;
  width: 50%;
}

.rush-product-image {
  max-width: 90%;
}

.rush-product-image-wrap {
	padding: 1rem;
	background: white;
	border-radius: 1rem;
	display: flex;
    justify-content: center;
    align-items: center;
}

.rush-banner.rush-banner--highlight {
	margin: 0;
	width: calc(33% - 1.5rem);
}

.rush-banner.rush-banner--highlight .rush-product-image-wrap {
	background: black;
	margin: auto;
}
.rush-banner.rush-banner--highlight .rush-product-image-wrap > img {
    filter: drop-shadow(0 2px 20px rgba(255, 255, 255, 0.2));
}

div#hl-prodbox {
    gap: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

@media (max-width: 674.98px) {

	#hl-prodbox {
		display: flex;
		flex-direction: column;
	}
	
	.rush-banner.rush-banner--highlight .rush-product {
		justify-content: flex-start;
		padding: 1rem;
	}
	#highlights h2 {
		font-size: 22px;
	}
}

.rush-offer-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 auto;
  width: 100%;
}

.rush-offer-title {
  font-size: 1rem;
  margin: 0;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* max. 2 Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rush-offer-desc {
  font-size: 13px;
  line-height: 1.4;
  color: #ddd;
  margin: 0;
}

/* Timer-Box */
.rush-timer-box {
  background: linear-gradient(145deg, #111, #181818);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #222;
  flex: 1 1 auto;
  justify-content: center;
  width: 50%;
}

.rush-timer-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #777;
  text-align: center;
}

.rush-countdown {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.rush-countdown {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.rush-count-block {
  min-width: 2ch;
  text-align: center;
}

.rush-count-sep {
  opacity: 0.7;
}

.rush-countdown-labels {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
}

.rush-countdown-labels span {
  min-width: 2ch;
  text-align: center;
}

.rush-countdown-labels {
    font-size: 11px;
    gap: 1rem;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Kreis-Countdown */
.rush-circle {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 4px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rush-circle svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.rush-circle circle {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.rush-circle .bg {
  stroke: rgba(255, 255, 255, 0.08);
}

@keyframes rushPulse {
  0%   { stroke-width: 7; stroke: #df0000; }
  50%  { stroke-width: 9; stroke: #ff4040; }
  100% { stroke-width: 7; stroke: #df0000; }
}

@keyframes rushGlow {
  0%   { filter: drop-shadow(0 0 0px rgba(223,0,0,0)); }
  50%  { filter: drop-shadow(0 0 6px rgba(255,64,64,0.8)); }
  100% { filter: drop-shadow(0 0 0px rgba(223,0,0,0)); }
}

/* Standard-Kreis */
.rush-circle .progress {
  stroke: #df0000;
  stroke-dasharray: 339.29; /* 2 * π * r (r=54) */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s linear;
}

/* Wenn Promo läuft: animierter Kreis */
.rush-banner.rush-banner--active .rush-circle .progress {
  animation:
    rushPulse 0.9s ease-in-out infinite,
    rushGlow 1.2s ease-in-out infinite;
}

.rush-banner.rush-banner--upcoming .rush-circle .progress,
.rush-banner.rush-banner--ended .rush-circle .progress {
  animation: none;
}

.rush-circle-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  margin: auto;
  max-width: 50%;
}

/* CTA-Button */
.rush-cta {
  display: block;
  text-decoration: none;
  margin-top: 2px;
  width: 75%;
  background: #df0000;
  color: #fff;
  border: none;
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.12s ease,
    opacity 0.12s ease;
}

.rush-cta:hover:not(.rush-cta--disabled) {
  background: #ff1a1a;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.7);
}

.rush-cta:active:not(.rush-cta--disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.rush-cta--disabled,
.rush-banner.rush-banner--upcoming .rush-cta,
.rush-banner.rush-banner--ended .rush-cta {
  pointer-events: none;
  opacity: 0.7;
  box-shadow: none;
  cursor: not-allowed;
}

span.rush-highlights-cta-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rush-highlights-cta-label {
	text-align: center;
}

/* ========================= */
/*     LANGUAGE SWITCHER     */
/* ========================= */

#lang-switcher {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.lang-btn {
  background: #d1011c;
  color: #fff;
  border-radius: 4px;
  padding: 3px 12px;
  font-weight: bold;
  text-decoration: none;
  font-size: 1em;
  transition: background 0.2s;
}

.lang-btn:hover,
.lang-btn:focus {
  background: #b50016;
}

/* ========================= */
/*        SEARCHBAR          */
/* ========================= */

/* gesamtes Suchfeld im Header */
#rush-search-form.rush-search {
  flex: 1 1 480px;
  max-width: 680px;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 0.6rem;
  overflow: hidden;
  height: 3.5rem;
}

/* Lupe links als Button */
.rush-search-icon-btn {
  border: none;
  outline: none;
  background: #f1f1f1;
  height: 100%;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rush-search-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: black;
}

/* mittlerer Bereich */
.rush-search-body {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  padding: 0 0.8rem 0 0.6rem;
  display: flex;
  align-items: center; /* für Status 1 (zentrierter Text) */
}

/* Label / Placeholder */
.rush-search-placeholder {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  font-size: 14px;
  color: rgb(58, 58, 58);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Status 1: mittig im Feld */
  top: 50%;
  transform: translateY(-50%);

  transition:
    top 0.15s ease,
    transform 0.15s ease,
    font-size 0.15s ease,
    color 0.15s ease;
}

/* Input */
#rush-search-input {
  border: 0;
  box-sizing: border-box;
  font-size: 14px;
  font-family: NotoSansDisplay, NotoSansDisplay-fallback, Arial, sans-serif;
  color: #3a3a3a;
  margin: 0;
  min-width: 0;
  width: 100%;
  outline: none;
  background: transparent;

  /* Platz nach oben für Status 2 (Label oben) */
  padding-top: 1.1rem;
}

/* Status 2: aktiv oder mit Wert -> Label klein oben */
.rush-search.is-active .rush-search-placeholder,
.rush-search.has-value .rush-search-placeholder {
  top: 0.3rem;
  transform: translateY(0);
  font-size: 11px;
  color: #777;
}

/* Clear-Button rechts – nur SVG sichtbar */
.rush-search-clear {
  border: none;
  outline: none;
  background: transparent;
  -webkit-appearance: none;  /* Safari/Chrome */
  appearance: none;
  width: auto;
  height: 100%;
  margin-right: 0.6rem;
  display: none;             /* JS blendet ein */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.rush-search-clear svg {
  width: 24px;
  height: 24px;
}

/* Wenn Text im Feld: Clear-Button anzeigen */
.rush-search.has-value .rush-search-clear {
  display: inline-flex;
}

/* Native Browser-Clear-Icons ausblenden */
#rush-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
#rush-search-input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
#rush-search-input::-moz-search-clear {
  display: none;
}

/* Mobile: etwas kompakter */
@media (max-width: 674.98px) {
  .rush-search-icon-btn {
    padding: 0 0.7rem;
  }
}

/* ========================= */
/*        MAIN NAV           */
/* ========================= */

#rush-main-nav {
  background: #df0000;
  padding: 0.5rem 0;
}

#rush-main-nav-inner {
  max-width: calc(1472px + 2rem);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Menü-Button wie im Shop */
#rush-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.9rem;
  border-radius: 4px;
  border: none;
  background: #ffffff;
  color: #000;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.95rem;
}

#rush-menu-toggle .rush-menu-icon svg {
  display: block;
}

.rush-menu-label {
	margin: 0px;
    word-break: normal;
    color: rgb(0, 0, 0);
    font-size: 1rem;
    line-height: calc(1.5);
    font-family: NotoSansDisplay, NotoSansDisplay-fallback, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: normal;
}

.rush-main-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.rush-main-links li a {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.rush-main-links li a:hover {
  text-decoration: underline;
}

/* Menü-Button wie im Shop */
#rush-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.9rem;
  border-radius: 4px;
  border: none;
  background: #ffffff;
  color: #000;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}

.rush-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ganz wichtig: explizite Größe fürs SVG */
.rush-menu-icon svg {
  width: 18px;
  height: 18px;
  fill: #000;          /* schwarz, gut sichtbar auf weißer Fläche */
}

/* Mobile: Links ausblenden, nur Menü-Button anzeigen */
@media (max-width: 900px) {
  .rush-main-links {
    display: none;
  }
}

/* ========================= */
/*      OFFCANVAS MENÜ       */
/* ========================= */

#rush-offcanvas {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: flex-start;      /* Panel links andocken */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

#rush-offcanvas.open {
  opacity: 1;
  pointer-events: auto;
}

.rush-offcanvas-inner {
  width: min(360px, 85vw);
  max-height: 100vh;
  background: #ffffff;
  color: #111;
  display: flex;
  flex-direction: column;
  border-radius: 0 8px 8px 0;
  box-shadow: 4px 0 18px rgba(0,0,0,0.45);
  transform: translateX(-100%);      /* Start: links draußen */
  transition: transform 0.25s ease;
}

#rush-offcanvas.open .rush-offcanvas-inner {
  transform: translateX(0);          /* Reinsliden von links */
}

/* Header mit Logo + Close */
.rush-offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}

.rush-offcanvas-logo img {
  height: 28px;
  display: block;
}

#rush-offcanvas-close {
  border: none;
  background: transparent;
  color: #333;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}

/* Sektionstitel */
.rush-offcanvas-section {
  padding: 0.75rem 1rem 0.5rem;
}

.rush-offcanvas-section h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

/* Scrollbarer Bereich mit Links */
.rush-offcanvas-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0 1rem;
}

.rush-offcanvas-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rush-offcanvas-links li {
}

.rush-offcanvas-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  color: #111;
  text-decoration: none;
  font-size: 0.95rem;
}

.rush-offcanvas-links a span {
  color: #888;
  margin-left: 0.5rem;
}

.rush-offcanvas-links a:hover {
  background: #f5f5f5;
}

/* ========================= */
/*      ICONS (Account/Store)*/
/* ========================= */

.rush-account-btn,
.rush-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.08s ease, background 0.15s ease;
}

span.rush-account-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rush-account-btn:hover,
.rush-icon-btn:hover {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
  transform: translateY(-1px);
}

.rush-account-btn:active,
.rush-icon-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.rush-account-icon svg,
.rush-icon-inner svg {
  width: 20px;
  height: 20px;
  fill: #000000;
}

span.rush-icon-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}

div#icon-area {
  display: flex;
  justify-content: center;
  align-items: center;
}

#shop-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0.5rem;
}

/* ========================= */
/*        RESPONSIVE         */
/* ========================= */

@media (max-width: 674.98px) {

  #rush-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rush-banner {
    border-radius: 14px;
    padding: 14px 14px 12px;
  }

  .rush-product {
    align-items: center;
  }

  .rush-countdown {
    font-size: 20px;
    letter-spacing: 0.16em;
  }

  .rush-circle {
    width: 90px;
    height: 90px;
  }
}

/* MOBILE HEADER: Logo links, Icons+Lang rechts, Suche darunter */
@media (max-width: 674.98px) {

  #header-inner {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
	align-items: center;
  }

  #logo-box {
    order: 1;
    flex: 0 0 auto;
  }

  #header-right {
    order: 2;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  #header-center {
    order: 3;
    flex: 0 0 100%;
    justify-content: center;
  }

  .rush-search {
    width: 100%;
    max-width: 100%;
  }

  /* WICHTIG: Language-Switcher nicht mehr fix 10rem breit */
  #lang-switcher {
    width: auto;
    justify-content: flex-end;
  }

  /* Buttons etwas kompakter machen */
  .lang-btn {
    padding: 5px 15px;
    font-size: 0.85rem;
  }
	
  /* Wide-Banner soll sich auf Mobile wie ein normaler Banner verhalten */
  .rush-banner--wide {
    grid-column: 1 / -1;          /* darf weiter über die ganze Breite gehen */
  }

  .rush-banner--wide .rush-product {
    align-items: center;
  }

  .rush-banner--wide .rush-product-image {
    width: 90%;
    height: 200px;
  }
}

/* Wrapper für Links + Pfeile */
.rush-main-links-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  overflow: hidden; /* keine Scrollbar nach außen */
}

/* Scrollbarer Bereich selbst */
.rush-main-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

/* Scrollbar in WebKit ausblenden */
.rush-main-links::-webkit-scrollbar {
  display: none;
}

.rush-main-links li a {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Pfeil-Buttons */
.rush-nav-arrow {
  border: none;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  margin: 0 0 0 0.25rem;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.rush-nav-arrow--left {
  margin-right: 0.25rem;
  margin-left: 0.5rem;
}

.rush-nav-arrow:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.rush-nav-arrow:active {
  transform: translateY(0);
}

/* ausgeblendete / deaktivierte Pfeile */
.rush-nav-arrow--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Mobile: deine Regel, dass Links komplett ausblenden, kann bleiben,
   wenn du auf Mobile sowieso das Offcanvas nutzt */
@media (max-width: 674.98px) {
  .rush-main-links-wrapper {
    display: none;
  }
}

@media (max-width: 674.98px) {
  .rush-menu-label {
    display: none;
  }

  #rush-menu-toggle {
    padding: 0.4rem 0.5rem;
    gap: 0;
	color: #FFFFFF;
	background-color: transparent;
  }
	
.rush-banner.rush-banner--highlight {
	margin: 0;
	width: 100%;
}
	

	#rush-menu-toggle .rush-menu-icon svg {
	width: 20px;
    height: 20px;
    fill: #fff;
	}
}

/* Container: Altpreis + Aktueller Preis untereinander */
.rush-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}

/* ALT-PREIS (durchgestrichen) */
.rush-price-strike {
  display: none!important;	
  font-size: 0.95rem;
  font-weight: 400;
  color: #ffffff;              /* weiss */
  text-decoration: line-through;
  opacity: 0.7;                /* etwas schwächer als der aktuelle Preis */
}

/* AKTUELLER RUSH-PREIS */
.rush-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;              /* weiss, aber sehr fett */
}

#highlights {
  display: none;
}

#highlights .rush-price {
	color: #DF0000;
}

/* Superscript (z.B. .95) kleiner darstellen */
.rush-price sup,
.rush-price-strike sup {
  font-size: 0.7em;
  font-size: 1em;
  vertical-align: baseline;   /* gleiche Grundlinie wie der Rest */
  position: relative;
  top: 0;                     /* sicherheitshalber */
}

img.rush-e-label {
max-width: 70px;
}

div#hl-prodbox {
    display: flex;
	flex-wrap: wrap;
}

/* Highlight-Banner muss Positionierungs-Kontext haben */
.rush-banner--highlight {
  position: relative;
}

.rush-banner--highlight .rush-badge {
	background: transparent;
}

/* Unsichtbarer, aber klickbarer Overlay-Link über gesamte Box */
.rush-highlight-link {
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
  z-index: 5;
  display: block;

  /* Inhalt visuell ausblenden, Screenreader-Label bleibt */
  text-indent: -9999px;
}

	.rush-banner.rush-banner--highlight .rush-product .rush-product-image-wrap img {
		width: 100%;
        max-width: 250px;
        height: auto;
	}
	

/* Basiszustand für Highlight-Banner */
.rush-banner--highlight {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover-Effekt: Karte fährt leicht nach oben */
.rush-banner--highlight:hover {
  transform: translateY(-6px);
}

/* SOLD OUT: kein Hover-Lift / keine Hover-Transition */
.rush-banner--highlight.is-soldout,
.rush-banner--highlight.is-soldout:hover {
  transform: none !important;
  box-shadow: 0 1px 5px rgba(255,255,255,20%) !important; /* wie Basis */
}

/* Optional: Transition komplett aus, damit beim Hover nichts “zuckt” */
.rush-banner--highlight.is-soldout {
  transition: none !important;
}

/* Rush CTA */

/* Wrapper: zentriert unter den Highlights */
.rush-highlights-cta-wrap {
  display: flex;
  justify-content: center;
  margin: 1rem 0 2rem;
}

/* CTA-Button im Rush-Stil */
.rush-highlights-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, #ff3b3b, #df0000);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #ffffff22;
  /* leichte Standard-Animation */
  animation: rushCtaPulse 1.6s ease-in-out infinite;
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

/* Glanz-Effekt von links nach rechts */
.rush-highlights-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.35) 40%,
    transparent 80%
  );
  transform: translateX(-120%);
  opacity: 0.0;
  pointer-events: none;
}

/* Hover: stärkerer Glow + Glanzstreifen fährt rüber */
.rush-highlights-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.85);
  border-color: #ffffff55;
  background: linear-gradient(135deg, #ff5555, #ff0000);
}

/* Glanzstreifen-Bewegung nur beim Hover */
.rush-highlights-cta:hover::before {
  opacity: 1;
  animation: rushCtaShine 0.7s ease-out forwards;
}

/* Active: leicht eindrücken */
.rush-highlights-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

/* Pulse-Animation (leichtes Atmen des Buttons) */
@keyframes rushCtaPulse {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  }
  50% {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.9);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  }
}

/* Glanzstreifen über den Button */
@keyframes rushCtaShine {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

/* Mobile: etwas kompakter */
@media (max-width: 674.98px) {

  .rush-highlights-cta {
    width: 100%;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
  }
}

/* Wrapper in der Image-Box: nimmt die gesamte Fläche ein */
#intro-hero {
  display: flex;
  pointer-events: none;  /* Inhalt selbst "durchlässig" lassen */
justify-content: center;
	align-items: center;
}

/* Rechte Spalte (Logo + Timer) */
.intro-hero-right {
    gap: 1rem;
    display: flex;
    flex-direction: column;
	align-items: center;
}

/* Box für Hersteller-Logo */
.intro-hero-logo {
  background: #ffffff;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.intro-hero-logo img {
  max-width: 100%;
  max-height: 80px;
  display: block;
  padding: 0.75rem 1.25rem;
}

/* Timer-Box im Intro etwas transparenter gestalten */
.rush-timer-box--intro {
  background: rgba(0,0,0,0.78);
  border-color: rgba(255,255,255,0.2);
  width: 100%;          /* volle Breite der rechten Spalte */
	box-sizing: border-box;
}

/* Mobile: rechte Box breiter/unten zentriert */
@media (max-width: 900px) {
  #intro-hero {
    justify-content: center;
    align-items: flex-end;
	width: 100%;
  }

  .intro-hero-right {
    align-items: center;
	width: 100%;
  }

  .rush-timer-box--intro {
    width: 100%;
  }
	
	.rush-product-image {
		max-width: 100%;
	}
}

/* Outline-Effekt für die große "RUSH DEALS" Headline */

#page-content h1.rush-outline {
  font-family: 'MMHeadlinePro', sans-serif;
  font-weight: 800;
  font-size: 80px;
  text-transform: uppercase;

  /* Füllfarbe (Innen) */
  color: #df0000;              /* z.B. Rot wie Hintergrund oder Weiss */

  /* Kontur */
  -webkit-text-stroke: 2px #ffffff;   /* 2px weiße Outline */
  text-stroke: 2px #ffffff;           /* experimentell */
}

#page-content h1.rush-outline-only {
  font-family: 'MMHeadlinePro', sans-serif;
  font-weight: 800;
  font-size: 80px;
  text-transform: uppercase;

  color: transparent;                 /* kein Fill */
  -webkit-text-stroke: 2px #ffffff;
  text-stroke: 2px #ffffff;

  letter-spacing: 0.2rem;
  line-height: 0.9em;
  padding-left: 5px;
  padding-bottom: 1rem;
}

@media (max-width: 674.98px) {
  #page-content h1.rush-outline-only {
    font-size: 60px;
  }
}
	
/* Verfügbarkeit Ladebalken */
.rush-stock-wrap {
  margin-top: 6px;
  font-size: 11px;
}

.rush-stock-label {
  margin-top: 3px;
  color: #ccc;
}

.rush-stock-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: #2a2a2a;
  border-radius: 3px;
  overflow: hidden;
}

.rush-stock-bar-fill {
  position: relative;        /* wichtig für ::before */
  height: 100%;
  width: 100%;               /* JS überschreibt mit z.B. 72% */
  background-color: #df0000; /* MMS-Rot */
  border-radius: 3px;
}

/* Glanz-Effekt von rechts nach links */
.rush-stock-bar-fill::before {
  content: "";
  position: absolute;
  top: 0;
  right: -40%;  /* Start etwas rechts außerhalb */
  width: 40%;   /* Breite des Glanz-Streifens */
  height: 100%;
  background: linear-gradient(
    270deg,                         /* von rechts nach links */
    transparent,
    rgba(255, 255, 255, 0.9),
    transparent
  );
  opacity: 0.8;
  transform: skewX(20deg);
  pointer-events: none;
  animation: rush-stock-shine 2.4s ease-in-out infinite;
}

@keyframes rush-stock-shine {
  0% {
    right: -40%;
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  50% {
    right: 100%;   /* bis ganz links über den gefüllten Teil laufen */
    opacity: 0.8;
  }
  65% {
    opacity: 0;
  }
  100% {
    right: 100%;
    opacity: 0;
  }
}

#intro-hero-logo-img:not([src]),
#intro-hero-logo-img[src=""] {
  display: none;
}

.cta-btn a {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* Abstand zwischen Text und Icon */
  text-decoration: none;
padding: 1rem 1.5rem;
}

.cta-btn svg {
  width: 24px;
  height: 24px;
  fill: white;
}

*#rush-intro-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#rush-intro-text .cta-btn {
	border-radius: 5px;
	background-color: #DF0000;
	color: white;
	margin-top: 1rem;
	position: relative;
	font-weight: bold;
	border: solid 1px black;
	text-align: center;
}

#rush-intro-text .cta-btn:hover {
	border: solid 1px white;
}

#rush-intro-text .cta-btn a{
color: white;
}

/* Kompakt-Layout: Grid statt Flex  ------------------------------------- */
/* Standard: flex-wrap für normale Ansicht */
div#hl-prodbox {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

/* Kompakt-Layout: Grid statt Flex ------------------------------------- */
#highlights.rush-compact-layout #hl-prodbox {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* Desktop: 6 Spalten */
}

/* Flex-Overrides im Kompaktmodus */
#highlights.rush-compact-layout #hl-prodbox .rush-banner--highlight {
  flex: initial !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 0.5rem;
}

#highlights.rush-compact-layout #hl-prodbox .rush-banner {
	
}

/* Breakpoints: 6 / 4 / 2 / 1 Spalten ---------------------------------- */
@media (max-width: 1400px) {
  #highlights.rush-compact-layout #hl-prodbox {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  #highlights.rush-compact-layout #hl-prodbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 674.98px) {
  #highlights.rush-compact-layout #hl-prodbox {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #highlights.rush-compact-layout #hl-prodbox .rush-banner {
	 padding: 0;
  }

}