/* =====================================================================
   LPFP CUSTOM · Typografie
   Fließtext: Helvetica (Systemschrift, wird nicht nachgeladen)
   Headlines: "LPFP Serif" = Latin-Subset von Nanum Myeongjo (SIL OFL 1.1),
   lokal gehostet in /fonts, damit keine Daten an Google übertragen werden.
   Nanum Myeongjo: Copyright (c) 2010, NHN Corporation. Lizenz: SIL Open Font
   License 1.1, https://openfontlicense.org
   Wird nach main.css geladen und überschreibt dessen Schriften.
   ===================================================================== */

@font-face {
  font-family: "LPFP Serif";
  src: url("../fonts/lpfp-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-secondary: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-headline: "LPFP Serif", "Times New Roman", serif;
}

html,
body {
  font-family: var(--font-primary);
}
/* Laufweite wie im Shop: Fließtext -0.01em (Template hatte +0.12em) */
body {
  letter-spacing: -0.01em !important;
}
/* Fließtext überall in einer Größe: das Template nutzte teils 18px (.text-lg), teils 16px (.text-base).
   Einheitlich auf die kleinere Größe */
.text-lg {
  font-size: var(--text-base) !important;
}

/* Headlines in der Serifenschrift, ruhig im Normalschnitt wie im Shop.
   body :is(...) erhöht die Spezifität, damit auch Template-Klassen wie .fw-700/.fw-800 überschrieben werden */
h1, h2, h3, h4,
.sectionHeading__title,
.sliderMain__title,
.slider__title,
body :is(h1, h2, h3, h4, .sectionHeading__title, .sliderMain__title, .slider__title)[class] {
  font-family: var(--font-headline) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
}

/* Menü-Overlay: Navigationspunkte (Home, LPFP Store, Lookbook …) in der Headline-Schrift */
body .navList a,
body .navList .subnav-list a {
  font-family: var(--font-headline) !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
}

/* Seitentitel (H1) und große Section-Headlines: kleiner, auf H2-Niveau, mit engerer Zeilenhöhe */
body .sectionHeading.-lg .sectionHeading__title[class],
body .sectionHeading.-md .sectionHeading__title[class],
body .sliderMain.-type-3 .slider__title[class] {
  font-size: 3rem !important;
  line-height: 1.08 !important;
}
@media (max-width: 991px) {
  body .sectionHeading.-lg .sectionHeading__title[class],
  body .sectionHeading.-md .sectionHeading__title[class],
  body .sliderMain.-type-3 .slider__title[class] {
    font-size: 2.5rem !important;
  }
}
@media (max-width: 575px) {
  body .sectionHeading.-lg .sectionHeading__title[class],
  body .sectionHeading.-md .sectionHeading__title[class],
  body .sliderMain.-type-3 .slider__title[class] {
    font-size: 2.125rem !important;
  }
}

/* Kleine Labels (Rechtstexte-Abschnitte, Kontakt-Spalten): 12px, Versalien, fett */
.sectionHeading__subtitle {
  font-family: var(--font-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
}

/* Eyebrows über den Slider-Headlines entfernt (zu viel). Ausgeblendet statt gelöscht,
   weil die Slider-Animation diese Elemente erwartet */
.sliderMain__subtitle,
.slider__subtitle {
  display: none !important;
}

/* Tabellenkopf About (Category / Our approach): 12px, Versalien, fett */
body p.title-xs[class] {
  font-family: var(--font-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
}

/* Footer-Überschriften (Showroom, Links, Follow us), Kontaktseite (Showroom, Contact us, Follow us)
   und Menü-Labels: wie Eyebrows, 12px Helvetica, Versalien, fett */
body .footer h4[class],
body main h4.text-xl[class],
body .nav__info__item h5[class] {
  font-family: var(--font-primary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
}

/* Ladebildschirm: warmes Off-White statt Hellblau */
.preloader__bg {
  background-color: #FAF9F6 !important;
  box-shadow: none !important;
}

/* Ladebildschirm-Logo: LPFP-Monogramm (echte Vektorform mit transparentem Hintergrund).
   Das Logo dient als Maske: hellgraue Grundform, die sich von unten schwarz füllt.
   Ohne Transparenz würde die Farbe über das ganze Quadrat laufen. */
:root {
  --preloader-image: url('../img/logo/lpfp-monogram.svg');
}
.preloader__progress {
  width: 4.5rem !important;
  height: 4.5rem !important;
  background-color: #DEDAD2 !important;
}
.preloader__progress__inner {
  background-color: #111111 !important;
}
/* Das alte Wortmarken-Bild im HTML nur noch als Platzhalter, unsichtbar */
.preloader__img {
  opacity: 0 !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
}

/* Startseiten-Slider: Text unten links statt mittig (Desktop und Mobile) */
.sliderMain.-type-1 .sliderMain__wrap {
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding-bottom: 7.5rem;
}
.sliderMain.-type-1 .sliderMain__wrap .container-fluid {
  width: 100%;
}
.sliderMain.-type-1 .sliderMain__wrap .row {
  justify-content: flex-start !important;
  text-align: left !important;
}
@media (max-width: 767px) {
  .sliderMain.-type-1 .sliderMain__wrap {
    padding-bottom: 5.5rem;
  }
}

/* About-Hero auf Mobile: kein dunkles Overlay über der Zeichnung, Text unten links in Schwarz */
@media (max-width: 767px) {
  .sliderMain.-type-3 .slider__img::after {
    display: none !important;
  }
  .sliderMain.-type-3 .slider__content__wrapper {
    align-items: flex-end !important;
    text-align: left !important;
    padding-bottom: 2.5rem;
  }
  body .sliderMain.-type-3 .slider__title[class],
  body .sliderMain.-type-3 .slider__title[class] * {
    color: #111111 !important;
  }
  /* nicht bildschirmhoch: Zeichnung quadratisch oben in voller Breite, Text darunter */
  .sliderMain.-type-3 {
    height: auto !important;
  }
  .sliderMain.-type-3 > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sliderMain.-type-3 > .container-fluid > .row {
    flex-direction: column-reverse !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .sliderMain.-type-3 .swiper-col {
    position: relative !important;
    height: auto !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .sliderMain.-type-3 .swiper-container {
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  .sliderMain.-type-3 .slider__content__wrapper {
    padding: 1.5rem calc(1.5rem - 15px) 0 !important;
  }
  .sliderMain.-type-3 .slider__content {
    position: relative !important;
  }
  body .sliderMain.-type-3 .slider__title[class] {
    font-size: 2.5rem !important;
    line-height: 1.05 !important;
  }
  /* Abstand zum Intro knapp, Intro-Headline deutlich kleiner als die H1 */
  body .sliderMain.-type-3 + section[class] {
    padding-top: 2rem !important;
  }
  body .sliderMain.-type-3 + section .sectionHeading.-sm .sectionHeading__title[class] {
    font-size: 1.5rem !important;
    line-height: 1.25 !important;
  }
  body .sliderMain.-type-3 + section p.text-lg {
    margin-top: 1rem !important;
  }
  body .sliderMain.-type-3 + section p.text-lg:first-child {
    margin-top: 0 !important;
  }
}

/* Footer-Logo (Monogramm): 10 % kleiner als im Template (100px → 90px) */
.footer__logo img {
  width: 90px !important;
  height: auto !important;
}

/* Nach-oben-Button entfernt */
.backButton,
.js-backButton {
  display: none !important;
}

/* Textlinks: beim Hover nicht abblassen. Das Template färbte jeden Link beim Hover hellgrau
   (a:hover { color: var(--font-light) }), auch Links mit eigener Farbklasse */
a:hover {
  color: inherit;
}
a.text-black:hover {
  color: #000000;
}
a.text-dark:hover {
  color: var(--font-dark);
}
a.text-white:hover {
  color: #FFFFFF;
}
/* Footer: Links und Social-Icons behalten beim Hover ihre Farbe */
body .footer a:hover,
body .footer .social__item:hover {
  color: inherit !important;
  opacity: 1 !important;
}
body .footer .social__item.text-black:hover {
  color: #000000 !important;
}

/* Menü-Overlay: Hintergrund Off-White wie der Rest der Seite (Template: kühles Hellgrau) */
body .nav__bg,
body .nav__bg.bg-light-1 {
  background-color: #FAF9F6 !important;
}

/* Menü-Overlay: Links beim Hover nicht abblassen (Template färbte sie blaugrau),
   stattdessen dieselbe Unterstreich-Animation wie im Footer */
body .navList__wrap a:hover,
body .navList__wrap a:not([href]):not([tabindex]):hover,
body .nav__info__content a:hover {
  color: #111111 !important;
  opacity: 1 !important;
}
body .navList li a,
body .nav__info__content a {
  position: relative;
}
body .nav__info__content a {
  display: table;
  padding-bottom: 0.125rem;
}
body .navList li a[href]::before,
body .nav__info__content a::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background-color: currentColor;
  transition: transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
  transform-origin: left;
  transform: scaleX(0);
}
body .navList li a[href]::before {
  bottom: 0.35em;
  height: 2px;
}
body .nav__info__content a::before {
  bottom: 0;
}
body .navList li a[href]:hover::before,
body .nav__info__content a:hover::before {
  transform: scaleX(1);
}

/* Footer: E-Mail-Link mit derselben Unterstreich-Animation wie die übrigen Footer-Links */
.footer__content a[href^="mailto:"] {
  position: relative;
  display: inline-block;
  padding-bottom: 0.125rem;
}
.footer__content a[href^="mailto:"]::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background-color: currentColor;
  transition: transform 300ms cubic-bezier(0.77, 0, 0.175, 1);
  transform-origin: left;
  transform: scaleX(0);
}
.footer__content a[href^="mailto:"]:hover::before {
  transform: scaleX(1);
}

/* Copyright-Leiste: © links, Impressum und Datenschutz rechts in einer Zeile */
.lpfp-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}
.lpfp-copyright p {
  margin: 0;
}
.lpfp-legal-links {
  display: flex;
  gap: 1.5rem;
}

/* Startseite, Buttons unter dem Intro: Stil wie die Buttons im Shop (Versalien, kräftige Unterlinie) */
.lpfp-cta {
  column-gap: 2.5rem !important;
  row-gap: 1.5rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 2rem !important;
}
.lpfp-cta > a.button {
  display: inline-block !important;
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  color: #111111 !important;
  padding: 0 0 12px 0 !important;
  border-bottom: 2px solid #111111 !important;
  transition: border-color 0.2s ease;
}
.lpfp-cta > a.button:hover {
  border-bottom-color: rgba(17, 17, 17, 0.3) !important;
}
.lpfp-cta > a.button::before,
.lpfp-cta > a.button::after,
.lpfp-cta > a.button .icon,
.lpfp-cta > a.button svg {
  display: none !important;
}

/* Startseite, Buttons im Slider: gleicher Stil, in Weiß */
.sliderMain__button a.button {
  display: inline-block !important;
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  color: #ffffff !important;
  padding: 0 0 12px 0 !important;
  border-bottom: 2px solid #ffffff !important;
  transition: border-color 0.2s ease;
}
.sliderMain__button a.button:hover {
  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}
.sliderMain__button a.button::before,
.sliderMain__button a.button::after,
.sliderMain__button a.button .icon,
.sliderMain__button a.button svg {
  display: none !important;
}

/* Vertikaler Hover-Effekt wie im Shop (Seventh: kt-button--hover-vertical):
   Text gleitet nach oben raus, Kopie kommt von unten nach */
.lpfp-btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.15;
  vertical-align: top;
}
.lpfp-btn__a,
.lpfp-btn__b {
  display: block;
  transition: transform 175ms ease;
  will-change: transform;
}
.lpfp-btn__b {
  position: absolute;
  inset: 0;
  transform: translateY(calc(100% + 3px));
}
a:hover > .lpfp-btn .lpfp-btn__a {
  transform: translateY(calc(-100% - 3px));
}
a:hover > .lpfp-btn .lpfp-btn__b {
  transform: translateY(0);
}
@media (hover: none) {
  a:hover > .lpfp-btn .lpfp-btn__a { transform: none; }
  a:hover > .lpfp-btn .lpfp-btn__b { transform: translateY(calc(100% + 3px)); }
}

/* Startseite, Buttons unter dem Intro (Shop now / About / B2B): auf Mobile untereinander, linksbündig */
@media (max-width: 767px) {
  .lpfp-cta {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 1.5rem;
  }
  .lpfp-cta > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
  }
}

/* 404-Seite: passt ohne Scrollen auf den Bildschirm. Statt des großen Footers nur die
   Copyright-Leiste, die unten am Bildschirmrand sitzt */
.lpfp-404 {
  min-height: calc(100vh - 7rem);
  padding-bottom: 3rem !important;
}
.lpfp-404 ~ .footer .footer__top {
  display: none !important;
}
.lpfp-404 ~ .footer .footer__bottom {
  margin-top: 0 !important;
}

/* Seitenkopf (Lookbook): kompakter Abstand oben, bündig mit dem Bildraster darunter */
.lpfp-page-head {
  padding-top: 8rem;
  padding-bottom: 3rem;
}
.lpfp-page-head .breadcrumbs { margin-bottom: 1.5rem !important; }
.lpfp-page-head .sectionHeading__title + p { margin-top: 0.5rem !important; }
@media (max-width: 767px) {
  .lpfp-page-head {
    padding-top: 6.5rem;
    padding-bottom: 2rem;
  }
}