/* ===============================
   STARTSEITE – NUR index.html
   (ohne Header/Menu/Icon/Overlay)
=============================== */

/* ================= HERO / INTRO ================= */

body.home .yellow-part{
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  text-align: center;
  padding-top: clamp(70px, 7vw, 120px);
  padding-bottom: clamp(70px, 10vw, 130px);
  padding-left: 20px;
  padding-right: 20px;
  color: white;
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(139,92,246,0.35), transparent 60%),
    radial-gradient(800px 500px at 85% 25%, rgba(59,130,246,0.28), transparent 60%),
    linear-gradient(135deg, #0f172a, #1e293b 60%, #0f172a);
}

/* leichter Glow-Effekt im Hintergrund */
body.home .yellow-part::before{
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%);
  top: -200px;
  left: -150px;
  filter: blur(60px);
  opacity: 0.4;
}

/* NEU: Glow unten (hellt das untere Ende auf) */
body.home .yellow-part::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 220px;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(71, 52, 52, 0.08) 40%,
    rgba(255,255,255,0.18) 100%
  );

  pointer-events:none;
}

/* Headline */
body.home .greeting h1{
  margin: 0 0 22px 0;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: clamp(32px, 3vw + 10px, 56px);
  line-height: 1.1;
  position: relative;
  z-index: 2;
  transform: translateY(-42px);
}


/* Fullwidth Fläche hinter demo-layout */
/* ===== SECTION 2: hell aber nicht weiß (anschluss an yellow-part) ===== */
body.home .demo-band{
  position: relative;
  background: linear-gradient(
    to bottom,
    #cbd5e1 0%,
    #e2e8f0 45%,
    #f1f5f9 100%
  );
  padding: 60px 0 90px;
}

/* Übergang: von Hero in Demo-Band reinfaden */
body.home .demo-band::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -160px;
  height: 160px;

  /* nur vertikal -> überall gleich */
  background: linear-gradient(
    to bottom,
    rgba(31, 42, 68, 0) 0%,
    rgba(31, 42, 68, 0.55) 55%,
    rgba(31, 42, 68, 1) 100%
  );

  pointer-events: none;
  z-index: 0;
}

body.home .demo-layout,
body.home .demo-images,
body.home .demo-serien{
  position: relative;
  z-index: 1;
}

/* Glass Chip – größere Hero Version */
body.home .yellow-part a.hero-chip{
  display: inline-block;
  margin: -50px auto 0;
  font-size: clamp(18px, 0.9vw + 16px, 24px); /* größer */
  line-height: 1.6;
  padding: 18px 30px; /* mehr Fläche */
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 2;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Desktop Hover */
@media (hover: hover){
  body.home .yellow-part a.hero-chip:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
    filter: brightness(1.05);
  }
}

body.home .yellow-part a.hero-chip:active{
  transform: scale(0.98);
  filter: brightness(0.96);
}

body.home .yellow-part p:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}

/* ===== Smooth Übergang Hero -> Triangle ===== */

/* ================= DEMO LAYOUT ================= */

/* ===== DEMO LAYOUT: Bild | Arrow | Serien ===== */

body.home .demo-layout{
  display: flex;
  align-items: flex-start; /* Serien dürfen oben starten */
  justify-content: flex-start;

  width: min(1400px, 96%);           /* vorher enger -> jetzt breiter */
  margin: 26px auto 0;
  padding-left: clamp(6px, 2vw, 26px); /* kleinerer Rand */
  padding-right: clamp(6px, 2vw, 26px);

  gap: clamp(22px, 1.6vw, 22px);
}


/* Arrow als eigene “Spalte” neben dem Bild */
body.home .arrowkey{
  flex: 0 0 auto;
  align-self: center; /* <-- DAS macht ihn vertikal mittig zur Bild-Höhe */
  margin-top: 0;

  border: none;
  background: rgba(255,255,255,0.92);
  color: #0f172a;

  width: 56px;
  height: 56px;
  border-radius: 999px;

  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  grid-area: arrow;
  align-self: center;
  justify-self: end;
  margin: 0;
  opacity: 0.9;
}

body.home .arrowkey:hover{
  box-shadow: 0 14px 35px rgba(0,0,0,0.25);
}

/* Serien: gleiche Breite beibehalten, aber 20px höher */

/* ================= SERIEN ================= */

