.landing_entry {
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  margin-top: -1px;
  display: flex;
  padding: 50px 20px 50px 0;
  align-items: stretch;
  gap: 120px;
}

.landing_entry_image_wrapper {
  width: 100%;
}

.landing_entry_image {
  width: 100%;
  object-fit: cover;
  height: 100%;
}

.landing_entry_content {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-around;
}

.landing_entry_content_additionalinfo {
  display: flex;
  flex-direction: row;
}

.landing_entry_content h2 {
  font-size: 40px;
  margin: 0 0 30px 0;
}

.green .landing_entry_content h2, .green .landing_entry_content h2 a {
  color: #add400;
  text-decoration: none;
}

.pink .landing_entry_content h2, .pink .landing_entry_content h2 a {
  color: #f30560;
  text-decoration: none;
}

.blue .landing_entry_content h2, .blue .landing_entry_content h2 a {
  color: #0066cc;
  text-decoration: none;
}

.teal .landing_entry_content h2, .teal .landing_entry_content h2 a {
  color: #00ae7c;
  text-decoration: none;
}

.orange .landing_entry_content h2, .orange .landing_entry_content h2 a {
  color: #fc9100;
  text-decoration: none;
}

.landing_entry_content p {
  font-size: 16px;
  margin-bottom: 20px;
}

.landing_entry_content_additionalinfo_grammature {
  margin-right: 40px;
}

.landing_entry_content_additionalinfo_grammature_list, .landing_entry_content_additionalinfo_color_list {
  margin: 0;
  padding: 0;
}

.landing_entry_content_additionalinfo_grammature_list li, .landing_entry_content_additionalinfo_color_list li {
  list-style: none;
  float: left;
  font-size: 16px;
}

.landing_entry_content_additionalinfo_grammature_list li {
  padding: 5px 8px;
  background: #eaeaea;
  border-radius: 15px;
  margin-right: 5px;
}

.landing_entry_content_additionalinfo label {
  font-family: 'GT-Walsheim-bold', 'Open Sans', sans-serif;
    font-weight: normal !important;
    color: #333;
    margin-bottom: 10px;
    display: inline-block;
}

.landing_entry_content_link {
  font-size: 19px;
}

.landing_header_headline {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.landing_header_arrows {
    width: 100%;
    height: 22px;
    top: 9px;
    background-size: 22px;
}

.green .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash.svg);
}

.teal .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash-teal.svg);
}

.orange .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash-orange.svg);
}

.pink .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash-pink.svg);
}

.blue .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash-blue.svg);
}

.landing_header p {
  font-size: 16px;
    line-height: 25px;
    color: #333;
    width: 44%;
    position: relative;
    left: 54.5%;
    margin-bottom: 40px;
    margin-top: 30px;
}

/* Landing page styling */

.landing_header h1 {
  color: #add400;
  font-family: 'GT-Walsheim-bold', 'Open Sans', sans-serif;
    font-weight: normal !important;
    font-size: clamp(50px, 4vw, 60px);
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    margin-right: 30px;
    text-wrap: nowrap;
}

.green.landing_header h1 {
  color: #add400;
}

.pink.landing_header h1 {
  color: #f30560;
}

.blue.landing_header h1 {
  color: #0066cc;
}

.teal.landing_header h1 {
  color: #00ae7c;
}

.orange.landing_header h1 {
  color: #fc9100;
}

.landing_header_headline {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.landing_header_arrows {
    width: 100%;
    height: 22px;
    top: 9px;
    background-size: 22px;
}

.green .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash.svg);
}

.teal .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash-teal.svg);
}

.orange .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash-orange.svg);
}

.pink .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash-pink.svg);
}

