/* Produkt-Einzelseiten. Angelegt 2026-07-27. Nur auf single-Ansichten geladen. */

.lufb-product{max-width:1180px;margin:0 auto;padding:26px 20px 60px;color:#333}

.lufb-crumb{font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#6e6e6e;margin:0 0 14px}
.lufb-crumb a{color:#6e6e6e;text-decoration:none}
.lufb-crumb a:hover,.lufb-crumb a:focus{color:#111;text-decoration:underline;text-underline-offset:4px}
.lufb-crumb span{padding:0 6px}
.lufb-crumb__here{padding-left:0}

.lufb-product__card{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#ececec;border:1px solid #dcdcdc}
@media (max-width:880px){.lufb-product__card{grid-template-columns:1fr}}

.lufb-product__media{display:flex;align-items:center;justify-content:center;
  padding:26px;min-height:300px;background:#fff}
.lufb-product__main{max-width:100%;max-height:430px;height:auto;width:auto;display:block;object-fit:contain}

.lufb-product__detail{padding:26px 28px 30px;border-left:1px solid #dcdcdc}
@media (max-width:880px){.lufb-product__detail{border-left:0;border-top:1px solid #dcdcdc}}

.lufb-product__title{font-family:"Roboto Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(25px,3.2vw,36px);line-height:1.07;color:#111;margin:0 0 13px}
.lufb-product__lead{font-size:15.5px;line-height:1.5;max-width:56ch;margin:0 0 24px}

.lufb-kit__label{font-family:"Roboto Condensed",sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.16em;color:#6e6e6e;margin:0 0 6px}
.lufb-kit__list{list-style:none;margin:0 0 24px;padding:0}
.lufb-kit__row{display:grid;grid-template-columns:24px auto 1fr;gap:10px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid #c9c9c9;font-size:14.5px;line-height:1.45}
.lufb-kit__row:focus{outline:none}
.lufb-kit__q{font-weight:700;font-variant-numeric:tabular-nums;color:#111}
.lufb-kit__brand{font-family:"Roboto Condensed",sans-serif;font-weight:700;letter-spacing:.06em;color:#111}
.lufb-kit__text{display:block;color:#5c5c5c;font-size:13.5px;margin-top:3px;max-width:52ch}
.lufb-kit__tag{font-family:"Roboto Condensed",sans-serif;font-style:normal;font-weight:700;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6e6e6e;
  border:1px solid #b9b9b9;padding:1px 5px;margin-left:7px;vertical-align:2px}

/* Bildtausch beim Ueberfahren, wie auf den Kacheln */
.lufb-kit__swap{position:absolute;left:0;top:0;width:50%;height:100%;object-fit:contain;
  padding:26px;background:#fff;opacity:0;pointer-events:none;transition:opacity .12s ease;z-index:2}
.lufb-kit__row:hover .lufb-kit__swap,.lufb-kit__row:focus .lufb-kit__swap{opacity:1}
@media (max-width:880px){.lufb-kit__swap{display:none}}

.lufb-kit__thumb{display:none}
@media (max-width:880px){
  .lufb-kit__row{grid-template-columns:34px 24px auto 1fr;align-items:center}
  .lufb-kit__thumb{display:block;width:34px;height:34px;object-fit:contain;background:#fff}
}

.lufb-ask__btn{display:inline-block;font-family:"Roboto Condensed",sans-serif;font-weight:700;
  letter-spacing:.12em;font-size:15px;text-transform:uppercase;background:#141414;color:#fff;
  padding:13px 26px;text-decoration:none}
.lufb-ask__btn:hover,.lufb-ask__btn:focus{opacity:.86;color:#fff;text-decoration:none}
.lufb-ask__terms{font-size:13.5px;color:#6e6e6e;margin:16px 0 0;line-height:1.5}
.lufb-ask__pickup{font-size:13.5px;color:#6e6e6e;margin:18px 0 0;padding-top:15px;
  border-top:1px solid #c9c9c9;line-height:1.5}
.lufb-ask__pickup a{color:#6e6e6e}

@media (prefers-reduced-motion:reduce){.lufb-kit__swap{transition:none}}

/* Kachel-Titel als Link. Angelegt 2026-07-27, damit die Uebersichten auf die Produktseiten fuehren. */
.masonry-layout__card-link{color:inherit;text-decoration:none;display:inline-block}
.masonry-layout__card-link:hover,
.masonry-layout__card-link:focus{color:inherit;text-decoration:underline;text-underline-offset:5px}
.masonry-layout__card-link:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Anfrageformular. Angelegt 2026-07-27. */
.lufb-ask__box{margin:0}
.lufb-ask__box summary{display:inline-block;list-style:none;cursor:pointer}
.lufb-ask__box summary::-webkit-details-marker{display:none}
.lufb-ask__box[open] summary{margin-bottom:18px}
.lufb-ask__hint{font-size:13.5px;color:#8a2b2b;margin:0 0 12px}
.lufb-form{border-top:1px solid #c9c9c9;padding-top:18px}
.lufb-form__head{font-family:"Roboto Condensed",sans-serif;font-weight:700;letter-spacing:.1em;
  font-size:12.5px;color:#6e6e6e;margin:0 0 14px}
.lufb-form__head strong{color:#111}
.lufb-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
@media (max-width:560px){.lufb-form__grid{grid-template-columns:1fr}}
.lufb-form label{display:flex;flex-direction:column;gap:5px;font-family:"Roboto Condensed",sans-serif;
  font-weight:700;font-size:11px;letter-spacing:.12em;color:#6e6e6e}
.lufb-form input,.lufb-form textarea{font-family:inherit;font-size:15px;color:#333;background:#fff;
  border:1px solid #c9c9c9;padding:10px 11px;width:100%}
.lufb-form textarea{resize:vertical}
.lufb-form input:focus,.lufb-form textarea:focus{outline:2px solid #141414;outline-offset:1px}
.lufb-ask__btn--send{margin-top:16px;border:0;font-family:"Roboto Condensed",sans-serif;cursor:pointer}
.lufb-form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Zeilen ohne Bild brauchen trotzdem die Bildspalte, sonst verrutscht das Raster. */
.lufb-kit__thumb--leer{background:none}

/* Mobil: kein Ueberfahren moeglich, deshalb klappt das Bild beim Antippen unter der Zeile auf.
   Die Kachel auf der Uebersicht macht es genauso, nur dort ueber :focus am Listeneintrag. */
@media (max-width:880px){
  .lufb-kit__swap{
    display:block; position:static; grid-column:1 / -1;
    width:100%; height:auto; max-height:0; overflow:hidden;
    padding:0; background:#fff; opacity:0;
    transition:max-height .18s ease, opacity .18s ease, padding .18s ease;
  }
  .lufb-kit__row:focus .lufb-kit__swap,
  .lufb-kit__row:focus-within .lufb-kit__swap{
    max-height:240px; height:240px; object-fit:contain;
    opacity:1; padding:12px 0 4px;
  }
  .lufb-kit__row:focus{outline:none}
  .lufb-kit__row:focus .lufb-kit__name{color:#111}
}
@media (prefers-reduced-motion:reduce){
  .lufb-kit__swap{transition:none}
}

/* Auf den Detailseiten steht der Kopfbereich im Fluss, auf den Uebersichten liegt er
   absolut ueber dem Hero. Ohne Stapelvorrang schiebt sich die Produktkarte darueber
   und verdeckt das Burgermenue. Nur fuer single-Ansichten, damit die Uebersichten
   unveraendert bleiben. */
body.single .site-header{position:relative; z-index:30}
body.single .site-content,
body.single .site-main{position:relative; z-index:1}

/* Das offene Burgermenue klappt aus dem Kopfbereich nach unten ueber den Inhalt.
   Ohne eigenen Stapelvorrang malt das Produktbild darueber. */
body.single .header-navigation{position:relative; z-index:40}
body.single .header-navigation__list{z-index:40}