body.home .demo-serien{
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1 1 35%;
  min-width: 0;
  margin-top: 0;
  transform: translateY(40px);
}

body.home .demo-serien .serie{
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.72),
    rgba(255,255,255,0.48)
  );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 22px;
  padding: 2rem 2rem 1.2rem;
  text-align: center;
  font-weight: bold;

  box-shadow:
    0 18px 40px rgba(15,23,42,0.14),
    inset 0 1px 0 rgba(255,255,255,0.35);

  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

body.home .demo-serien .sep-line{
  height: 1px;
  width: 100%;
  margin: 0 0 18px 0;
  background: linear-gradient(
    90deg,
    rgba(148,163,184,0),
    rgba(148,163,184,0.65),
    rgba(148,163,184,0)
  );
}

/* Aurora Glow links oben */
body.home .demo-serien .serie::before{
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  top: -90px;
  left: -70px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(139,92,246,0.22) 0%,
    rgba(59,130,246,0.16) 38%,
    rgba(255,255,255,0) 72%
  );
  filter: blur(18px);
  pointer-events: none;
}

/* zweiter Glow rechts unten */
body.home .demo-serien .serie::after{
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -50px;
  bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(96,165,250,0.18) 0%,
    rgba(255,255,255,0) 72%
  );
  filter: blur(18px);
  pointer-events: none;
}

/* Serien-Überschrift optisch höher */
body.home .demo-serien .serie h3{
  margin: 0 0 10px 0;
  position: relative;
  top: -6px;
  font-size: 1.35rem;
  letter-spacing: 0.4px;
  color: #0f172a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

body.home .demo-serien .serie:hover{
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.72);
  box-shadow:
    0 24px 54px rgba(15,23,42,0.18),
    inset 0 1px 0 rgba(255,255,255,0.45);
}

/* ================= WHITE SECTION ================= */

body.home .white-part{
  width: 100%;
  height: 210px;
  margin-top: 0;
  text-align: center;
  padding-top: 25px;
  background: #fff;
  box-shadow: 0 4px 6px rgba(156,156,156,0.1);
}

body.home .gründe-einkauf{
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-weight: bold;
}

/* Text/Icons im Header auf "weiß/hell" umstellen */

body.home .menu-button{
  color: rgba(255,255,255,0.92);
  transition-property: transform, opacity, color;
  transition-duration: 0.6s, 0.5s, 0.18s;
  transition-timing-function: ease, ease, ease;
}

/* Trennlinie im Header heller */
body.home .line{
  background-color: rgba(255,255,255,0.55) !important;
}