.blue .landing_header_arrows {
    background-image: url(https://hupfauf-test-m2-v5-ijasb.your-printq.com/pub/media/porto/naturpapiere/headline-dash-blue.svg);
}

.landing_header p {
  font-size: 16px;
    line-height: 25px;
    color: #333;
    width: 44%;
    position: relative;
    left: 54.5%;
    margin-bottom: 40px;
    margin-top: 30px;
}


@media (max-width: 970px) {
  .landing_entry {
    gap: 90px;
  }
}

@media (max-width: 770px) {
  .landing_entry {
    gap: 60px;
  }

  .landing_entry_content_additionalinfo {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .landing_entry {
    flex-direction: column;
    gap: 30px;
    padding-right: 0;
  }

  .landing_entry_content_additionalinfo {
    flex-direction: row;
    gap: 0px;
  }

  .landing_header p {
    left: 0;
    width: 100%;
  }
}

/* Papiervorschau Kategorie/Landingpage  */

.paperpreview-full-caption {
  position: absolute;
  bottom: 0px;
  background: #fff;
  width: 100%;
  padding: 10px;
}

.paperpreview-full-note {
  position: absolute;
  right: 10px;
  bottom: 48px;
}

.wrapper-wrapper {
  display: flex;
  flex-direction: row;
  left: 54.5%;
  position: relative;
  gap: 10px;
  margin-top: 30px;
}

/* === Grundlayout === */
.paperpreview-wrapper { position: relative; }

.paperpreview-full img  {
  min-width: 100%;
  max-width: 100% !important;
}

.paperpreview-button:hover .paperpreview-thumb {
  border: 1px solid #add400
}

.paperpreview-button:hover .paperpreview-thumb:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, .4);
  z-index: 1;
}

.paperpreview-button:hover .paperpreview-thumb:after {
  background: url({{media url="porto/naturpapiere/magnifier.png"}});
  content: '';
  width: 28%;
  height: 30%;
  position: absolute;
  left: 50%;
  top: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.paperpreview-button span {
  font-size: 13px;
  color: #333
}

/* Trigger-Button um das Thumbnail + Text */
.paperpreview-button {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  gap: 8px;
  align-items: center;
  z-index: 1;
  width: 100px;
  margin-bottom: 20px;
}
.paperpreview-button p { margin-top: 8px; }

/* Backdrop als Pseudo-Element am WRAPPER */
.paperpreview-wrapper::before {
  content: "";
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 5; /* muss über deinem Header liegen */
}

/* Wrapper oben halten, solange offen ODER noch am Faden */
.paperpreview-wrapper.is-open,
.paperpreview-wrapper.is-fading {
  z-index: 9999;
}

/* Backdrop aktiv, wenn offen ODER am Faden */
.paperpreview-wrapper.is-open::before,
.paperpreview-wrapper.is-fading::before {
  opacity: 1;
  pointer-events: auto; /* blockt Hover/Klicks dahinter */
}

/* Thumbnail (100×100, eingerückt) – unverändert */
.paperpreview-thumb {
  overflow: hidden;
  width: 100px;
  height: 100px;
  position: relative;
  border: 1px solid transparent;
}
.paperpreview-thumb img {
  max-width: none;
  display: block;
  transform: translateX(-47%); /* dein Ausschnitt */
  user-select: none;
  -webkit-user-drag: none;
}

/* Full-Layer – liegt über Backdrop */
.paperpreview-full {
  position: absolute; top: 0; left: 0;
  height: 630px;
  overflow: hidden;
  width: 1110px;
  max-width: 90vw;
  z-index: 6; /* > Backdrop (::before hat 5) */

  /* Start: unsichtbar/nicht klickbar */
  opacity: 0;
  pointer-events: none;

  /* Animation: NUR clip-path + opacity (Bild bleibt 1:1) */
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  will-change: clip-path, opacity;
  transition:
  -webkit-clip-path .28s ease,
  clip-path .28s ease,
  opacity .18s ease;
  transform: translateX(-54.5%);
}

.paperpreview-wrapper.is-open .paperpreview-full {
  pointer-events: auto;
}

.paperpreview-full img {
  max-width: none;
  display: block;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .paperpreview-wrapper::before,
  .paperpreview-full { transition: none !important; }
}

@media (max-width: 600px){
  .wrapper-wrapper {
    left: 0;
  }

  .paperpreview-full {
    transform: none !important;
  }
}