body.home .setsticky hr{
  border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

/* ===== HOME HEADER MODERN ===== */


/* Text hell */
body.home .ausruf,
body.home .name,
body.home .menu-button,
body.home .warenkorb,
body.home .my-list{
  color: rgba(255,255,255,0.92) !important;
}

/* =========================
   HOME HEADER CLEAN SETUP
========================= */

/* Header Glass */
body.home .setsticky{
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Wichtig: Transition so definieren, dass Transform/Rotation NICHT verloren geht */

/* Beim Schließen: NUR die Farbe verzögert zurück zu weiß */
body.home:not(.open-menu) .menu-button{
  transition-delay: 0s, 0s, 0.22s; /* transform | opacity | color */
}

/* Beim Öffnen: Farbe ohne Delay sofort schwarz */
body.home.open-menu .menu-button{
  color: #000 !important;
  transition-delay: 0s, 0s, 0s;
}

/* Tablet: oberhalb Mobile, aber noch nicht riesig -> sauber zentriert */
@media (min-width: 901px) and (max-width: 1180px){
  body.home .demo-layout{
    align-items: center; /* Bild + Serien vertikal auf eine Linie */
  }

  body.home .demo-serien{
    transform: translateY(0); /* oder z.B. 10px, wenn du minimal runter willst */
  }
}

/* =========================
   MOBILE DEMO LAYOUT
   Bild volle Breite + Pfeil rechts daneben
   Serien darunter nebeneinander
   ========================= */
@media (max-width: 900px){
  body.home .demo-layout{
    display: grid;
    grid-template-columns: auto auto;  /* statt 1fr auto */
    grid-template-areas:
      "img arrow"
      "ser ser";
    justify-content: center;           /* << zentriert die Gruppe */
    align-items: center;
    gap: 14px;

    width: 100%;
    margin: 20px auto 0;
    padding: 0;
  }

body.home .demo-images{
  flex: none;
  max-width: none;

  width: min(94vw, 640px);   /* fast volle Breite */
  aspect-ratio: 16 / 8;      /* flacher Hero-Look */
  height: auto;

  border-radius: 18px;
}

  body.home .arrowkey{
    grid-area: arrow;
    margin: 0;                         /* falls irgendwo margins reinfunken */
  }



  /* Slider-Wrapper soll die volle Höhe/Breite nutzen */
  body.home .img-wrapper{
    width: 100%;
    height: 100%;
  }
  body.home .slide{
    width: 100%;
    height: 100%;
  }

  body.home .slide > picture{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
}

body.home .slide > picture > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

  /* Serien unter dem Bild: 2 nebeneinander */

  body.home .demo-serien{
    /* extra Rand NUR für Serien */
    padding-left: 10px;
    padding-right: 22px;   /* <- rechts mehr Luft (Scrollbar/Edge) */
    box-sizing: border-box;

    /* sicherer Abstand zwischen den beiden Boxen */
    column-gap: 16px;
    row-gap: 14px;

    /* wichtig: verhindert “drücken/überlappen” bei Grid */
    grid-area: ser;          /* (optional, aber sauber) */
    display: grid;           /* <- DAS ist der entscheidende Fix */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body.home .demo-serien .serie{
    box-sizing: border-box;
    min-width: 0;          /* <- verhindert, dass der Inhalt die Box breiter drückt */
  }
}

/* Extra Sicherheit: wenn es zu eng wird, automatisch untereinander */
/* Default (Desktop) */
:root{
  --preview-count: 6;
}

/* Kleinere Screens (Boxen meist noch nebeneinander) */
@media (max-width: 900px){
  :root{
    --preview-count: 2;
  }
}

/* Sehr klein: wenn Boxen untereinander liegen -> +2 Previews */
@media (max-width: 520px){
  :root{
    --preview-count: 4;
  }

  body.home .demo-serien{
    padding-inline: 16px;       /* links UND rechts Abstand */
    grid-template-columns: 1fr; /* untereinander */
    box-sizing: border-box;
  }
}

/* =========================================
   ===== FINAL CLEAN SLIDER SYSTEM =====
   ========================================= */

/* Slider Container */
body.home .demo-images{
  flex: 0 0 46%;
  max-width: 46%;
  height: clamp(280px, 30vw, 460px);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  perspective: 900px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}


/* Wrapper */
body.home .img-wrapper{
  width: 100%;
  height: 100%;
  position: relative;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

/* Images als Slides */
body.home .slide-img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
  border-radius: 20px;
}

/* Optional: aktives Bild minimal “premium” */
body.home .slide-img.active{
  transform: scale(1.015);
  transition: transform 450ms ease;
}

/* Special Crops */
body.home .slide-img:nth-child(4){
  object-position: center 60%;
}
body.home .slide-img:nth-child(5){
  object-position: center bottom;
}

/* Hover Float */
body.home .demo-images:hover .img-wrapper{
  transform: scale(1.03) translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

/* Bild 1 etwas weiter nach rechts ausrichten */
body.home .slide-img-1{
  object-position: 58% center;
}

body.home .slide-img-1.active{
  transform: scale(1.00);
}

/* Glow Layer */
body.home .img-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(250,204,21,0.15),
    transparent 60%
  );
  opacity:0;
  transition: opacity .6s ease;
  pointer-events:none;
}
body.home .demo-images:hover .img-wrapper::after{
  opacity:1;
}

/* Progress Bar */
body.home .slider-progress{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  height:6px;
  border-radius:999px;
  background: rgba(0,0,0,0.25);
  overflow:hidden;
  pointer-events:none;
  z-index:5;
}
body.home .slider-progress-bar{
  height:100%;
  width:0%;
  background:#facc15;
  border-radius:999px;
}

body.home .slide picture{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
}

body.home .slide picture img{
  width: 100%;
  height: 100%;
}

/* Disable Hover Effects on Touch */
@media (hover: none){
  body.home .img-wrapper{
    transform:none !important;
    box-shadow:none !important;
  }
}

body.home .img-wrapper{
  width: 100%;
  height: 100%;
}

body.home .slide{
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Mehr Abstand zwischen Arrow und Serien (Desktop/Tablet) */
@media (min-width: 901px){
  body.home .arrowkey{
    margin-right: clamp(40px, 4vw, 110px); /* mehr Luft */
  }
}

body.home .slide{
  will-change: transform;
}

/* ===============================
   Serien-Schaukasten (final)
   =============================== */

/* Reihe: Preview + Arrow nebeneinander */
body.home .serie-row{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Preview: feste Slots, wird kleiner per Breakpoints */
body.home .serie-preview{
  display: grid;
  grid-auto-flow: column;                         /* IMMER nur eine Zeile */
  grid-auto-columns: 56px;                        /* jede Karte 56px */
  grid-template-columns: repeat(var(--preview-count), 56px);

  gap: 10px;
  justify-content: center;
  align-items: center;

  overflow: hidden;
  position: relative;
}

/* einzelne Mini-Kachel */
body.home .serie-preview .prev-card{
  width: 56px;
  height: 78px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.12);
}

body.home .serie-preview .prev-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* weiche Kanten, damit nichts hart abgeschnitten wirkt */
body.home .serie-preview::before,
body.home .serie-preview::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:18px;
  pointer-events:none;
  z-index:2;
}

body.home .serie-preview::before{
  left:0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

body.home .serie-preview::after{
  right:0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

/* Arrow bleibt immer rund & im Kasten */
body.home .serie-arrow{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;

  border-radius: 999px;
  display: grid;
  place-items: center;
  text-decoration: none;

  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);

  font-size: 22px;
  font-weight: 900;
  color: #111;

  transition: transform .2s ease, box-shadow .2s ease;
}

body.home .serie-arrow:hover{
  transform: scale(1.08);
  box-shadow: 0 14px 35px rgba(0,0,0,0.2);
}



@media (max-width: 900px){
  body.home .demo-layout{
    grid-template-columns: auto auto;
    justify-content: center;
  }

  body.home .demo-images{
    flex: none;          /* killt flex-breite */
    max-width: none;     /* killt 46% */
    width: min(68vw, 560px);
    margin-left: 20px;
  }
}

/* Desktop: Pfeil-Link ohne Unterstreichung */
body.home .serie-arrow{
  text-decoration: none;
}

/* Overlay-Link: standardmäßig AUS (Desktop) */
body.home .serie{
  position: relative; /* wichtig für overlay */
}

body.home .serie-overlay{
  display: none;
}

/* Mobile */
@media (max-width: 900px){

  /* ganze Karte klickbar */
  body.home .serie-overlay{
    display: block;
    position: absolute;
    inset: 0;              /* top/right/bottom/left = 0 */
    z-index: 2;
    border-radius: inherit; /* falls deine card radius hat */
  }

  /* Pfeil entfernen */
  body.home .serie-arrow{
    display: none;
  }

  /* Tap: leicht dunkler + subtiler Glow */
  body.home .serie{
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }


  body.home .serie-overlay:active{
    background: rgba(0,0,0,0.04);
    box-shadow: 0 10px 22px rgba(0,0,0,0.14);
  
}


  /* Reihe neu verteilen */
  body.home .serie-row{
    display: block;        /* kein flex/grid mehr mit 2 Spalten */
  }

  /* Preview darf ganze Breite nutzen */
  body.home .serie-preview{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 900px){

  body.home .yellow-part a.hero-chip{

    font-size: clamp(16px, 1.2vw + 14px, 18px);  /* kleiner */
    line-height: 1.4;

    padding: 10px 18px;   /* deutlich dünner */
    margin: -30px auto 0;

    border-radius: 999px;

    box-shadow: 0 6px 18px rgba(0,0,0,0.12);  /* dezenter */
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(10px);
  }

}

/* Extra-small: ab ~500px soll das Demo-Bild kleiner & flacher werden */
/* Extra-small: Abstand zum Rand + Arrow sichtbar halten */
@media (max-width: 560px){

  /* Falls dein Icon/Zeichen innen riesig ist */
  body.home .arrowkey svg,
  body.home .arrowkey span,
  body.home .arrowkey{
    font-size: 18px;
  }

    /* Demo-Gruppe: Bild + Arrow als Block mit Innenabstand */
body.home .demo-layout{
  box-sizing: border-box;
  padding-inline: 14px;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

  /* Bild flacher + nicht randbündig */
body.home .demo-images{
  width: min(78vw, 380px);
  max-width: 420px;
  aspect-ratio: 16 / 9;
  height: auto;
}

body.home .arrowkey{
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  margin: 0;
  position: relative;
  z-index: 5;
  border-radius: 50%;
  font-size: 18px;
}

    body.home .demo-serien{
    padding-inline: 14px;
    box-sizing: border-box;
  }

  /* falls eine Karte breiter als der Screen wird */
  body.home .demo-serien .serie{
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 700px){
  body.home .menue-link{ right: 25px; }
  body.home .my-list{ right: 83.5px; }
  body.home .warenkorb{ right: 145px; }

  /* optional: wenn du auch die Roll-Distanz global matchen willst */
  body.home .warenkorb.clicked{ transform: translateX(-155px); }
}

/* ===== Vor-Footer Hover Upgrade (subtil & clean) ===== */

body.home .information-fill button{
  transition: 
    transform .18s ease,
    text-shadow .18s ease,
    opacity .18s ease;
}

/* Hover (Desktop Geräte) */
@media (hover: hover){
  body.home .information-fill button:hover{
    transform: translateY(-2px);
    text-shadow: 0 4px 14px rgba(255,255,255,0.35);
    opacity: 0.9;
  }
}

/* Active Click Effekt */
body.home .information-fill button:active{
  transform: scale(0.96);
}

/* Mobile: ganze Karte klickbar */
@media (max-width: 900px){

  body.home .serie-card{
    display: block;
    text-decoration: none;
    color: inherit;
  }

  /* Hover/Touch Feedback */
  body.home .serie-box{
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  body.home .serie-card:active .serie-box{
    transform: scale(0.98);
  }

  /* Pfeil ausblenden */
  body.home .serie-box .arrowkey{
    display: none;
  }

    body.home .serie-link{
    display: block;
    text-decoration: none;
    color: inherit;
  }

  /* Pfeil entfernen */
  body.home .serie-arrow{
    display: none;
  }

  /* Smooth Transition */
  body.home .serie{
    transition: 
      transform 0.18s ease,
      box-shadow 0.18s ease,
      background 0.18s ease;
  }

  /* Beim Antippen leicht dunkler + subtiler Glow */
  body.home .serie-link:active .serie{
    transform: scale(0.98);
    background: rgba(0,0,0,0.04);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }
}

@media (max-width: 900px){
  body.home .serie-preview::before,
  body.home .serie-preview::after{
    display: none;
  }
}

@media (max-width: 1024px){
  body.home .menu-button{
    transform: scale(1.3);
    transform-origin: center;
  }

  body.home .menu-button.clicked{
    transform: scale(1.3) rotate(90deg);
  }

  body.home .menue-link{
    right: 10px;
  }

  body.home .my-list{
    right: 58px;
  }

  body.home .warenkorb{
    right: 106px;
  }
}

@media (max-width: 700px){
  body.home .menue-link{
    top: 3.5px;
    right: 1px;
  }

  body.home .my-list{
    right: 59px;
  }

  body.home .warenkorb{
    right: 108px;
  }

  body.home .warenkorb.clicked{
    transform: translateX(-170px);
  }
}

@media (max-width: 700px){
  body.home .demo-images:hover .img-wrapper,
  body.home .demo-serien .serie:hover{
    transform: none !important;
    box-shadow: none !important;
  }

  body.home .demo-serien .serie::before,
  body.home .demo-serien .serie::after,
  body.home .yellow-part::before,
  body.home .yellow-part::after,
  body.home .img-wrapper::after{
    display: none !important;
  }

  body.home .yellow-part,
  body.home .demo-serien .serie,
  body.home .yellow-part a.hero-chip{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 700px){
  .arrowkey{
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .arrowkey span{
    transform: translateY(2px);
  }
}


.recently-viewed-section {
  max-width: 1100px;
  margin: 36px auto;
  padding: 0 16px;
}

.recently-viewed-head {
  margin-bottom: 14px;
}

.recently-viewed-head h2 {
  margin: 0;
  font-size: 1.25rem;
}

.recently-viewed-head span {
  font-size: 0.9rem;
  opacity: 0.75;
}

.recently-viewed-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.recent-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.85);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.recent-card img {
  width: 48px;
  height: 68px;
  object-fit: contain;
  flex-shrink: 0;
}

.recent-card strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.2;
}

.recent-card span,
.recent-card em {
  display: block;
  font-size: 0.78rem;
  opacity: 0.75;
}

.recent-card em {
  font-style: normal;
  font-weight: 700;
  margin-top: 3px;
}