/* ==========================================================================
   NATIVE PROJECT — Design-System (CI aus Portfolio 2026)
   Eingespielt am 17.08.2026. Zum Zurücknehmen: dieses CSS komplett löschen.
   ========================================================================== */

:root{
  --np-ink:#1d1d1f;
  --np-brand:#4a4a4a;
  --np-muted:#6e6e73;
  --np-bg:#ffffff;
  --np-alt:#f5f5f7;
  --np-line:#e5e5e7;
  --np-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --np-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. Typografie ---------- */
body{
  font-family:var(--np-font);
  color:var(--np-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,h5,h6,p,li,td,th,label,input,textarea,select,button,
.elementor-heading-title,.elementor-widget-text-editor,
.woocommerce-loop-product__title,.product_title,
.price,.woocommerce-Price-amount,.elementor-button-text,
.woocommerce-breadcrumb,.wc-block-components-title{
  font-family:var(--np-font)!important;
}
h1,h2,h3,.elementor-heading-title,.product_title,
.woocommerce-products-header__title,.wc-block-components-title{
  letter-spacing:-.02em!important;
  line-height:1.06!important;
  font-weight:800!important;
}
.elementor-widget-text-editor,.elementor-widget-text-editor p{
  color:var(--np-muted)!important;
  font-size:17px;
  line-height:1.62;
}
.woocommerce-products-header__title,.product_title{
  text-transform:uppercase;
  font-size:clamp(30px,4.4vw,54px)!important;
}

/* ---------- 2. Header: transluzent, unaufdringlich ---------- */
.elementor-location-header{
  position:relative;z-index:999;
  background:rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.admin-bar .elementor-location-header{top:32px}
.elementor-location-header .elementor-section,
.elementor-location-header .e-con{background:transparent!important}
.elementor-location-header .elementskit-navbar-nav > li > a{
  font-size:14px!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  color:var(--np-ink)!important;
}
.elementor-location-header .elementskit-navbar-nav > li > a:hover,
.elementor-location-header .elementskit-navbar-nav > li.current-menu-item > a{
  color:#000!important;opacity:1;
}

/* ---------- 3. Buttons: ein System für alles ---------- */
.elementor-button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.wc-block-components-button,
.wp-element-button,
.wc-block-cart__submit-button{
  display:inline-flex!important;
  align-items:center;justify-content:center;
  min-height:46px;
  padding:0 26px!important;
  border-radius:999px!important;
  background:var(--np-ink)!important;
  color:#fff!important;
  border:1px solid var(--np-ink)!important;
  font-size:15px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  text-transform:none!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:transform .25s var(--np-ease),background .25s var(--np-ease);
}
.elementor-button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover{
  background:#000!important;color:#fff!important;transform:translateY(-1px);
}
.wc-block-components-checkout-place-order-button{width:100%}

/* ---------- 4. Shop-Übersicht ---------- */
.woocommerce ul.products{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))!important;
  gap:24px!important;
  margin:56px 0 0!important;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;clear:none!important;
  display:flex!important;flex-direction:column;
  background:#fff;border:1px solid var(--np-line);border-radius:18px;
  overflow:hidden;padding:0!important;
  transition:transform .35s var(--np-ease),box-shadow .35s var(--np-ease);
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.07);
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
  display:flex!important;flex-direction:column;flex:1;text-decoration:none;
}
.woocommerce ul.products li.product img{
  aspect-ratio:1/1;object-fit:contain;background:#fafafa;
  padding:22px;margin:0!important;width:100%;mix-blend-mode:multiply;
}
.woocommerce body.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:15px!important;font-weight:600!important;letter-spacing:0!important;
  text-transform:none!important;line-height:1.35!important;
  color:var(--np-ink)!important;padding:18px 20px 4px!important;margin:0!important;
}
.woocommerce ul.products li.product .price{
  color:var(--np-ink)!important;font-size:15px!important;font-weight:600!important;
  padding:0 20px!important;margin:0!important;display:block;
}
.woocommerce ul.products li.product:not(:has(.price)) .woocommerce-loop-product__title::after{
  content:"Preis auf Anfrage";display:block;margin-top:8px;
  font-size:15px;font-weight:600;color:var(--np-muted);
}
.woocommerce ul.products li.product .wc-gzd-additional-info{
  font-size:12px!important;color:var(--np-muted)!important;
  padding:6px 20px 0!important;margin:0!important;line-height:1.45;
}
.woocommerce ul.products li.product .wc-gzd-additional-info a{
  color:var(--np-muted)!important;text-decoration:underline;
}
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product .button{
  margin:18px 20px 22px!important;margin-top:auto!important;
  min-height:40px;font-size:14px!important;
}
.woocommerce .woocommerce-result-count{color:var(--np-muted);font-size:14px}
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--np-line);border-radius:10px;padding:10px 14px;background:#fff;
  color:var(--np-muted);font-size:14px;
}
.woocommerce-breadcrumb,.woocommerce-breadcrumb a{font-size:13px!important;color:var(--np-muted)!important}

/* ---------- 5. Produktseite ---------- */
.single-product .summary .price,
.single-product .summary .price .woocommerce-Price-amount{
  color:var(--np-ink)!important;font-size:22px!important;font-weight:600!important;
}
.single-product .summary .wc-gzd-additional-info,
.single-product .summary .wc-gzd-additional-info a{color:var(--np-muted)!important;font-size:13px!important}
.single-product .product_meta,.single-product .product_meta a{color:var(--np-muted)!important;font-size:14px}
.single-product .stock.in-stock{color:var(--np-muted)!important;font-weight:400!important}
.single-product .quantity input,
.single-product .easy-booking-datepicker input,
.single-product input.datepicker{
  border:1px solid var(--np-line)!important;border-radius:12px!important;
  min-height:46px;font-size:16px;
}
.single-product .related > h2,.single-product .upsells > h2{
  text-transform:uppercase;font-size:clamp(22px,3vw,34px)!important;margin-bottom:8px;
}
.single-product .related.products > h2 + h2{display:none}

/* ---------- 6. Warenkorb & Kasse ---------- */
.wc-block-components-product-name,.wc-block-cart-item__product-name a{
  color:var(--np-ink)!important;font-weight:600!important;text-decoration:none;
}
.wc-block-components-totals-item__label{color:var(--np-ink)!important}
.wc-block-components-text-input input,.wc-block-components-combobox input,.wc-block-components-textarea{
  border-radius:12px!important;border-color:var(--np-line)!important;
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option,
.wc-block-components-notice-banner{border-radius:14px!important}
.wc-block-components-order-summary{border-radius:16px!important}

/* ---------- 7. Formulare ---------- */
.elementor-field-group .elementor-field,.elementor-field-textual{
  border:1px solid var(--np-line)!important;border-radius:12px!important;
  background:#fff!important;color:var(--np-ink)!important;min-height:50px;
  padding:14px 16px!important;font-size:16px!important;box-shadow:none!important;
  transition:border-color .2s;
}
.elementor-field-textual:focus{border-color:var(--np-ink)!important;outline:none}
.elementor-field-textual::placeholder{color:#9a9aa0!important;opacity:1}
textarea.elementor-field-textual{min-height:130px}
.elementor-widget-form,.elementor-widget-form .elementor-widget-container{background:transparent!important}

/* ---------- 8. Footer ---------- */
.elementor-location-footer{background:var(--np-brand)!important;color:#fff}
.elementor-location-footer .elementor-section,
.elementor-location-footer .e-con{background:transparent!important}
.elementor-location-footer h1,.elementor-location-footer h2,
.elementor-location-footer h3,.elementor-location-footer h4,
.elementor-location-footer .elementor-heading-title{
  color:rgba(255,255,255,.55)!important;font-size:11px!important;
  letter-spacing:.24em!important;text-transform:uppercase!important;font-weight:600!important;
}
.elementor-location-footer a,.elementor-location-footer p,
.elementor-location-footer .elementor-icon-list-text,.elementor-location-footer li{
  color:rgba(255,255,255,.86)!important;font-size:14.5px!important;
}
.elementor-location-footer a:hover{color:#fff!important}
.elementor-location-footer img{filter:brightness(0) invert(1)}
.elementor-location-footer::after{
  content:"FROM VISION TO REALITY";display:block;
  border-top:1px solid rgba(255,255,255,.18);
  max-width:1140px;margin:0 auto;padding:22px 24px;
  font-size:11px;letter-spacing:.24em;color:rgba(255,255,255,.7);
}

/* ---------- 9. Flächen ---------- */
.woocommerce-page .site-main,.single-product .site-main,
.woocommerce-cart .site-main,.woocommerce-checkout .site-main{
  padding:clamp(48px,7vw,92px) 24px clamp(72px,10vw,130px)!important;
  max-width:1180px;margin:0 auto;
}

/* ---------- 10. Bewegung ---------- */
.np-reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--np-ease),transform .85s var(--np-ease);
  will-change:opacity,transform;
}
.np-reveal.np-in{opacity:1;transform:none}
.np-parallax{will-change:background-position}
@media (prefers-reduced-motion:reduce){
  .np-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .np-parallax{background-position:center!important}
}

/* ---------- 11. Kleinkram ---------- */
::selection{background:var(--np-ink);color:#fff}
a{text-decoration-thickness:1px;text-underline-offset:2px}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-error,.woocommerce .woocommerce-info{
  border-top:0!important;border-radius:14px!important;
  background:var(--np-alt)!important;color:var(--np-ink)!important;
}

/* ---------- 12. Korrekturen ---------- */
/* Warenkorb-Icon im Header bleibt ein schlichter Kreis */
.elementor-menu-cart__toggle .elementor-button,
.elementor-menu-cart__toggle_button{
  background:transparent!important;
  color:var(--np-ink)!important;
  border:1px solid var(--np-line)!important;
  border-radius:999px!important;
  width:40px;min-height:40px;padding:0!important;
}
.elementor-menu-cart__toggle .elementor-button:hover,
.elementor-menu-cart__toggle_button:hover{
  background:var(--np-alt)!important;color:var(--np-ink)!important;transform:none;
  border-color:var(--np-ink)!important;
}
.elementor-menu-cart__toggle .elementor-button-icon{color:inherit!important}

/* Türkise Formularbox auf der Kontaktseite neutralisieren */
.elementor-element-0479953{
  background:var(--np-alt)!important;
  border-radius:20px;
  padding:clamp(24px,3vw,40px)!important;
}
.elementor-element-0479953 .elementor-field-textual{
  background:#fff!important;border-color:var(--np-line)!important;
}
.elementor-element-0479953 .elementor-field-textual::placeholder{color:#9a9aa0!important}

/* ---------- 13. Produktseite: eine Farbe statt drei ---------- */
body.single-product .elementor-widget-woocommerce-product-title .product_title,
body.single-product .elementor-widget-woocommerce-product-title .elementor-heading-title,
body.single-product .elementor-widget-heading .elementor-heading-title{
  color:var(--np-ink)!important;
}
body.single-product .elementor-widget-woocommerce-product-price,
body.single-product .elementor-widget-woocommerce-product-price .price,
body.single-product .elementor-widget-woocommerce-product-price .price *,
body.single-product .elementor-widget-woocommerce-product-price .woocommerce-Price-amount,
body.single-product .elementor-widget-woocommerce-product-price .woocommerce-Price-currencySymbol{
  color:var(--np-ink)!important;
}
body.single-product .elementor-widget-woocommerce-product-price .price{
  font-size:22px!important;font-weight:600!important;
}
body.single-product .elementor-widget-woocommerce-product-stock,
body.single-product .elementor-widget-woocommerce-product-stock *{
  color:var(--np-muted)!important;font-weight:400!important;font-size:14px!important;
}
body.single-product .elementor-widget-woocommerce-product-meta,
body.single-product .elementor-widget-woocommerce-product-meta a{
  color:var(--np-muted)!important;font-size:14px!important;
}
body.single-product .elementor-widget-woocommerce-products .woocommerce-loop-product__title{
  text-transform:none!important;
}

/* ---------- 14. Letzte Farbreste ---------- */
.wc-block-components-checkout-policies a,
.wc-block-checkout__terms a,
.wc-block-components-checkout-step a,
.woocommerce-terms-and-conditions-wrapper a,
.wc-gzd-checkbox-placeholder a,
.woocommerce-privacy-policy-text a{
  color:var(--np-ink)!important;
  text-decoration:underline;
  text-underline-offset:2px;
}
.woocommerce body.woocommerce ul.products li.product .woocommerce-loop-product__title:hover{color:#000!important}
.woocommerce a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title{color:#000!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--np-ink)!important}

/* ---------- 15. Sechseck-Formsprache (CI Portfolio 2026) ---------- */
:root{ --np-hex: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }

/* Shop-Einstieg: Kategorien randlos als Sechsecke */
.woocommerce ul.products li.product-category{
  border:0!important; background:transparent!important;
  border-radius:0!important; overflow:visible!important;
}
.woocommerce ul.products li.product-category:hover{
  transform:none!important; box-shadow:none!important;
}
.woocommerce ul.products li.product-category img{
  width:100%!important; aspect-ratio:1/1.155!important;
  object-fit:cover!important; padding:0!important;
  background:none!important; mix-blend-mode:normal!important;
  clip-path:var(--np-hex);
  filter:grayscale(.18);
  transition:transform .6s var(--np-ease), filter .6s var(--np-ease);
}
.woocommerce ul.products li.product-category:hover img{
  transform:scale(1.04); filter:grayscale(0);
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title{
  text-align:center!important; padding:18px 6px 0!important; margin:0!important;
  font-size:13px!important; font-weight:600!important;
  letter-spacing:.1em!important; text-transform:uppercase!important;
  color:var(--np-ink)!important;
}
.woocommerce ul.products li.product-category .count{display:none!important}

/* Startseite: Leistungs- und Kategoriebilder als Sechsecke */
[data-id="231ca60"] .elementor-widget-image img,
[data-id="6f6fc7a"] .elementor-widget-image img{
  width:100%!important; aspect-ratio:1/1.155!important;
  object-fit:cover!important;
  clip-path:var(--np-hex);
  filter:grayscale(.18);
  transition:transform .6s var(--np-ease), filter .6s var(--np-ease);
}
[data-id="231ca60"] .e-con:hover .elementor-widget-image img,
[data-id="6f6fc7a"] .e-con:hover .elementor-widget-image img{
  transform:scale(1.04); filter:grayscale(0);
}

/* Galerie als Sechseck-Cluster (Elementor-Raster überschreiben) */
[data-id="9f0413b"] .e-gallery-container{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))!important;
  gap:18px!important;
  height:auto!important;
  position:static!important;
}
[data-id="9f0413b"] .e-gallery-item{
  position:relative!important;
  left:auto!important; top:auto!important;
  width:auto!important; height:auto!important;
  aspect-ratio:1/1.155!important;
  transform:none!important;
  clip-path:var(--np-hex);
  filter:grayscale(.18);
  transition:filter .6s var(--np-ease);
}
[data-id="9f0413b"] .e-gallery-item:hover{filter:grayscale(0)}
[data-id="9f0413b"] .e-gallery-image{
  width:100%!important; height:100%!important;
  background-size:cover!important; background-position:center!important;
}

/* ---------- 16. Startseite beruhigen ---------- */
/* Leistungsraster: letzte Reihe mittig statt links angeschlagen */
[data-id="c29d983"]{
  grid-template-columns:repeat(auto-fit,minmax(210px,252px))!important;
  justify-content:center!important;
  gap:clamp(18px,2vw,28px)!important;
}
/* Karten: ruhiger, ohne harte Kanten */
[data-id="231ca60"] .e-con[class*="elementor-element-"]:has(> .e-con-inner .elementor-widget-image),
[data-id="231ca60"] .e-con:has(.elementor-widget-image):has(.elementor-widget-heading){
  border-radius:18px;
}
[data-id="231ca60"] .elementor-widget-text-editor{
  font-size:14.5px!important; line-height:1.6!important;
}
[data-id="231ca60"] .elementor-widget-heading .elementor-heading-title{
  font-size:19px!important; text-transform:uppercase!important;
  letter-spacing:.01em!important;
}
[data-id="231ca60"] .elementor-widget-heading a{text-decoration:none!important}
/* Kategoriekacheln: Bild, Titel, Button in einer Linie */
[data-id="6f6fc7a"] .elementor-widget-heading .elementor-heading-title{
  font-size:14px!important; letter-spacing:.1em!important;
  text-transform:uppercase!important;
}

/* ---------- 17. Sechsecke: Beschnitt und Unterstreichungen ---------- */
[data-id="231ca60"] .elementor-widget-image,
[data-id="231ca60"] .elementor-widget-image .elementor-widget-container,
[data-id="231ca60"] .elementor-widget-image figure,
[data-id="231ca60"] .elementor-widget-image a,
[data-id="6f6fc7a"] .elementor-widget-image,
[data-id="6f6fc7a"] .elementor-widget-image .elementor-widget-container,
[data-id="6f6fc7a"] .elementor-widget-image figure,
[data-id="6f6fc7a"] .elementor-widget-image a,
.woocommerce ul.products li.product-category a{
  overflow:visible!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  display:block!important;
  line-height:0!important;
}
[data-id="231ca60"] .elementor-widget-image img,
[data-id="6f6fc7a"] .elementor-widget-image img{
  max-height:none!important; min-height:0!important; display:block!important;
}
/* Überschriften der Leistungskarten ohne Unterstreichung */
[data-id="231ca60"] .elementor-heading-title,
[data-id="231ca60"] .elementor-heading-title a,
[data-id="6f6fc7a"] .elementor-heading-title,
[data-id="6f6fc7a"] .elementor-heading-title a{
  text-decoration:none!important;
  border-bottom:0!important;
}

/* ---------- 18. Sechsecke ins richtige Verhaeltnis, Reihen mittig ---------- */
[data-id="231ca60"] .elementor-widget-image img,
[data-id="6f6fc7a"] .elementor-widget-image img,
.woocommerce ul.products li.product-category img{
  height:auto!important;
}
/* Leistungsraster als Flexbox: jede Reihe mittig, auch die letzte */
[data-id="c29d983"]{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  grid-template-columns:none!important;
  gap:clamp(18px,2vw,28px)!important;
}
[data-id="c29d983"] > *{
  flex:0 1 252px!important;
  max-width:252px!important;
  width:252px!important;
}
@media (max-width:600px){
  [data-id="c29d983"] > *{flex:0 1 100%!important;max-width:340px!important;width:100%!important}
}

/* ---------- 19. Kurze Seiten: Footer rutscht nicht nach oben ---------- */
main#content,.site-main{min-height:max(280px,calc(100vh - 480px))}

/* ---------- 20. 404-Seite ---------- */
body.error404 .site-main{
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;max-width:720px;margin:0 auto;
  padding:clamp(60px,10vw,120px) 24px!important;
}
body.error404 .entry-title{
  text-transform:uppercase;font-size:clamp(28px,4vw,46px)!important;margin-bottom:16px;
}
body.error404 .page-content p{color:var(--np-muted);font-size:17px;margin-bottom:32px}
.np-404-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.np-404-links .np-ghost{
  background:transparent!important;color:var(--np-ink)!important;
  border:1px solid var(--np-line)!important;
}
.np-404-links .np-ghost:hover{
  background:var(--np-alt)!important;color:var(--np-ink)!important;
  border-color:var(--np-ink)!important;
}

/* ---------- 21. Nur fuer Screenreader und Suchmaschinen ---------- */
.np-sr-h1{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- 22. Mobil ---------- */
@media (max-width:767px){
  body{overflow-x:clip}
  .woocommerce ul.products{
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;
    gap:16px!important;margin-top:32px!important;
  }
  .woocommerce ul.products li.product img{padding:14px}
  .woocommerce body.woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:14px!important;padding:14px 14px 4px!important;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce ul.products li.product .wc-gzd-additional-info{padding-left:14px!important;padding-right:14px!important}
  .woocommerce ul.products li.product > a.button,
  .woocommerce ul.products li.product .button{margin:14px!important;margin-top:auto!important}
  .elementor-location-header .elementor-section,
  .elementor-location-header .e-con{padding-left:16px!important;padding-right:16px!important}
  .np-404-links{flex-direction:column}
  .np-404-links .elementor-button{width:100%}
}
@media (max-width:480px){
  .woocommerce ul.products{grid-template-columns:1fr!important}
}

/* ---------- 23. Kategoriekacheln: Buttons auf einer Linie ---------- */
[data-id="ff2e131"]{align-items:stretch!important}
[data-id="ff2e131"] > .e-con{display:flex!important;flex-direction:column!important;height:100%!important}
[data-id="ff2e131"] > .e-con .elementor-widget-button{margin-top:auto!important}
[data-id="ff2e131"] > .e-con .elementor-widget-heading{min-height:2.6em;display:flex;align-items:center;justify-content:center}

/* ==========================================================================
   24. Typografie-Feinschliff: ruhiger, klarer, weniger Versalien
   ========================================================================== */
:root{
  --np-font:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,Inter,"Segoe UI Variable Display","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --np-body:#424245;
  --np-tert:#86868b;
}

/* Grundtext: dunkler, luftiger, ruhiger */
body{
  font-size:17px;
  line-height:1.47;
  letter-spacing:-0.003em;
  color:var(--np-ink);
}
p,li,.elementor-widget-text-editor,.elementor-widget-text-editor p{
  color:var(--np-body)!important;
  font-size:17px;
  line-height:1.53;
  letter-spacing:-0.003em;
  font-weight:400!important;
}

/* Ueberschriften: halbfett statt fett, weniger eng, keine Versalien */
h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.product_title,
.woocommerce-products-header__title,
.wc-block-components-title,
.woocommerce-loop-product__title,
.woocommerce-loop-category__title,
.entry-title{
  font-weight:600!important;
  text-transform:none!important;
  letter-spacing:-0.015em!important;
  line-height:1.1!important;
  color:var(--np-ink);
}
h1,.woocommerce-products-header__title,.product_title,body.error404 .entry-title{
  font-size:clamp(34px,4.4vw,56px)!important;
  letter-spacing:-0.021em!important;
  line-height:1.07!important;
}
h2{ font-size:clamp(26px,3.1vw,40px)!important; letter-spacing:-0.018em!important; }
h3{ font-size:clamp(20px,2.1vw,26px)!important; letter-spacing:-0.012em!important; }
h4,h5,h6{ font-size:19px!important; letter-spacing:-0.008em!important; }

/* Fliesstext direkt unter einer Ueberschrift bekommt Luft */
.elementor-widget-heading + .elementor-widget-text-editor{ margin-top:10px }

/* Buttons: leichter, weniger Gewicht */
.elementor-button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.wc-block-components-button,.wp-element-button,.wc-block-cart__submit-button{
  font-size:16px!important;
  font-weight:400!important;
  letter-spacing:-0.008em!important;
  min-height:44px;
  padding:0 22px!important;
}

/* Navigation */
.elementor-location-header .elementskit-navbar-nav > li > a{
  font-size:15px!important;
  font-weight:400!important;
  letter-spacing:-0.008em!important;
}

/* Shop: Produkt- und Kategorienamen ruhig setzen */
.woocommerce body.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:16px!important;
  font-weight:500!important;
  letter-spacing:-0.01em!important;
  line-height:1.3!important;
}
.woocommerce ul.products li.product .price{
  font-size:16px!important;font-weight:400!important;color:var(--np-body)!important;
}
.woocommerce ul.products li.product:not(:has(.price)) .woocommerce-loop-product__title::after{
  font-size:16px;font-weight:400;color:var(--np-tert);
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title{
  font-size:16px!important;
  font-weight:500!important;
  letter-spacing:-0.01em!important;
  text-transform:none!important;
  padding-top:20px!important;
}

/* Startseite: Karten */
[data-id="231ca60"] .elementor-widget-heading .elementor-heading-title{
  font-size:20px!important;font-weight:600!important;
  text-transform:none!important;letter-spacing:-0.012em!important;
}
[data-id="231ca60"] .elementor-widget-text-editor{
  font-size:15px!important;line-height:1.5!important;color:var(--np-tert)!important;
}
[data-id="ff2e131"] .elementor-widget-heading .elementor-heading-title,
[data-id="6f6fc7a"] .elementor-widget-heading .elementor-heading-title{
  font-size:17px!important;font-weight:500!important;
  text-transform:none!important;letter-spacing:-0.01em!important;
}

/* Produktseite */
.single-product .summary .price,
.single-product .summary .price .woocommerce-Price-amount,
body.single-product .elementor-widget-woocommerce-product-price .price{
  font-size:21px!important;font-weight:400!important;color:var(--np-ink)!important;
}
.single-product .related > h2,.single-product .upsells > h2{
  text-transform:none!important;
}

/* Footer: Rubriken ohne Sperrsatz */
.elementor-location-footer h1,.elementor-location-footer h2,
.elementor-location-footer h3,.elementor-location-footer h4,
.elementor-location-footer .elementor-heading-title{
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:-0.005em!important;
  text-transform:none!important;
  color:rgba(255,255,255,.62)!important;
}
.elementor-location-footer a,.elementor-location-footer p,
.elementor-location-footer .elementor-icon-list-text,.elementor-location-footer li{
  font-size:15px!important;font-weight:400!important;letter-spacing:-0.006em!important;
  color:rgba(255,255,255,.82)!important;
}
.elementor-location-footer::after{
  font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.5);
}

/* Kleinteile */
.woocommerce-breadcrumb,.woocommerce-breadcrumb a{font-size:14px!important;letter-spacing:-0.005em!important}
.woocommerce .woocommerce-result-count{font-size:15px}
.single-product .product_meta,.single-product .product_meta a{font-size:14px!important;color:var(--np-tert)!important}

/* ---------- 25. Abschnitts-Ueberschriften wieder gross ---------- */
[data-id="231ca60"] [data-id="d219c29"] .elementor-heading-title,
[data-id="6f6fc7a"] [data-id="e8001c1"] .elementor-heading-title{
  font-size:clamp(28px,3.2vw,40px)!important;
  font-weight:600!important;
  letter-spacing:-0.018em!important;
  line-height:1.1!important;
}
/* Kartentexte etwas kraeftiger als hellgrau */
[data-id="231ca60"] .elementor-widget-text-editor{
  color:var(--np-muted)!important;
}
/* Abstand unter den Abschnitts-Ueberschriften */
[data-id="231ca60"] [data-id="d219c29"],
[data-id="6f6fc7a"] [data-id="e8001c1"]{
  margin-bottom:8px;
}

/* ==========================================================================
   26. Hausschrift Inter, lokal gehostet (kein Google-Server)
   Dateien liegen in der Mediathek unter /wp-content/uploads/2026/08/
   ========================================================================== */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/wp-content/uploads/2026/08/inter-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/wp-content/uploads/2026/08/inter-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/wp-content/uploads/2026/08/inter-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("/wp-content/uploads/2026/08/inter-latin-700-normal.woff2") format("woff2");
}

:root{
  --np-font:"Inter","SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
/* Schrift auch dort, wo Abschnitt 1 sie noch nicht gesetzt hat */
body,button,input,select,textarea,
.elementor-widget-container,
.elementor-button,.elementor-button-text,
.woocommerce,.woocommerce-page,
.wc-block-components-button,
.elementskit-navbar-nav > li > a,
.woocommerce-loop-category__title,
.wc-gzd-additional-info,
.entry-title,.page-content{
  font-family:var(--np-font)!important;
}
i[class*="eicon"],[class*="eicon"]::before{font-family:eicons!important}
.dashicons,.dashicons-before::before{font-family:dashicons!important}

/* ---------- 27. Produktseite: Zwischenueberschrift kleiner ---------- */
[data-id="bc89277"] .elementor-heading-title{
  font-size:20px!important;
  font-weight:600!important;
  letter-spacing:-0.012em!important;
  margin-bottom:4px;
}

/* ---------- 28. Nachzieher: helle Ueberschrift auf Bild, Icon-Farben ---------- */
[data-id="c820fca"] .elementor-heading-title{color:#ffffff!important}

.elementor-icon-list-icon i,.elementor-icon-list-icon svg,
.elementor-icon i,.elementor-icon svg{
  color:var(--np-ink)!important;fill:var(--np-ink)!important;
}
.elementor-location-footer .elementor-icon-list-icon i,
.elementor-location-footer .elementor-icon-list-icon svg,
.elementor-location-footer .elementor-icon i,
.elementor-location-footer .elementor-icon svg{
  color:rgba(255,255,255,.72)!important;fill:rgba(255,255,255,.72)!important;
}

/* ==========================================================================
   29. Apple-Feinschliff: Textsatz, Gewichte, Unterstriche
   ========================================================================== */

/* --- Lange Textabschnitte linksbuendig, wie bei Apple --- */
body.page-id-476 .elementor-widget-text-editor,
body.page-id-511 .elementor-widget-text-editor,
body.page-id-476 .elementor-widget-heading .elementor-heading-title,
body.page-id-511 .elementor-widget-heading .elementor-heading-title{
  text-align:left!important;
}
/* Die Titelbilder oben behalten ihre mittige Ueberschrift */
body.page-id-476 [data-id="8334a13"] .elementor-heading-title,
body.page-id-511 [data-id="bdb1dd5"] .elementor-heading-title{
  text-align:center!important;
}
/* Lesbare Zeilenlaenge statt randvoller Spalte */
body.page-id-476 .elementor-widget-text-editor,
body.page-id-511 .elementor-widget-text-editor{
  max-width:640px;
}
body.page-id-476 .elementor-widget-text-editor p,
body.page-id-511 .elementor-widget-text-editor p{
  margin-bottom:1.1em;
}

/* --- Weniger Fettung --- */
h3,h4,h5,h6{font-weight:500!important}
strong,b{font-weight:600!important}
[data-id="c29d983"] .elementor-widget-heading .elementor-heading-title{
  font-weight:500!important;
}
.elementor-location-footer h1,.elementor-location-footer h2,
.elementor-location-footer h3,.elementor-location-footer h4,
.elementor-location-footer .elementor-heading-title{
  font-weight:500!important;
}

/* --- Unterstriche zurueckhaltend --- */
a{text-decoration:none}
.elementor-widget-text-editor a,
.elementor-icon-list-text a,
.woocommerce ul.products li.product .wc-gzd-additional-info a,
.single-product .wc-gzd-additional-info a,
.single-product .product_meta a,
.woocommerce-breadcrumb a,
.elementor-location-footer a{
  text-decoration:none!important;
}
.elementor-widget-text-editor a:hover,
.wc-gzd-additional-info a:hover,
.elementor-location-footer a:hover{
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}
/* Pflichtangaben an der Kasse bleiben klar erkennbar, aber leiser */
.woocommerce-terms-and-conditions-wrapper a,
.wc-gzd-checkbox-placeholder a,
.wc-block-checkout__terms a,
.wc-block-components-checkout-policies a,
.woocommerce-privacy-policy-text a{
  text-decoration:underline!important;
  text-decoration-color:rgba(29,29,31,.3)!important;
  text-underline-offset:3px!important;
  text-decoration-thickness:1px!important;
}

/* ---------- 30. Korrektur: Datumswaehler und andere Overlays ----------
   will-change/transform auf einem Elternelement macht position:fixed
   darin kaputt. Nach der Einblendung wieder freigeben. */
.np-reveal.np-in{
  will-change:auto!important;
  transform:none!important;
}
/* Formular- und Kalender-Bereiche nehmen gar nicht erst an der
   Einblendung teil */
.elementor-widget-woocommerce-product-add-to-cart,
.elementor-widget-form,
form.cart,
.wceb_picker_wrap{
  will-change:auto!important;
  transform:none!important;
  opacity:1!important;
}
/* Kalender ueber allem anderen */
.picker{z-index:100000!important}
.picker__holder{z-index:100000!important}

/* ---------- 31. Warenkorb: Produktnamen ohne Unterstrich ---------- */
.wc-block-components-product-name,
.wc-block-cart-item__product-name a,
.woocommerce-cart-form .product-name a{
  text-decoration:none!important;
}
.wc-block-components-product-name:hover,
.wc-block-cart-item__product-name a:hover,
.woocommerce-cart-form .product-name a:hover{
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}

/* ---------- 32. Kasse: Rechtstexte in der Hausfarbe ---------- */
.wc-gzd-block-checkout-checkboxes a,
.wc-gzd-block-checkout-checkboxes__terms a,
.checkbox-legal a,
.wc-gzd-checkbox-placeholder a,
.wc-block-components-checkbox__label a{
  color:var(--np-ink)!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(29,29,31,.3)!important;
  text-underline-offset:3px!important;
  text-decoration-thickness:1px!important;
}
.wc-gzd-block-checkout-checkboxes a:hover,
.checkbox-legal a:hover,
.wc-block-components-checkbox__label a:hover{
  text-decoration-color:var(--np-ink)!important;
}

/* Bestellübersicht: Produktnamen nicht groesser als der Rest */
.wc-block-components-order-summary-item__description .wc-block-components-product-name,
.wc-block-components-order-summary-item .wc-block-components-product-name{
  font-size:16px!important;
  font-weight:500!important;
  letter-spacing:-0.01em!important;
}

/* ==========================================================================
   33. Shop: Kategorie-Navigation links neben der Produktliste
   ========================================================================== */
body.post-type-archive-product main.site-main,
body.tax-product_cat main.site-main,
body.tax-product_tag main.site-main{
  display:grid;
  grid-template-columns:225px minmax(0,1fr);
  column-gap:clamp(26px,3.5vw,56px);
  align-items:start;
}
body.post-type-archive-product main.site-main > *,
body.tax-product_cat main.site-main > *,
body.tax-product_tag main.site-main > *{ grid-column:2 }

body.post-type-archive-product main.site-main > .woocommerce-breadcrumb,
body.tax-product_cat main.site-main > .woocommerce-breadcrumb,
body.tax-product_tag main.site-main > .woocommerce-breadcrumb{ grid-column:1 / -1 }

body.post-type-archive-product main.site-main > .np-shopnav,
body.tax-product_cat main.site-main > .np-shopnav,
body.tax-product_tag main.site-main > .np-shopnav{
  grid-column:1;
  grid-row:2 / span 50;
  align-self:start;
  position:sticky;
  top:104px;
}

.np-shopnav{ padding-top:6px }
.np-shopnav__titel{
  font-size:13px!important;
  font-weight:600!important;
  color:var(--np-tert)!important;
  margin:0 0 14px!important;
  letter-spacing:-0.003em!important;
}
.np-shopnav ul{ list-style:none!important; margin:0!important; padding:0!important }
.np-shopnav li{ margin:0!important; padding:0!important }
.np-shopnav a{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:7px 0;
  font-size:15px; line-height:1.35;
  color:var(--np-muted)!important;
  text-decoration:none!important;
  transition:color .18s var(--np-ease);
}
.np-shopnav a:hover{ color:var(--np-ink)!important }
.np-shopnav__zahl{
  font-size:12px; color:var(--np-tert); font-variant-numeric:tabular-nums;
}
.np-shopnav .ist-aktiv > a{
  color:var(--np-ink)!important;
  font-weight:600;
}
.np-shopnav__alle{
  padding-bottom:8px!important;
  margin-bottom:8px!important;
  border-bottom:1px solid var(--np-line);
}
.np-shopnav__kinder{ margin:0 0 4px 0!important; padding:0 0 4px 12px!important }
.np-shopnav__kinder a{ font-size:14px; padding:5px 0 }

/* Produktraster bekommt in der schmaleren Spalte weniger Spalten */
body.post-type-archive-product .woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products{
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important;
  margin-top:28px!important;
}
body.post-type-archive-product .woocommerce-result-count,
body.tax-product_cat .woocommerce-result-count{ margin-top:4px }

/* Mobil: Navigation als waagerechte Leiste ueber der Liste */
@media (max-width:900px){
  body.post-type-archive-product main.site-main,
  body.tax-product_cat main.site-main,
  body.tax-product_tag main.site-main{
    display:block;
  }
  body.post-type-archive-product main.site-main > .np-shopnav,
  body.tax-product_cat main.site-main > .np-shopnav{
    position:static; margin:8px 0 4px;
  }
  .np-shopnav__liste{
    display:flex; flex-wrap:nowrap; gap:8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:6px!important;
    scrollbar-width:none;
  }
  .np-shopnav__liste::-webkit-scrollbar{ display:none }
  .np-shopnav__liste > li{ flex:0 0 auto }
  .np-shopnav__alle{ border-bottom:0!important; margin-bottom:0!important; padding-bottom:0!important }
  .np-shopnav a{
    white-space:nowrap;
    border:1px solid var(--np-line);
    border-radius:999px;
    padding:8px 14px!important;
    font-size:14px;
  }
  .np-shopnav .ist-aktiv > a{ border-color:var(--np-ink); }
  .np-shopnav__kinder{ display:none!important }
  .np-shopnav__zahl{ display:none }
}

/* ---------- 34. Shop: Ergebniszeile und Sortierung nebeneinander ---------- */
body.post-type-archive-product main.site-main > .woocommerce-result-count,
body.tax-product_cat main.site-main > .woocommerce-result-count{
  grid-row:4; align-self:center; margin:0!important;
}
body.post-type-archive-product main.site-main > .woocommerce-ordering,
body.tax-product_cat main.site-main > .woocommerce-ordering{
  grid-row:4; justify-self:end; align-self:center; margin:0!important;
}
.woocommerce-ordering select{
  width:auto!important; min-width:190px; max-width:100%;
  font-size:14px!important; padding:9px 14px!important;
}
@media (max-width:900px){
  body.post-type-archive-product main.site-main > .woocommerce-result-count,
  body.tax-product_cat main.site-main > .woocommerce-result-count,
  body.post-type-archive-product main.site-main > .woocommerce-ordering,
  body.tax-product_cat main.site-main > .woocommerce-ordering{
    grid-row:auto; justify-self:auto;
  }
  .woocommerce-ordering{ margin-top:10px!important }
}

/* ---------- 35. Produktseite: Kategorie-Navigation links ---------- */
@media (min-width:901px){
  body.single-product .np-shopnav--produkt{
    float:left;
    width:225px;
    margin:0 0 48px 30px;
    padding-top:34px;
    position:sticky;
    top:104px;
  }
  body.single-product .elementor-location-single{
    margin-left:286px;
  }
  body.single-product .elementor-location-footer{ clear:both }
  body.single-product .elementor-location-single > .elementor-element{
    padding-left:24px!important;
  }
}
@media (max-width:900px){
  body.single-product .np-shopnav--produkt{ display:none }
}

/* ---------- 36. Produktseite: Rand links und rechts angleichen ---------- */
@media (min-width:901px){
  body.single-product{
    --np-rand: max(30px, calc((100vw - 1600px) / 2));
  }
  body.single-product .np-shopnav--produkt{
    margin-left:var(--np-rand);
  }
  body.single-product .elementor-location-single{
    margin-left:calc(var(--np-rand) + 261px);
    margin-right:var(--np-rand);
  }
  body.single-product .elementor-location-single > .elementor-element{
    padding-left:0!important;
    padding-right:0!important;
  }
  /* feine Trennlinie zwischen Navigation und Produkt */
  body.single-product .np-shopnav--produkt{
    border-right:1px solid var(--np-line);
    padding-right:24px;
    box-sizing:content-box;
  }
}

/* ---------- 37. Korrekturen Produktseite ---------- */
/* Navigation nicht mitscrollen lassen: sonst laeuft sie in den Footer */
@media (min-width:901px){
  body.single-product .np-shopnav--produkt{ position:static }
}
/* Produktkarten immer als Spalte, auch im Widget "Aehnliche Produkte" */
.woocommerce ul.products li.product,
.elementor-widget-woocommerce-products ul.products li.product{
  flex-direction:column!important;
  align-items:stretch!important;
}

/* ---------- 38. Textseiten (Impressum, Datenschutz): Links und Abstände ---------- */
.page-content a,
.entry-content a{
  color:var(--np-ink)!important;
  text-decoration:underline!important;
  text-decoration-color:rgba(29,29,31,.3)!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px!important;
}
.page-content a:hover,
.entry-content a:hover{ text-decoration-color:var(--np-ink)!important }

.page-content,
.entry-content{ max-width:760px }
.page-content h2,
.entry-content h2{ margin-top:1.6em!important; margin-bottom:.5em!important }
.page-content h3,
.entry-content h3{ margin-top:1.5em!important; margin-bottom:.4em!important }
.page-content p,
.entry-content p{ margin-bottom:1.05em!important }
body.page .site-main > .page-header .entry-title,
body.page .entry-title{ margin-bottom:.2em }

/* ============================================================
   39. Mobil-Feinschliff  (19.08.2026)
   ============================================================ */

@media (max-width: 1023px){
  .np-shopnav{ position: relative; margin-bottom: 22px !important; }
  .np-shopnav .np-shopnav-list{
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }
  .np-shopnav .np-shopnav-list > li{ scroll-snap-align: start; }
  .np-shopnav::after{
    content:""; position:absolute; right:0; bottom:26px;
    width:28px; height:36px; pointer-events:none;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 70%);
  }
  body.single-product .np-shopnav{ display: block !important; }
}

/* ============================================================
   40. Warenkorb und Kasse  (19.08.2026)
   ============================================================ */

/* 40.1  Volle Breite fuer Warenkorb und Kasse */
body.woocommerce-cart .page-content,
body.woocommerce-checkout .page-content{
  max-width: 1140px !important;
}
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart{ max-width: none !important; width: 100% !important; }

/* 40.2  Ueberschriften im Block-Checkout auf Formulargroesse */
.wc-block-components-title,
.wc-block-components-title.wc-block-components-title{
  font-size: 22px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
}

/* 40.3  Buttons im Block-Warenkorb und Block-Checkout lesbar */
.wc-block-cart__submit-button,
.wc-block-components-button:not(.wc-block-components-button--tertiary),
.wc-block-components-checkout-place-order-button{
  color: #fff !important;
  background: var(--np-ink, #1d1d1f) !important;
  border-color: var(--np-ink, #1d1d1f) !important;
}
.wc-block-cart__submit-button *,
.wc-block-components-button:not(.wc-block-components-button--tertiary) *,
.wc-block-components-checkout-place-order-button *{
  color: #fff !important;
}
.wc-block-components-button--tertiary{ color: var(--np-ink, #1d1d1f) !important; }

/* 40.4  Bestelluebersicht etwas luftiger */
.wc-block-components-sidebar{ min-width: 300px; }

/* ============================================================
   41. Steuer- und Versandhinweis in einer Zeile  (19.08.2026)
   ============================================================ */

p.wc-gzd-additional-info{
  display: inline !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #86868b !important;
}
p.wc-gzd-additional-info + p.wc-gzd-additional-info::before{
  content: " ";
  white-space: pre;
}
ul.products li.product p.wc-gzd-additional-info:first-of-type{
  margin-top: 4px !important;
}

/* ============================================================
   42. Korrektur zu 41 - Hinweise sauber untereinander
   ============================================================ */

p.wc-gzd-additional-info{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #86868b !important;
}
p.wc-gzd-additional-info + p.wc-gzd-additional-info::before{ content: none !important; }
ul.products li.product p.wc-gzd-additional-info:first-of-type{ margin-top: 4px !important; }
ul.products li.product p.wc-gzd-additional-info:last-of-type{ margin-bottom: 12px !important; }

/* ============================================================
   43. Kopfzeile: Milchglas auf die Leiste statt auf den Rahmen
   Grund: backdrop-filter auf dem header erzeugt einen Containing
   Block. Die von Elementor fixiert positionierte Leiste rechnet
   ihr top dann relativ zum header statt zum Fenster und rutscht
   bei eingeblendeter Admin-Leiste 32 px nach unten aus dem
   Kopfbereich heraus.
   ============================================================ */

.elementor-location-header{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
}

.elementor-location-header > .e-con,
.elementor-location-header > .elementor-element{
  background: rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

/* ============================================================
   44. WooCommerce-Hinweise (19.08.2026)
   Die Hinweisbox lag auf der Produktseite neben der schwebenden
   Kategorienleiste und wuchs dadurch auf deren Hoehe an.
   Die Leiste wird jetzt nach den Hinweisen ausgegeben (Snippet 13,
   Prioritaet 20); hier bleibt nur die Breitenbegrenzung.
   ============================================================ */

.woocommerce-notices-wrapper{
  max-width: 1140px;
  margin: 0 auto 24px;
  padding: 0 30px;
  box-sizing: border-box;
}
body.post-type-archive-product .woocommerce-notices-wrapper,
body.tax-product_cat .woocommerce-notices-wrapper{
  max-width: none;
  margin: 0 0 20px;
  padding: 0;
}

/* 45. Kopfzeile ohne Glas-Falle
   backdrop-filter macht ein Element zum Bezugsrahmen fuer fest
   positionierte Kinder. Dadurch wurde der Seiten-Warenkorb auf
   Kopfzeilenhoehe zusammengeschnitten und war praktisch unsichtbar.
   Der Weichzeichner sitzt jetzt auf einer Hilfsebene ohne Kinder. */
.elementor-location-header .e-con,
.elementor-location-header .elementor-element{
	backdrop-filter:none !important;
	-webkit-backdrop-filter:none !important;
}
.elementor-location-header > .e-con,
.elementor-location-header > .elementor-element{
	background:transparent !important;
	position:relative;
	isolation:isolate;
	border-bottom:0 !important;
}
.elementor-location-header > .e-con::before,
.elementor-location-header > .elementor-element::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:rgba(255,255,255,.72);
	backdrop-filter:saturate(180%) blur(20px);
	-webkit-backdrop-filter:saturate(180%) blur(20px);
	border-bottom:1px solid rgba(0,0,0,.06);
	pointer-events:none;
}

/* 46. Ruhiges Scrollen auf dem Handy
   will-change laesst den Browser jedes Element dauerhaft auf einer eigenen
   Grafikebene halten. Auf Telefonen geht dabei der Grafikspeicher aus,
   Ebenen werden verworfen und neu gezeichnet - genau das sah beim Scrollen
   wie Flackern der Bilder aus. Nach der Einblendung geben wir die Ebene
   deshalb wieder frei. */
.np-reveal.np-in{will-change:auto}
.np-parallax{will-change:auto}

@media (max-width:1024px), (hover:none){
	.elementor-location-header > .e-con::before,
	.elementor-location-header > .elementor-element::before{
		backdrop-filter:none !important;
		-webkit-backdrop-filter:none !important;
		background:rgba(255,255,255,.97) !important;
	}
	.np-reveal{
		transform:none;
		transition:opacity .5s var(--np-ease);
	}
	.np-parallax{
		background-attachment:scroll !important;
		background-position:center !important;
	}
}

/* 47. Weniger Rechenarbeit fuer Telefone
   Schwebe-Effekte gibt es auf Touchgeraeten ohnehin nicht. Der leichte
   Graustich zwingt den Browser aber, jedes Bild durch einen Filter zu
   rechnen und als eigene Ebene vorzuhalten. Bei ueber dreissig Kacheln
   geht dem Telefon dabei der Grafikspeicher aus. */
@media (hover:none), (max-width:1024px){
	.elementor-widget-image img,
	.woocommerce ul.products li.product-category img,
	.woocommerce ul.products li.product img{
		filter:none !important;
		transition:none !important;
		transform:none !important;
	}
}

/* 48. iPhone: keine Bildschirmhoehe im Layout
   Auf dem iPhone klappt die Adressleiste beim Scrollen ein und wieder aus.
   Dadurch aendert sich 100vh mitten im Bildlauf, das Layout wird neu
   berechnet und die ganze Seite ruckelt. Die Einheit svh bezieht sich auf
   die kleine Ansicht und bleibt beim Scrollen konstant. */
@supports (height:100svh){
	main.content, .site-main{
		min-height:max(280px, calc(100svh - 480px));
	}
}
@media (hover:none){
	html{scroll-behavior:auto}
}

/* 49. Keine Einblendung auf Telefonen
   Jede Kachel wurde beim Hereinscrollen eingeblendet. Waehrend so einer
   Ueberblendung muss der Browser das Sechseck der Bilder neu freistellen -
   und zwar genau in dem Moment, in dem gescrollt wird. Auf Touchgeraeten
   ist die Einblendung deshalb komplett aus. */
@media (hover:none), (max-width:1024px){
	.np-reveal,
	.np-reveal.np-in{
		opacity:1 !important;
		transform:none !important;
		transition:none !important;
		will-change:auto !important;
	}
}

/* 51. Startseite: Produktkacheln brechen auf kleinen Schirmen um
   Das Raster stand fest auf vier Spalten. Auf einem 393 Pixel breiten
   Bildschirm blieben davon 64 Pixel je Kachel - die Titel liefen
   ineinander und die Knoepfe wurden zu schwarzen Kreisen. */
@media (max-width:1024px){
	.elementor-element-ff2e131{
		grid-template-columns:repeat(3, minmax(0,1fr)) !important;
	}
}
@media (max-width:767px){
	.elementor-element-ff2e131{
		grid-template-columns:repeat(2, minmax(0,1fr)) !important;
	}
	[data-id="ff2e131"] > .e-con .elementor-widget-heading{
		min-height:2.8em !important;
	}
	[data-id="ff2e131"] .elementor-button{
		width:100% !important;
		min-width:0 !important;
	}
}

/* 52. 404: erster Knopf war schwarz auf schwarz
   Der Hauptknopf hat einen dunklen Hintergrund, die Schrift stand aber
   ebenfalls auf Dunkel und war dadurch unsichtbar. */
.np-404-links a:first-child,
.np-404-links .elementor-button:first-child{
	color:#fff !important;
}
.np-404-links a:first-child:hover,
.np-404-links .elementor-button:first-child:hover{
	color:#fff !important;
	opacity:.88;
}

/* 53. Handy und Tablet: Menue ohne Klappfenster
   Bisher oeffnete der Hamburger-Knopf ein Fenster ueber der ganzen Seite.
   Stattdessen stehen die fuenf Menuepunkte jetzt direkt unter dem Logo. */
@media (min-width:768px) and (max-width:1024px){
	.elementor-location-header .elementskit-menu-hamburger,
	.elementor-location-header .elementskit-menu-close{display:none !important}

	.elementor-location-header .elementskit-menu-container{
		position:static !important; transform:none !important;
		width:auto !important; max-width:none !important; height:auto !important;
		background:none !important; box-shadow:none !important; border:0 !important;
		padding:0 !important; overflow:visible !important;
		opacity:1 !important; visibility:visible !important; display:block !important;
	}

	.elementor-location-header .e-con:has(.elementor-widget-ekit-nav-menu),
	.elementor-location-header .elementor-element-43960b0{
		flex:1 0 100% !important; width:100% !important; max-width:none !important; order:5;
	}

	.elementor-location-header .e-con-inner,
	.elementor-location-header > .e-con{
		flex-wrap:wrap !important; justify-content:space-between !important;
		align-items:center !important; row-gap:2px !important;
		padding-top:8px !important; padding-bottom:6px !important;
	}

	.elementor-location-header .elementor-widget-ekit-nav-menu{margin:0 !important}

	.elementor-location-header ul.elementskit-navbar-nav{
		display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
		justify-content:center !important; align-items:center !important;
		gap:0 16px !important; width:100% !important; margin:0 !important; padding:0 !important;
	}
	.elementor-location-header ul.elementskit-navbar-nav > li{
		width:auto !important; flex:0 0 auto !important; border:0 !important;
	}
	.elementor-location-header ul.elementskit-navbar-nav > li > a.ekit-menu-nav-link{
		padding:5px 0 !important; font-size:15px !important;
		white-space:nowrap; justify-content:center !important;
	}
}

/* 54. Klappmenue in jeder Breite aus
   Abschnitt 53 greift erst ab 1024 Pixel abwaerts. Wer den Browser
   vergroessert darstellt (Zoom), landet aber schon bei breiterem Fenster
   in der Tablet-Ansicht. Deshalb hier ohne Breitengrenze. */
@media (min-width:768px){
.elementskit-menu-hamburger,
.elementskit-menu-close,
.elementskit-menu-overlay{
	display:none !important;
}
.elementor-location-header .elementskit-menu-container{
	position:static !important;
	transform:none !important;
	height:auto !important;
	background:none !important;
	box-shadow:none !important;
	opacity:1 !important;
	visibility:visible !important;
}
}

/* 55. Mega-Menue unter "What we do" entfernen
   Beim Ueberfahren des Menuepunktes klappte ein Feld mit elf Unterpunkten
   ueber die Seite. Der Menuepunkt fuehrt jetzt direkt auf die Seite. */
.elementskit-megamenu-panel,
.elementskit-megamenu-panel-inner,
.elementskit-submenu-panel{
	display:none !important;
	visibility:hidden !important;
	opacity:0 !important;
	pointer-events:none !important;
}
.elementskit-navbar-nav .elementskit-submenu-indicator{
	display:none !important;
}

/* 56. Telefonnummer in der Kopfzeile
   Bei Mietanfragen wird angerufen. Die Nummer stand bisher nur in der
   Fusszeile. Auf dem Handy ist sie ein Anruflink. */
.elementor-location-header .e-con:has(.np-tel){
	flex-direction:row !important;
	align-items:center !important;
	justify-content:flex-end !important;
	gap:16px !important;
	flex-wrap:nowrap !important;
}
.np-tel{margin:0 !important; width:auto !important}
.np-tel p{margin:0 !important}
.np-tel a{
	color:var(--np-ink) !important;
	font-weight:600;
	font-size:15px;
	letter-spacing:.01em;
	text-decoration:none !important;
	white-space:nowrap;
}
.np-tel a:hover{opacity:.65}
@media (max-width:600px){
	.np-tel a{font-size:13px}
}

/* 57. Telefonnummer auf dem Handy
   Der Container hatte eine feste Breite aus den Handy-Einstellungen,
   dadurch lief die Nummer unter das Warenkorb-Symbol. */
@media (max-width:1024px){
	.elementor-location-header .e-con:has(.np-tel){
		width:auto !important;
		max-width:none !important;
		flex:0 1 auto !important;
		gap:10px !important;
		padding-right:0 !important;
	}
	.np-tel a{font-size:13px !important}
}

/* 58. Referenzen: groessere Bilder */
.elementor-element-447cf77 .e-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important}
.elementor-element-447cf77 .e-gallery-item{max-width:none!important}
@media (max-width:767px){.elementor-element-447cf77 .e-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}}

/* 59. Referenzen: Projektliste */
.np-refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px;text-align:left}
.np-ref{background:#fff;border-radius:14px;padding:28px 30px;box-shadow:0 2px 18px rgba(0,0,0,.07)}
.np-ref h3{font-size:1.15rem;line-height:1.3;margin:0 0 6px;color:#1a1a1a}
.np-ref-kunde{margin:0 0 12px;font-size:.92rem;font-weight:600;color:#6b6b6b;letter-spacing:.02em}
.np-ref-text{margin:0;font-size:.97rem;line-height:1.55;color:#5a5a5a}
@media (max-width:767px){.np-refs{grid-template-columns:1fr;gap:16px;margin-top:32px}.np-ref{padding:22px}}

/* 60. Referenzen mit Bild */
.np-ref{padding:0!important;overflow:hidden;display:flex;flex-direction:column}
.np-ref .np-ref-bild{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.np-ref-inhalt{padding:24px 28px 28px}
.np-refs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.np-ref-weitere{margin:32px auto 0;max-width:900px;text-align:center;font-size:.94rem;line-height:1.6;color:#6b6b6b}
@media (max-width:1024px){.np-refs{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:767px){.np-refs{grid-template-columns:1fr!important}.np-ref-inhalt{padding:20px 22px 24px}}

/* 61. Produktraster: leere dritte Zeile weg */
.elementor-element-ff2e131{grid-template-rows:none!important;grid-auto-rows:auto!important}

/* 62. Handy: Feinschliff Shop und Referenzen */
@media (max-width:767px){
body.woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
body.woocommerce ul.products li.product{width:auto!important;margin:0!important}
body.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:.92rem!important;line-height:1.3!important}
body.woocommerce ul.products li.product .button,body.woocommerce ul.products li.product .np-zeitraum{font-size:.82rem!important;padding-left:10px!important;padding-right:10px!important;white-space:normal!important}
.np-ref .np-ref-bild{aspect-ratio:16/9!important}
.np-ref-inhalt{padding:16px 18px 20px!important}
.np-ref h3{font-size:1.05rem!important}
}

/* 63. Handy: Kopfzeile mit Klappmenue in einer Zeile */
@media (max-width:767px){
.elementor-location-header .elementor-element-af3b893 .e-con-inner{flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:6px!important}
.elementor-location-header .elementor-element-9202e95,
.elementor-location-header .elementor-element-43960b0,
.elementor-location-header .elementor-element-ea91bb4{width:auto!important;flex:0 1 auto!important;padding-left:0!important;padding-right:0!important}
.elementor-location-header .elementor-element-ea91bb4{gap:6px!important}
.elementor-location-header .elementor-element-43960b0{order:3!important}
.elementor-location-header .elementor-element-ea91bb4{order:2!important}
.elementor-location-header .np-tel a{font-size:.84rem!important;white-space:nowrap}
}

/* 64. Handy: Kopfzeile Feinabstand */
@media (max-width:767px){
.elementor-location-header .elementor-element-af3b893 .e-con-inner{gap:10px!important;padding-right:14px!important}
.elementor-location-header .elementor-element-faf3da8 img{max-width:78px!important;height:auto!important}
.elementor-location-header .np-tel a{font-size:.78rem!important}
.elementor-location-header .elementor-element-7cf68ce{margin-right:4px!important}
.elementor-location-header .elementskit-menu-hamburger{margin:0!important}
}

/* 65. Anfahrt statt eingebetteter Karte */
.np-anfahrt{text-align:center;padding:8px 0 4px}
.np-anfahrt h3{font-size:1.5rem;margin:0 0 14px}
.np-anfahrt-adresse{margin:0 0 20px;line-height:1.7;color:#4a4a4a}
.np-anfahrt-knopf{display:inline-block;background:#1a1a1a;color:#fff!important;text-decoration:none;padding:13px 26px;border-radius:40px;font-size:.95rem}
.np-anfahrt-knopf:hover{background:#000}
.np-anfahrt-hinweis{margin:16px 0 0;font-size:.82rem;color:#8a8a8a}

/* 66. Handy: Abschnittsueberschriften kleiner */
@media (max-width:767px){
[data-id="231ca60"] [data-id="d219c29"] .elementor-heading-title,
[data-id="6f6fc7a"] [data-id="e8001c1"] .elementor-heading-title{font-size:20px!important;line-height:1.3!important}
}
/* 67. Link unter dem Produktraster */
.np-alle-kat{grid-column:1/-1;text-align:center;margin:24px 0 0}
.np-alle-kat a{display:inline-block;font-weight:600;text-decoration:underline;color:#111}
/* 68. Handy: What we do zweispaltig wie die Produktkacheln */
@media (max-width:767px){
[data-id="231ca60"] .elementor-element-c29d983{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:auto!important;gap:14px!important;align-items:stretch!important}
[data-id="231ca60"] .elementor-element-c29d983 > .e-con{width:auto!important;max-width:none!important;margin:0!important;padding:12px 10px 18px!important}
[data-id="231ca60"] .elementor-element-c29d983 .e-con{row-gap:10px!important}
[data-id="231ca60"] .elementor-element-c29d983 .elementor-widget-heading .elementor-heading-title{font-size:15px!important;line-height:1.25!important}
[data-id="231ca60"] .elementor-element-c29d983 .elementor-widget-text-editor{font-size:.78rem!important;line-height:1.45!important}
}
/* 69. Handy: Warenkorb und Klappmenue rechts gruppieren */
@media (max-width:767px){
.elementor-location-header .elementor-element-af3b893 .e-con-inner{justify-content:flex-start!important;gap:0!important}
.elementor-location-header .elementor-element-9202e95{order:1!important;margin-right:auto!important}
.elementor-location-header .elementor-element-ea91bb4{order:2!important;margin-right:14px!important}
.elementor-location-header .elementor-element-43960b0{order:3!important}
}
/* 70. Hero mit Standbild, Ueberschrift und Buttons */
.elementor-element-56c8976,.elementor-element-6078827,.elementor-element-7dbfcc2{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
.elementor-element-56c8976,.elementor-element-6078827{padding-top:0!important;padding-bottom:0!important}
.elementor-element-7dbfcc2{position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(rgba(0,0,0,.42),rgba(0,0,0,.58)),url('https://www.native-project.de/wp-content/uploads/2026/08/native-project-hero-1024x1440-1.webp');background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:0!important;overflow:hidden}
.np-hero-inhalt{max-width:880px;margin:0 auto;text-align:center;padding:48px 24px}
.np-hero-inhalt h1{color:#fff!important;font-size:clamp(30px,4.2vw,56px);line-height:1.1;font-weight:600;margin:0 0 18px;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.np-hero-sub{color:rgba(255,255,255,.93)!important;font-size:clamp(16px,1.45vw,20px);line-height:1.55;margin:0 auto 32px;max-width:660px;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.np-hero-knoepfe{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.np-btn{display:inline-block;padding:15px 32px;border-radius:999px;text-decoration:none;font-weight:600;font-size:1rem;line-height:1;transition:transform .25s ease,background .25s ease}
.np-btn-hell{background:#fff;color:#111}
.np-btn-hell:hover{background:#ededed;transform:translateY(-2px);color:#111}
.np-btn-linie{border:1.5px solid rgba(255,255,255,.8);color:#fff}
.np-btn-linie:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);color:#fff}
@media (max-width:767px){.elementor-element-7dbfcc2{min-height:70vh}.np-hero-knoepfe{flex-direction:column}.np-btn{width:100%}.np-hero-inhalt{padding:36px 18px}}
/* 71. Argumente-Leiste */
.np-argumente-sektion{padding-top:0!important;padding-bottom:0!important;background:#fff}
.np-argumente{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.np-argumente li{padding:26px 22px;border-right:1px solid rgba(0,0,0,.08);text-align:center}
.np-argumente li:last-child{border-right:0}
.np-argumente strong{display:block;font-size:1rem;font-weight:600;color:#111;margin-bottom:5px}
.np-argumente span{display:block;font-size:.85rem;line-height:1.45;color:#6b6b6b}
@media (max-width:900px){.np-argumente{grid-template-columns:repeat(2,minmax(0,1fr))}.np-argumente li:nth-child(2n){border-right:0}.np-argumente li:nth-child(-n+2){border-bottom:1px solid rgba(0,0,0,.08)}}
@media (max-width:520px){.np-argumente li{padding:18px 14px}.np-argumente span{font-size:.8rem}}
/* 72. Videosektion */
.np-videosektion{padding-top:34px!important}
/* 73. Hero volle Breite */
.elementor-element-56c8976 > .e-con-inner,.elementor-element-6078827 > .e-con-inner,.elementor-element-7dbfcc2 > .e-con-inner{max-width:none!important;width:100%!important;padding-left:0!important;padding-right:0!important}
.elementor-element-7dbfcc2 > .e-con-inner{display:flex;align-items:center;justify-content:center;min-height:inherit}
/* 74. Videosektion Format */
.np-videosektion .elementor-widget-video .elementor-wrapper{aspect-ratio:16/9;border-radius:14px;overflow:hidden}
.np-videosektion .elementor-widget-video video{width:100%;height:100%;object-fit:cover}
/* 75. Shop: Preisangaben und Hinweise */
.np-preis-info{margin:6px 0 0;font-size:.82rem;line-height:1.5;color:#6b6b6b}
.np-preis-info a{color:#6b6b6b;text-decoration:underline}
.np-miethinweis{margin:0 0 16px;padding:12px 14px;background:#f6f6f6;border-radius:10px;font-size:.82rem;line-height:1.5;color:#4a4a4a}
.np-lieferhinweis{margin:8px 0 0;font-size:.8rem;line-height:1.5;color:#6b6b6b}
/* 76. Anfrageblock */
.np-anfrage-sektion{background:#111;padding-top:0!important;padding-bottom:0!important}
.np-anfrage{text-align:center;padding:60px 20px;max-width:720px;margin:0 auto}
.np-anfrage h2{color:#fff!important;font-size:clamp(24px,2.6vw,34px);line-height:1.15;margin:0 0 12px;font-weight:600}
.np-anfrage p{color:rgba(255,255,255,.8)!important;font-size:1rem;line-height:1.6;margin:0 auto 28px;max-width:560px}
.np-anfrage-knoepfe{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.np-btn-dunkel{background:#fff;color:#111}
.np-btn-dunkel:hover{background:#e8e8e8;color:#111}
.np-btn-rand{border:1.5px solid rgba(255,255,255,.75);color:#fff}
.np-btn-rand:hover{background:rgba(255,255,255,.15);color:#fff}
@media (max-width:767px){.np-anfrage{padding:44px 18px}.np-anfrage-knoepfe{flex-direction:column}.np-anfrage-knoepfe .np-btn{width:100%}}
/* 77. Anruf-Button am Handy */
.np-anruf{display:none}
@media (max-width:767px){
.elementor-location-header .elementor-element-ea91bb4{display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;width:auto!important;flex:0 0 auto!important}
.elementor-location-header .elementor-element-ea91bb4 > *{width:auto!important;flex:0 0 auto!important;margin:0!important}
.np-anruf{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid rgba(0,0,0,.14);color:#111;text-decoration:none}
.np-anruf:hover{background:#111;color:#fff;border-color:#111}
}
/* 82. Argumente auf der Produktseite */
.np-argumente-produkt{margin:20px 0 0!important;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);grid-template-columns:repeat(4,minmax(0,1fr))}
.np-argumente-produkt li{padding:14px 8px!important}
.np-argumente-produkt strong{font-size:.82rem!important;font-weight:600!important;margin:0!important}
@media (max-width:600px){.np-argumente-produkt{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 83. Produktseite: Teilen */
.elementor-element-2c318ae{display:none!important}
.np-teilen{margin:14px 0 0;font-size:.82rem;color:#6b6b6b}
.np-teilen a{color:#111;text-decoration:underline}
/* 84. Einblendungen kuerzen */
.np-reveal{transition-duration:.22s!important;transition-delay:0s!important}
@media (prefers-reduced-motion:reduce){.np-reveal{opacity:1!important;transform:none!important;transition:none!important}}
@media (max-width:767px){.np-reveal{opacity:1!important;transform:none!important;transition:none!important}}
/* 85. Feinschliff Kacheln und Argumente */
.np-argumente li{padding:20px 18px}
.np-argumente strong{margin-bottom:0}
[data-id="231ca60"] .elementor-element-c29d983 .elementor-widget-text-editor{font-size:.8rem!important;line-height:1.5!important}
@media (max-width:767px){
[data-id="231ca60"] .elementor-element-c29d983 .elementor-widget-text-editor,[data-id="231ca60"] .elementor-element-c29d983 .elementor-widget-text-editor p{font-size:.72rem!important;line-height:1.45!important}
[data-id="231ca60"] .elementor-element-c29d983 .elementor-widget-heading .elementor-heading-title{font-size:14px!important}
.np-argumente li{padding:16px 12px}
}
/* 86. Kacheln als Klickflaeche */
.np-klickkachel{position:relative;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.np-klickkachel:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.09)}
.np-kachel-link{position:absolute;inset:0;z-index:5;display:block;border-radius:inherit}
.np-klickkachel .elementor-widget-html:has(.np-kachel-link){position:static}
.np-klickkachel .elementor-widget-image,.np-klickkachel .elementor-widget-heading,.np-klickkachel .elementor-widget-text-editor{position:relative;z-index:1}
.np-kachel-link:focus-visible{outline:2px solid #111;outline-offset:3px}
/* 86. Kacheln als Klickflaeche */
.np-klickkachel{position:relative;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.np-klickkachel:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.09)}
.np-kachel-link{position:absolute;inset:0;z-index:5;display:block;border-radius:inherit}
.np-klickkachel .elementor-widget-html:has(.np-kachel-link){position:static}
.np-klickkachel .elementor-widget-image,.np-klickkachel .elementor-widget-heading,.np-klickkachel .elementor-widget-text-editor{position:relative;z-index:1}
.np-kachel-link:focus-visible{outline:2px solid #111;outline-offset:3px}
/* 87. Referenz-Unterzeile */
.np-ref-unterzeile{text-align:center;color:#6b6b6b;font-size:1rem;line-height:1.6;margin:0 auto 6px;max-width:620px}
@media (max-width:767px){.np-ref-unterzeile{font-size:.86rem}}
/* 88. Referenzseite mit Bilderkarussell */
.np-projekte{max-width:1100px;margin:0 auto;padding:8px 0 40px}
.np-projekt{margin:0 0 64px}
.np-projekt h2{font-size:clamp(22px,2.2vw,30px);line-height:1.15;margin:0 0 6px;font-weight:600}
.np-projekt-ort{margin:0 0 10px;color:#6b6b6b;font-size:.92rem}
.np-projekt-text{margin:0 0 20px;max-width:720px;line-height:1.65}
.np-slider{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.np-slider::-webkit-scrollbar{height:6px}
.np-slider::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:99px}
.np-slide{flex:0 0 min(78%,560px);scroll-snap-align:center}
.np-slide img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.np-slider-nav{display:flex;gap:10px;margin-top:14px}
.np-slider-nav button{width:42px;height:42px;border-radius:999px;border:1px solid rgba(0,0,0,.16);background:#fff;color:#111;font-size:18px;line-height:1;cursor:pointer;transition:background .2s ease}
.np-slider-nav button:hover{background:#111;color:#fff;border-color:#111}
@media (max-width:767px){.np-projekt{margin-bottom:44px}.np-slide{flex:0 0 88%}.np-slider-nav{display:none}}

/* 89. Seitentitel: Abstand zum Header */
.page-header{padding-top:28px}
.admin-bar .page-header{padding-top:62px}

/* 90. Produkte ohne Preis: Anfrage statt leerem Preis */
body.np-ohne-preis .elementor-element-bc89277,
body.np-ohne-preis .elementor-element-8b7d90d,
body.np-ohne-preis .elementor-element-5e79170,
body.np-ohne-preis .elementor-element-a46e300,
body.np-ohne-preis .elementor-element-c7e877a{display:none!important}
body.np-ohne-preis .np-preis-info{display:none!important}
body.np-ohne-preis .np-miethinweis{display:none!important}
.np-preis-anfrage{margin:0 0 4px}
.np-anfrage-preis{font-size:1.3rem;font-weight:600;margin:0 0 6px;color:#111}
.np-anfrage-text{font-size:.92rem;line-height:1.5;color:#555;margin:0 0 16px;max-width:48ch}
a.np-btn-anfrage{display:inline-block;padding:12px 26px;border-radius:999px;background:#111;color:#fff!important;font-weight:600;text-decoration:none;font-size:.95rem}
a.np-btn-anfrage:hover{background:#333}
.np-anfrage-preis-klein{display:block;font-size:.85rem;color:#666;margin-top:6px}

/* ==========================================================================
   NATIVE PROJECT — Korrekturen aus dem UX-Review vom 21.08.2026
   Ergaenzt das bestehende Design-System.
   Zum Zuruecknehmen: alles ab dieser Zeile bis REVIEW-KORREKTUREN ENDE loeschen.
   ========================================================================== */
/* REVIEW-KORREKTUREN START */

/* --- 01 | Kontaktformular: Labels waren weiss auf hellem Grund --------- */
.elementor-widget-form .elementor-field-label{
  color:var(--np-ink)!important;
  font-size:13px!important;
  font-weight:500!important;
  letter-spacing:-.01em!important;
  line-height:1.3!important;
  margin-bottom:6px!important;
  opacity:1!important;
  visibility:visible!important;
}
.elementor-widget-form .elementor-field-textual::placeholder{color:#a1a1a6!important;opacity:1}
.elementor-widget-form .elementor-field-textual:focus{
  outline:2px solid var(--np-ink);outline-offset:1px;border-color:transparent!important;
}

/* --- 02 | Honeypot war fuer Nutzer sichtbar ---------------------------- */
.elementor-field-group-np_hp{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
}

/* --- 03 | Sticky-Header hatte keinen Hintergrund ----------------------- */
header.elementor-location-header .elementor-sticky{
  background:rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.09);
  transition:padding .25s var(--np-ease);
}
header.elementor-location-header .elementor-sticky--active{
  padding-top:10px!important;
  padding-bottom:10px!important;
}
@supports not (backdrop-filter:blur(2px)){
  header.elementor-location-header .elementor-sticky{background:#fff!important}
}

/* --- 04 | Produkttitel waren 40px und liefen aus der Kachel ------------ */
ul.products li.product .woocommerce-loop-product__title{
  font-size:17px!important;
  line-height:1.35!important;
  font-weight:600!important;
  letter-spacing:-.01em!important;
  margin:14px 0 6px!important;
  overflow-wrap:anywhere;
  hyphens:auto;
}
ul.products li.product .price,
ul.products li.product .price .woocommerce-Price-amount{
  font-size:17px!important;
  font-weight:600!important;
  line-height:1.4!important;
  color:var(--np-ink)!important;
}

/* --- 05 | Shop-Raster: Buttons auf einer Linie ------------------------- */
ul.products li.product{display:flex!important;flex-direction:column}
ul.products li.product .button,
ul.products li.product .added_to_cart{margin-top:auto!important}

/* --- 06 | Pink #cc3366 gehoert nicht zur Marke ------------------------- */
.entry-summary a:not(.button):not(.elementor-button),
.woocommerce-product-details__short-description a,
.elementor-widget-form a,
.elementor-field-option a,
.np-versandhinweis a{
  color:var(--np-ink)!important;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.np-shopnav a{color:var(--np-ink)!important;text-decoration:none!important}
.woocommerce-breadcrumb,.woocommerce-breadcrumb a{color:var(--np-muted)!important}

/* --- 07 | Mietshop-Suche als ein Element, schwarzer Pill-Button -------- */
form.np-suche{display:flex!important;gap:10px;align-items:center;max-width:560px}
form.np-suche input{
  flex:1 1 auto;
  height:44px;
  border-radius:999px!important;
  border:1px solid var(--np-line)!important;
  padding:0 18px!important;
  font-size:15px!important;
  background:#fff;
}
form.np-suche input:focus{outline:2px solid var(--np-ink);outline-offset:1px;border-color:transparent!important}
form.np-suche button{
  flex:0 0 auto;
  height:44px;
  padding:0 24px!important;
  border-radius:999px!important;
  border:1px solid var(--np-ink)!important;
  background:var(--np-ink)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:600!important;
  cursor:pointer;
  transition:transform .25s var(--np-ease),background .25s var(--np-ease);
}
form.np-suche button:hover{background:#000!important;transform:translateY(-1px)}

/* --- 08 | Sortierung optisch gleich wie das Suchfeld ------------------- */
.woocommerce-ordering{position:relative;display:inline-block}
.woocommerce-ordering select{
  height:44px;
  border-radius:999px!important;
  border:1px solid var(--np-line)!important;
  padding:0 44px 0 18px!important;
  font-size:15px!important;
  background-color:#fff!important;
  color:var(--np-ink)!important;
  appearance:none;
  -webkit-appearance:none;
}
.woocommerce-ordering::after{
  content:"";
  position:absolute;
  right:19px;
  top:50%;
  width:7px;
  height:7px;
  border-right:1.6px solid var(--np-ink);
  border-bottom:1.6px solid var(--np-ink);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}

/* --- 09 | Hexagon-Masken raus, einheitliches 4:3-Bildformat ------------ */
:root{--np-hex:none}
html body .np-klickkachel .elementor-widget-image img,
html body .woocommerce ul.products li.product-category img,
html body ul.products li.product img{
  clip-path:none!important;
  -webkit-clip-path:none!important;
}
html body .np-klickkachel .elementor-widget-image img,
html body .woocommerce ul.products li.product-category img{
  display:block;
  width:100%!important;
  height:auto!important;
  aspect-ratio:4 / 3!important;
  object-fit:cover!important;
  border-radius:12px!important;
  filter:none!important;
}
html body .woocommerce ul.products li.product-category:hover img{
  transform:scale(1.03);
}

/* --- 10 | Kacheltexte linksbuendig wie bei den Referenzen -------------- */
.np-klickkachel .elementor-widget-heading .elementor-heading-title,
.np-klickkachel .elementor-widget-text-editor,
.np-klickkachel .elementor-widget-text-editor p{
  text-align:left!important;
}
li.product-category .woocommerce-loop-category__title{
  text-align:left!important;
  font-size:17px!important;
  font-weight:600!important;
  line-height:1.35!important;
  letter-spacing:-.01em!important;
}

/* --- 11 | Grau-Leiter: zwei fast identische Toene vereinheitlicht ------ */
.elementor-element-56c8976,
.elementor-element-231ca60,
.elementor-element-6f6fc7a{background-color:#f5f5f7!important}

/* --- 12 | Footer und CTA-Band auf einen Ton ---------------------------- */
footer.elementor-location-footer{background-color:#111!important}

/* --- 13 | Produktseite: Hinweis statt stummem grauen Button ------------ */
form.cart:has(.date-selection-needed)::after{
  content:"Bitte zuerst den Mietzeitraum wählen.";
  display:block;
  margin-top:10px;
  font-size:14px;
  line-height:1.5;
  color:var(--np-muted);
}

/* --- 14 | Produktseite: kein Leerraum unter der Kategorie-Spalte ------- */
body.single-product main.site-main{align-items:start}

/* --- 15 | Shop-Sidebar: Unterkategorien und Zaehler lesbar ------------- */
.np-shopnav__liste li:not(.np-shopnav__eltern):not(.np-shopnav__alle) a{padding-left:16px!important}
.np-shopnav__zahl{color:#6e6e73!important;font-variant-numeric:tabular-nums}

/* --- 16 | Mobil: feste Hoehen aufloesen, Kacheln einspaltig ------------ */
@media (max-width:600px){
  .np-klickkachel{
    width:100%!important;
    flex-basis:100%!important;
    height:auto!important;
    min-height:0!important;
  }
  .np-klickkachel .elementor-widget-image img{aspect-ratio:16 / 10}
  ul.products.columns-4,ul.products.columns-3,ul.products.columns-2{
    grid-template-columns:1fr!important;
  }
  form.np-suche{flex-wrap:wrap}
  form.np-suche input,form.np-suche button{width:100%;flex:1 1 100%}
}

/* --- 17 | Sichtbarer Tastatur-Fokus ------------------------------------ */
a:focus-visible,button:focus-visible,select:focus-visible,
.elementor-button:focus-visible{
  outline:2px solid var(--np-ink);
  outline-offset:3px;
  border-radius:4px;
}

/* --- 18 | Kacheltexte konsequent linksbuendig -------------------------- */
.np-klickkachel .elementor-widget-heading,
.np-klickkachel .elementor-widget-text-editor,
.np-klickkachel .elementor-widget-container{text-align:left!important}
html body .woocommerce ul.products li.product-category{text-align:left!important}
html body .woocommerce ul.products li.product-category h2,
html body .woocommerce ul.products li.product-category .woocommerce-loop-category__title{
  text-align:left!important;
  font-size:17px!important;
  font-weight:600!important;
  line-height:1.35!important;
  letter-spacing:-.01em!important;
}

/* --- 19 | Ruhiger Platzhalter, solange ein Bild nachlaedt -------------- */
.np-klickkachel .elementor-widget-image img,
.woocommerce ul.products li.product-category img{background-color:#f0f0f2}

/* --- 20 | Sektion Wer ist Native Project ohne Ballon-Hintergrund ------- */
.elementor-element-a528549{
  background-image:none!important;
  background-color:#f5f5f7!important;
}

/* --- 21 | Restliche pinke Links auf Markenfarbe ------------------------ */
body.single-product p a,
main.site-main p a,
.woocommerce-product-details__short-description a,
.elementor-widget-form a,
.elementor-field-option a,
.elementor-field-type-acceptance a{
  color:var(--np-ink)!important;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* --- 22 | Warenkorb-Button erklaert, warum er noch nicht aktiv ist ----- */
form.cart:has(.date-selection-needed)::after{
  content:"Bitte zuerst den Mietzeitraum wählen."!important;
  display:block!important;
  margin-top:12px;
  font-size:14px;
  line-height:1.5;
  color:var(--np-muted);
  clear:both;
}
.single_add_to_cart_button.date-selection-needed{opacity:.6!important}

/* --- 23 | Auswahlfeld auf gleiche Hoehe wie die Eingabefelder ---------- */
.elementor-widget-form select.elementor-field-textual{
  height:52px!important;
  padding:0 16px!important;
  border-radius:12px!important;
}

/* --- 24 | Kachel-Ueberschriften auf volle Breite und linksbuendig ------ */
.np-klickkachel .elementor-widget-heading,
.np-klickkachel .elementor-widget-heading .elementor-widget-container,
.np-klickkachel .elementor-widget-heading .elementor-heading-title,
.np-klickkachel .elementor-widget-text-editor,
.np-klickkachel .elementor-widget-text-editor .elementor-widget-container{
  width:100%!important;
  align-self:stretch!important;
  align-items:flex-start!important;
  text-align:left!important;
}

/* --- 25 | Inline-Links bleiben als Links erkennbar --------------------- */
body.single-product p a,
main.site-main p a,
.woocommerce-product-details__short-description a,
.elementor-widget-form a,
.elementor-field-option a{
  text-decoration:underline!important;
  text-underline-offset:3px;
}

/* --- 26 | Mobil: Leistungskacheln einspaltig, sonst zu schmal --------- */
@media (max-width:600px){
  .elementor-element-231ca60 .e-con:has(> .np-klickkachel){
    grid-template-columns:1fr!important;
  }
}

/* --- 27 | Header und Footer in derselben Schrift wie der Inhalt ------- */
.elementor-location-header *:not(i):not(svg):not(path):not([class*="eicon"]):not([class*="fa-"]):not(.dashicons),
.elementor-location-footer *:not(i):not(svg):not(path):not([class*="eicon"]):not([class*="fa-"]):not(.dashicons){
  font-family:var(--np-font)!important;
}

/* --- 28 | Gesamtpreis benennen und sichtbar machen --------------------- */
html body .booking_details,
html body .booking_details p{
  margin:16px 0 0!important;
  font-size:14px!important;
  color:var(--np-muted)!important;
}
html body p.booking_price{margin:6px 0 18px!important}
html body p.booking_price:not(:empty)::before{
  content:"Gesamtpreis";
  display:block;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--np-muted);
  margin-bottom:4px;
}
html body p.booking_price .price,
html body p.booking_price .woocommerce-Price-amount,
html body p.booking_price bdi,
html body p.booking_price span{
  font-size:26px!important;
  font-weight:600!important;
  line-height:1.15!important;
  letter-spacing:-.02em!important;
  color:var(--np-ink)!important;
}

/* --- 29 | Zuruecksetzen-Link in Markenfarbe --------------------------- */
html body a.reset_dates{
  color:var(--np-ink)!important;
  font-size:14px!important;
  text-decoration:underline!important;
  text-underline-offset:3px;
}

/* --- 30 | Block-Warenkorb: leerer Zustand ruhiger -------------------- */
.wp-block-woocommerce-empty-cart-block h2:first-of-type::before{
  width:88px!important;
  height:88px!important;
  opacity:.45;
}
.wp-block-woocommerce-empty-cart-block h2{
  font-size:28px!important;
  line-height:1.2!important;
  letter-spacing:-.02em!important;
}
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator{
  margin:40px 0!important;
  height:1px!important;
  background:var(--np-line)!important;
  border:0!important;
}

/* --- 31 | Block-Produktkacheln an das Raster angleichen -------------- */
html body li.wc-block-grid__product{text-align:left!important}
html body li.wc-block-grid__product img{
  border-radius:12px!important;
  background-color:#f0f0f2;
}
html body .wc-block-grid__product-title{
  font-size:17px!important;
  font-weight:600!important;
  line-height:1.35!important;
  letter-spacing:-.01em!important;
  text-decoration:none!important;
}
html body .wc-block-grid__product-title a{text-decoration:none!important;color:var(--np-ink)!important}
html body .wc-block-grid__product-price{
  font-size:17px!important;
  font-weight:600!important;
  color:var(--np-ink)!important;
}

/* --- 32 | Kritisch: Button-Text war fast unsichtbar ------------------ */
html body li.wc-block-grid__product .wp-block-button__link,
html body .wc-block-components-button:not(.is-link){
  background-color:var(--np-ink)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:600!important;
  padding:12px 24px!important;
  border:0!important;
  transition:transform .25s var(--np-ease),background-color .25s var(--np-ease);
}
html body li.wc-block-grid__product .wp-block-button__link:hover,
html body .wc-block-components-button:not(.is-link):hover{
  background-color:#000!important;
  transform:translateY(-1px);
}

/* --- 33 | Block-Kacheln: Titel ohne Unterstreichung, Buttons buendig -- */
html body a.wc-block-grid__product-link,
html body a.wc-block-grid__product-link:hover{text-decoration:none!important}
html body li.wc-block-grid__product{
  display:flex!important;
  flex-direction:column;
}
html body li.wc-block-grid__product .wp-block-button{
  margin-top:auto!important;
  padding-top:10px;
}
html body li.wc-block-grid__product .wc-gzd-additional-info{
  font-size:13px!important;
  line-height:1.45!important;
  color:var(--np-muted)!important;
  margin:2px 0!important;
}

/* --- 34 | Lesbare Zeilenlaenge in langen Textstrecken ---------------- */
/* Der Fliesstext auf den Produktseiten lief ueber 1140 px, das sind rund   */
/* 134 Zeichen pro Zeile. Angenehm lesbar sind 65 bis 75.                   */
.elementor-widget-woocommerce-product-content p,
.elementor-widget-woocommerce-product-content li,
.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li{
  max-width:58ch;
}
.elementor-widget-woocommerce-product-content h2,
.elementor-widget-woocommerce-product-content h3,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3{
  max-width:30ch;
  text-wrap:balance;
}

/* REVIEW-KORREKTUREN ENDE */

/* ==========================================================================
   33. DESIGNSYSTEM-KONSOLIDIERUNG
   Eingespielt am 21.08.2026 nach dem Waechter-Audit.
   Letzte Sektion im Additional CSS, hat damit das letzte Wort.
   Zum Zuruecknehmen: nur diesen Block loeschen, sonst nichts.
   Ersetzt inhaltlich Abschnitt 14, 15, 17, 18, 28 und Teile von 12 und 30.

   Hinweis zu den Selektoren: .woocommerce und .single-product sitzen auf
   dem body-Element selbst, nicht darunter. Deshalb ueberall body.woocommerce
   oder gar kein Kontext, nie "body .woocommerce".
   ========================================================================== */

:root{
  --np-oct:14px;
  --np-oct-xs:5px;
  --np-hex:polygon(
    var(--np-oct) 0, calc(100% - var(--np-oct)) 0,
    100% var(--np-oct), 100% calc(100% - var(--np-oct)),
    calc(100% - var(--np-oct)) 100%, var(--np-oct) 100%,
    0 calc(100% - var(--np-oct)), 0 var(--np-oct));
  --np-oct-badge:polygon(
    var(--np-oct-xs) 0, calc(100% - var(--np-oct-xs)) 0,
    100% var(--np-oct-xs), 100% calc(100% - var(--np-oct-xs)),
    calc(100% - var(--np-oct-xs)) 100%, var(--np-oct-xs) 100%,
    0 calc(100% - var(--np-oct-xs)), 0 var(--np-oct-xs));
  --np-radius:0px;

  --np-ink:#1d1d1f;
  --np-ink-deep:#111111;
  --np-on-dark:rgba(255,255,255,.86);
  --np-on-dark-mut:rgba(255,255,255,.62);
  --np-accent:#C08A2E;
  --np-accent-text:#8A6118;
  --np-accent-dark:#D9A44A;

  --sp-1:8px; --sp-2:16px; --sp-3:24px;
  --sp-4:40px; --sp-5:64px; --sp-6:96px;
  --sec-y:var(--sp-5);

  --fs-caption:13px; --fs-body:15px; --fs-body-lg:17px;
  --fs-h3:20px; --fs-h2:28px; --fs-h1:40px; --fs-display:56px;

  --np-field-h:52px;
  --np-field-pad:14px 16px;
  --np-field-border:1px solid var(--np-line);
  --np-field-fs:16px;
}

/* ---------- 33.1 P0: Footer-Ueberschriften auf der Produktseite ---------- */
html body .elementor-location-footer h1,
html body .elementor-location-footer h2,
html body .elementor-location-footer h3,
html body .elementor-location-footer h4,
html body .elementor-location-footer h5,
html body .elementor-location-footer h6,
html body .elementor-location-footer .elementor-heading-title{
  color:var(--np-on-dark-mut)!important;
}
html body .elementor-location-footer p,
html body .elementor-location-footer li,
html body .elementor-location-footer a{ color:var(--np-on-dark)!important; }
html body .elementor-location-footer a:hover{ color:#fff!important; }

/* ---------- 33.2 Ein Ink statt fuenf ---------- */
html body .elementor-location-header .elementskit-navbar-nav > li > a:hover,
html body ul.products li.product .woocommerce-loop-product__title:hover,
html body a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title,
html body .np-ref h3,
html body .np-alle-kat a,
html body .np-argumente strong,
html body .np-anruf,
html body .np-teilen a,
html body .np-btn-hell,
html body .np-btn-dunkel{ color:var(--np-ink)!important; }

html body .elementor-button:hover,
html body a.button:hover,
html body button.button:hover,
html body .np-anfahrt-knopf,
html body form.np-suche button:hover{ background:var(--np-ink)!important; }
html body .np-anfahrt-knopf:hover{ background:var(--np-ink-deep)!important; }

html body.search .woocommerce-loop-product__title,
html body.search-results .woocommerce-loop-product__title{ color:var(--np-ink)!important; }

/* ---------- 33.3 Akzentfarbe: ersetzt zwei Plugin-Defaults ---------- */
html body .elementor-button-icon-qty{
  background:var(--np-accent)!important;
  color:var(--np-ink)!important;
  clip-path:var(--np-oct-badge);
  border-radius:0!important;
  font-weight:600;
}
html body .woocommerce-product-details__short-description a,
html body .np-versandinfo a,
html body.single-product .summary a:not(.button):not(.elementor-button){
  color:var(--np-accent-text)!important;
}
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible{
  outline:2px solid var(--np-accent)!important;
  outline-offset:2px!important;
}
html body .elementor-field-group .elementor-field:focus,
html body .quantity input:focus,
html body .wceb_datepicker:focus,
html body .picker__input:focus{ border-color:var(--np-accent)!important; }

/* ---------- 33.4 Oktagon aktivieren ----------
   Traeger laut Markenregel: Cards, Buttons, Bildmasken, Badges.       */
.np-oct{ clip-path:var(--np-hex); border-radius:0!important; }

html body ul.products li.product-category img,
html body .np-klickkachel .elementor-widget-image img,
html body ul.products li.product img.attachment-woocommerce_thumbnail,
html body .e-gallery-item,
html body .np-oct-bild img{
  clip-path:var(--np-hex)!important;
  border-radius:0!important;
}

html body ul.products li.product{
  clip-path:var(--np-hex)!important;
  border-radius:0!important;
}

html body .elementor-button,
html body a.button,
html body button.button,
html body input.button,
html body .single_add_to_cart_button,
html body .wc-block-components-button,
html body .np-btn,
html body .np-btn-hell,
html body .np-btn-dunkel,
html body .np-anfahrt-knopf,
html body .np-anruf,
html body form.np-suche button{
  clip-path:var(--np-hex)!important;
  border-radius:0!important;
}

/* Zwei Buttons hatten Rahmen bei transparenter Fuellung. Ein clip-path
   wuerde den Rahmen an den Diagonalen aufschneiden, deshalb leichte
   Fuellung statt Rahmen.                                              */
html body .elementor-menu-cart__toggle .elementor-button,
html body .elementor-menu-cart__toggle .elementor-button:hover{
  border:0!important;
  background:var(--np-alt)!important;
  clip-path:var(--np-hex)!important;
  border-radius:0!important;
}
html body .np-btn-linie{
  border:0!important;
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
  clip-path:var(--np-hex)!important;
  border-radius:0!important;
}
html body .np-btn-linie:hover{ background:rgba(255,255,255,.28)!important; }

html body .np-badge,
html body .onsale,
html body .elementor-menu-cart__product-remove{
  clip-path:var(--np-oct-badge)!important;
  border-radius:0!important;
}

/* ---------- 33.5 Radius vereinheitlichen ----------
   Ersetzt 22 / 18 / 16 / 14 / 12 / 10 / 5 / 3 / 2px quer durch die Datei. */
html body .woocommerce-ordering select,
html body .woocommerce-message,
html body .woocommerce-error,
html body .woocommerce-info,
html body .wc-block-components-order-summary,
html body .wc-block-components-radio-control-accordion-option,
html body .wc-block-components-radio-control__option,
html body .wc-block-components-text-input input,
html body .wc-block-components-combobox input,
html body .elementor-field-group .elementor-field,
html body .quantity input,
html body .wceb_datepicker,
html body .picker__input,
html body .picker__box,
html body .picker__button--today,
html body .picker__button--clear,
html body .picker__button--close,
html body .np-miethinweis,
html body .ui-datepicker,
html body select,
html body textarea,
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="search"],
html body select.elementor-field-textual.elementor-field-textual,
html body .elementor-field-textual.elementor-field-textual{
  border-radius:var(--np-radius)!important;
}

/* ---------- 33.6 Formularfelder: ein Bauteil statt drei ----------
   Kontakt r12/1px #e5e5e7/h52 · Mietzeitraum r3/1px #666/h42
   Mengenwaehler: Input r12, Buttons r3                                */
html body .elementor-field-group .elementor-field,
html body .elementor-field-textual,
html body .wceb_datepicker,
html body .picker__input,
html body .wc-block-components-text-input input,
html body form .form-row input.input-text,
html body form .form-row textarea,
html body form .form-row select{
  min-height:var(--np-field-h)!important;
  height:auto!important;
  padding:var(--np-field-pad)!important;
  border:var(--np-field-border)!important;
  font-size:var(--np-field-fs)!important;
  font-family:var(--np-font)!important;
  color:var(--np-ink)!important;
  background:var(--np-bg)!important;
  border-radius:var(--np-radius)!important;
  box-shadow:none!important;
}
html body textarea.elementor-field-textual{ min-height:120px!important; }

html body .quantity{
  border:var(--np-field-border)!important;
  border-radius:var(--np-radius)!important;
  overflow:hidden;
  display:flex!important;
  align-items:stretch;
}
html body .quantity input.qty,
html body .quantity input[type="number"]{
  border:0!important;
  min-height:50px!important;
  height:50px!important;
  padding:0 8px!important;
  text-align:center!important;
  font-size:var(--np-field-fs)!important;
  color:var(--np-ink)!important;
  border-radius:0!important;
}
html body .quantity button,
html body .quantity .plus,
html body .quantity .minus{
  border:0!important;
  border-radius:0!important;
  background:var(--np-alt)!important;
  color:var(--np-ink)!important;
  font-size:var(--fs-h3)!important;
  min-height:50px!important;
  height:50px!important;
  width:48px!important;
  cursor:pointer;
  clip-path:none!important;
}
html body .quantity button:hover,
html body .quantity .plus:hover,
html body .quantity .minus:hover{ background:var(--np-line)!important; }

/* ---------- 33.7 WooCommerce-Defaults auf den Marken-Button ----------
   Auf der Produktseite standen ungestylte Woo-Buttons (bg #e5e5e5,
   Text #bfbfbf, 19.2px) direkt neben Marken-Buttons.                  */
html body form.cart button:not(.plus):not(.minus),
html body.woocommerce-cart button:not(.plus):not(.minus):not(.elementor-button),
html body.woocommerce-checkout button:not(.plus):not(.minus):not(.elementor-button),
html body .wc-block-components-button:not(:disabled),
html body ul.products a.button{
  background:var(--np-ink)!important;
  color:#fff!important;
  border:1px solid var(--np-ink)!important;
  font-family:var(--np-font)!important;
  font-size:var(--fs-body)!important;
  font-weight:500!important;
  min-height:46px!important;
  padding:0 22px!important;
  clip-path:var(--np-hex)!important;
  border-radius:0!important;
}
html body button:disabled,
html body .single_add_to_cart_button.disabled,
html body .single_add_to_cart_button.date-selection-needed{
  background:var(--np-line)!important;
  color:var(--np-muted)!important;
  border-color:var(--np-line)!important;
}

/* ---------- 33.8 Produktkachel: eine Kachel, vier Orte ----------
   Shop 16/500 · Kategorie 17/600 · Suche 17/600 #080808 · Related #000 */
html body ul.products.products li.product.product .woocommerce-loop-product__title,
html body ul.products.products li.product.product h2,
html body ul.products.products li.product.product h3,
html body .related .woocommerce-loop-product__title,
html body .up-sells .woocommerce-loop-product__title{
  font-size:var(--fs-body-lg)!important;
  font-weight:600!important;
  line-height:1.35!important;
  color:var(--np-ink)!important;
  font-family:var(--np-font)!important;
}
html body ul.products li.product .price,
html body ul.products li.product .woocommerce-Price-amount{
  font-size:var(--fs-caption)!important;
  color:var(--np-muted)!important;
}
html body ul.products li.product-category{
  background:var(--np-bg);
  border:1px solid var(--np-line);
  clip-path:var(--np-hex)!important;
  border-radius:0!important;
}
html body ul.products.products li.product-category.product-category h2,
html body ul.products.products li.product-category.product-category .woocommerce-loop-category__title{
  font-size:var(--fs-body-lg)!important;
  font-weight:600!important;
  color:var(--np-ink)!important;
}

/* ---------- 33.9 Abschnitts-Ueberschriften: eine Groesse je Rolle ----------
   Produktseite hatte "Aehnliche Produkte" 40px und "Passt auch dazu" 34px. */
html body .related > h2,
html body .up-sells > h2,
html body .cross-sells > h2,
html body .np-abschnitt-titel,
html body .np-passt-dazu h2{
  font-size:var(--fs-h1)!important;
  font-weight:600!important;
  line-height:1.15!important;
  letter-spacing:-.01em!important;
}

/* ---------- 33.10 Suchergebnis auf dasselbe Raster ----------
   Suche zeigte 4 Spalten Desktop und 1 Spalte bei 390px,
   Shop und Kategorie 3 bzw. 2.                                        */
@media (max-width:767px){
  html body ul.products,
  html body ul.products.elementor-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--sp-2)!important;
  }
}

/* ---------- 33.11 Spacing ----------
   --sec-y fuer Abschnitte mit der Klasse np-sektion. Die drei
   Startseiten-Abschnitte mit 0/80 und 34/0 gehoeren in Elementor selbst
   geradegezogen; ein Override pro Element waere die Einzelkorrektur,
   die hier nicht sein soll.                                            */
html body .np-sektion{
  padding-top:var(--sec-y)!important;
  padding-bottom:var(--sec-y)!important;
}

/* ---------- 33.12 Mobil: Kante skaliert mit der Kachel ----------
   14px an 255px Kachelbreite entspricht 10px an 156px.                */
@media (max-width:767px){
  :root{
    --np-oct:10px;
    --np-oct-xs:4px;
    --sec-y:var(--sp-4);
    --fs-display:34px;
    --fs-h1:28px;
  }
  html body .related > h2,
  html body .up-sells > h2,
  html body .cross-sells > h2,
  html body .np-abschnitt-titel{ font-size:var(--fs-h2)!important; }
}

/* ---------- 33.13 Type-Skala: die krummen Werte ----------
   13.12px und 15.04px waren Rundungsartefakte aus em-Werten.          */
html body .np-teilen,
html body .np-teilen a,
html body .product_meta,
html body .product_meta a{ font-size:var(--fs-caption)!important; }
html body .woocommerce-product-details__short-description,
html body .woocommerce-product-details__short-description p{ font-size:var(--fs-body-lg)!important; }

/* ---------- 33.14 Cards auf der Startseite ----------
   Klickkacheln (18px), Referenzkarten (14px) und der Video-Rahmen (14px)
   sind Cards im Sinne der Markenregel und tragen damit das Oktagon.     */
html body .np-klickkachel,
html body article.np-ref,
html body .e-hosted-video,
html body .np-card{
  clip-path:var(--np-hex)!important;
  border-radius:0!important;
}
html body .np-klickkachel > .elementor-widget-wrap,
html body .np-klickkachel .e-con-inner{ border-radius:0!important; }

/* ---------- 33.15 Kacheln: Fuellung statt Rahmen ----------
   Ein clip-path schneidet den Rahmen an den vier Diagonalen auf, weil dort
   keine Kante mehr steht. Deshalb definiert ab hier die Flaeche die Kachel,
   nicht die Linie. Das ist die einzige Loesung, die ohne Markup-Aenderung
   eine saubere Oktagon-Kante ergibt.                                    */
html body ul.products li.product,
html body ul.products li.product-category{
  background:var(--np-alt)!important;
  border:0!important;
  overflow:hidden;
}
html body ul.products li.product:hover,
html body ul.products li.product-category:hover{
  background:var(--np-line)!important;
}

/* ---------- 33.16 Linkfarbe ----------
   #cc3366 war nicht ein einzelner Ausreisser, sondern die Standard-
   Linkfarbe des Dokuments (Theme-Default). Sie schlug ueberall dort durch,
   wo keine eigene Regel griff: Mini-Warenkorb, Skip-Link, Plugin-Ausgaben.
   Basiswert bewusst ohne !important, damit bestehende Regeln vorgehen.  */
html body a{ color:var(--np-ink); }
html body a:hover{ color:var(--np-accent-text); }

html body .elementor-menu-cart a,
html body .elementor-menu-cart__product-name a,
html body .elementor-menu-cart__product-name{ color:var(--np-ink)!important; }
html body .elementor-menu-cart__product-price,
html body .elementor-menu-cart .quantity{ color:var(--np-muted)!important; }
html body .elementor-menu-cart__product-remove a{ color:var(--np-muted)!important; }
html body .elementor-menu-cart__product-remove a:hover{ color:var(--np-ink)!important; }

/* ---------- Ende Abschnitt 33 ---------- */

/* 91. Preisangaben: Zusatz darf umbrechen, Betrag bleibt zusammen */
.woocommerce ul.products li.product .price{white-space:normal!important;overflow-wrap:break-word;hyphens:auto}
.woocommerce ul.products li.product .price .wceb-price-format{display:block;font-size:.8em;line-height:1.3;hyphens:auto;overflow-wrap:break-word}
.woocommerce ul.products li.product .price .woocommerce-Price-amount{white-space:nowrap}
.elementor-widget-woocommerce-product-price .price{white-space:normal!important;overflow-wrap:break-word;hyphens:auto}
.elementor-widget-woocommerce-product-price .price .woocommerce-Price-amount{white-space:nowrap}

/* Abschnitt 92 – lange Woerter in Ueberschriften nicht ueber den Rand schieben */
.entry-title {
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}
h1, h2, h3, h4, h5, h6, .elementor-heading-title {
	overflow-wrap: break-word;
}

/* Abschnitt 93 – Ausfuelllinien im Muster-Widerrufsformular */
.np-linie {
	display: block;
	width: 100%;
	height: 1.6em;
	border-bottom: 1px solid currentColor;
	opacity: .55;
}
.np-linie-kurz {
	display: inline-block;
	width: 14em;
	max-width: 100%;
	height: 1.2em;
	border-bottom: 1px solid currentColor;
	vertical-align: bottom;
	opacity: .55;
}

/* ---------- Abschnitt 94. Ruhigere Formensprache ---------- */

/* 94.1 Die abgeschnittene Ecke bleibt den Schaltflaechen vorbehalten.
   Karten, Bilder und Videorahmen bekommen weiche Rundungen. Damit
   verschwindet der Rahmen-im-Rahmen-Effekt um jedes Bild. */
html body .np-klickkachel,
html body article.np-ref,
html body .e-hosted-video,
html body .np-card{
	clip-path:none!important;
	border-radius:20px!important;
	overflow:hidden;
}
html body .np-klickkachel .elementor-widget-image img,
html body ul.products li.product-category img,
html body [data-id='231ca60'] .elementor-widget-image img,
html body [data-id='6f6fc7a'] .elementor-widget-image img,
html body [data-id='9f0413b'] .e-gallery-item,
html body article.np-ref img{
	clip-path:none!important;
	border-radius:14px!important;
}

/* 94.2 Die Kategoriekacheln wurden auf die Hoehe der hoechsten
   Nachbarin gezogen und standen darum halb leer. */
html body .elementor-element-ff2e131{ align-items:start!important; }

/* 94.3 Die letzte Reihe der Leistungen stand mittig statt links. */
html body .elementor-element-c29d983{ justify-content:flex-start!important; }

/* 94.4 Zeilenumbrueche ausgleichen, damit kein einzelnes Wort
   allein auf der letzten Zeile steht. */
html body h1,
html body h2,
html body h3,
html body .elementor-heading-title{ text-wrap:balance; }
html body .elementor-widget-text-editor p,
html body .np-lead{ text-wrap:pretty; }

/* 94.5 Gleicher Buchstabenabstand fuer gleich grosse Ueberschriften. */
html body h2.elementor-heading-title{ letter-spacing:-0.018em; }

/* 94.6 Die Kategorieleiste im Mietshop scrollt auf schmalen Geraeten
   seitlich. Ein weicher Verlauf zeigt, dass dort noch mehr kommt. */
@media (max-width:1024px){
	html body .np-shopnav{ position:relative; }
	html body .np-shopnav::after{
		content:'';
		position:absolute;
		top:0; right:0; bottom:0;
		width:44px;
		pointer-events:none;
		background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.96));
	}
}

/* ---------- Abschnitt 95. Kacheln hugsen ihren Inhalt ---------- */
/* Die Leistungskacheln wurden auf die Hoehe der hoechsten Kachel
   ihrer Reihe gezogen. Wo der Text kuerzer ist, blieb darunter bis
   zu 90 Pixel leer. Jede Kachel steht jetzt auf ihrer eigenen Hoehe. */
html body .elementor-element-c29d983{ align-items:flex-start!important; }

/* ---------- Abschnitt 96. Luft in den Kacheln ausgleichen ---------- */
/* Unter dem Titel standen rund 60 Pixel leer: Die Ueberschrift sass
   in einem 44 Pixel hohen Kasten fuer eine 28,6 Pixel hohe Zeile,
   danach folgten 20 Pixel Abstand, ein leeres Widget ohne Hoehe und
   24 Pixel Innenabstand. */
html body .np-klickkachel{
	gap:14px!important;
	padding-bottom:18px!important;
}
html body .np-klickkachel .elementor-widget-heading{ min-height:0!important; }
html body .np-klickkachel .elementor-widget-heading .elementor-widget-container{ min-height:0!important; }

/* ===== Abschnitt 97 - Shop-Navigation: Verlauf korrekt verankern ===== */
@media (max-width:1024px){
html body aside.np-shopnav{ position:relative!important; }
}

/* ===== Abschnitt 98 - Shop-Navigation: Sticky-Versatz mobil zuruecksetzen ===== */
@media (max-width:1024px){
html body aside.np-shopnav{ top:auto!important; left:auto!important; right:auto!important; bottom:auto!important; }
}

/* ===== Abschnitt 99 - Runde Ecken ueberall (Apple-Formensprache) ===== */

/* 99.1 Abgeschnittene Ecken abschalten */
html body .elementor-button,
html body .elementor-button::before,
html body .elementor-button::after,
html body .np-btn,
html body .np-btn::before,
html body .np-btn::after,
html body .np-anruf,
html body a.button,
html body button,
html body button::before,
html body button::after,
html body input[type=submit],
html body input[type=button],
html body .elementor-menu-cart__toggle_button,
html body .elementor-button-icon-qty,
html body .elementskit-menu-toggler,
html body .cmplz-btn,
html body .cmplz-category-toggle,
html body ul.products li.product,
html body ul.products li.product-category,
html body .np-klickkachel,
html body .np-card,
html body article.np-ref { clip-path: none !important; }

/* 99.2 Buttons als Pille */
html body .elementor-button,
html body .np-btn,
html body .np-anruf,
html body a.button,
html body button,
html body input[type=submit],
html body input[type=button],
html body .elementor-menu-cart__toggle_button,
html body .elementskit-menu-toggler,
html body .cmplz-btn,
html body .cmplz-category-toggle,
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .elementor-button-icon-qty { border-radius: 999px !important; }

/* 99.3 Kacheln und Karten */
html body ul.products li.product,
html body ul.products li.product-category { border-radius: 20px !important; }

/* 99.4 Formularfelder weich */
html body input[type=text],
html body input[type=email],
html body input[type=tel],
html body input[type=search],
html body input[type=number],
html body input[type=url],
html body input[type=date],
html body input[type=password],
html body select,
html body textarea { border-radius: 12px !important; }

/* ===== Abschnitt 100 - Nachtrag runde Ecken (Spezifitaet) ===== */

/* 100.1 Warenkorb-Symbol im Kopf */
html body .elementor-menu-cart__toggle .elementor-button.elementor-button,
html body a.elementor-menu-cart__toggle_button.elementor-menu-cart__toggle_button {
	clip-path: none !important;
	border-radius: 999px !important;
}

/* 100.2 Suchen-Knopf im Mietshop */
html body form.np-suche.np-suche button {
	clip-path: none !important;
	border-radius: 999px !important;
}

/* 100.3 Produkt- und Kategoriekacheln */
html body .woocommerce ul.products li.product.product,
html body .woocommerce ul.products li.product-category.product-category,
html body ul.products li.product.product,
html body ul.products li.product-category.product-category {
	clip-path: none !important;
	border-radius: 20px !important;
}

/* ===== Abschnitt 101 - Nachtrag 2: Knoepfe und Flucht im Shop ===== */

/* 101.1 Knoepfe in den Produktkacheln (Zeitraum waehlen / Preis anfragen) */
html body ul.products li.product a.button.button,
html body ul.products a.button.button {
	clip-path: none !important;
	border-radius: 999px !important;
}

/* 101.2 In den Warenkorb auf der Produktseite */
html body form.cart button.button.single_add_to_cart_button.single_add_to_cart_button {
	clip-path: none !important;
	border-radius: 999px !important;
}

/* 101.3 Preis anfragen auf der Produktseite - Schrift war schwarz auf schwarz */
html body a.np-btn-anfrage.np-btn-anfrage {
	color: #ffffff !important;
	clip-path: none !important;
	border-radius: 999px !important;
}

/* 101.4 Mengenwaehler weich abrunden */
html body form.cart .quantity {
	border-radius: 12px !important;
	overflow: hidden;
}

/* 101.5 Kachelinhalt auf eine gemeinsame Flucht (20 px) */
html body ul.products li.product h2.woocommerce-loop-product__title,
html body ul.products li.product .np-anfrage-preis-klein,
html body ul.products li.product img.attachment-woocommerce_thumbnail {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
html body ul.products li.product .np-anfrage-preis-klein {
	display: block;
}

/* ===== Abschnitt 102 - Nachtrag 3: Knoepfe im Kalender ===== */
html body button[class*=picker__button][class*=picker__button][class*=picker__button][class*=picker__button],
html body form.cart button[class*=picker__button][class*=picker__button][class*=picker__button][class*=picker__button] {
	clip-path: none !important;
	border-radius: 999px !important;
}

/* ===== Abschnitt 103 - Produktbilder in den Kacheln rund ===== */
html body ul.products li.product img.attachment-woocommerce_thumbnail.attachment-woocommerce_thumbnail,
html body ul.products li.product a img.attachment-woocommerce_thumbnail.attachment-woocommerce_thumbnail {
	clip-path: none !important;
	border-radius: 14px !important;
}

/* ===== Abschnitt 104 - Nachtrag 4: Cookie-Knoepfe und Menue-Knopf im Warenkorb ===== */
html body button.cmplz-btn.cmplz-btn.cmplz-btn.cmplz-btn,
html body button.cmplz-category-toggle.cmplz-category-toggle.cmplz-category-toggle.cmplz-category-toggle,
html body button.elementskit-menu-toggler.elementskit-menu-toggler.elementskit-menu-toggler.elementskit-menu-toggler {
	clip-path: none !important;
	border-radius: 999px !important;
}

/* ===== Abschnitt 105 - Letzte eckige Stellen und Knopf-Unterstreichung ===== */

/* 105.1 Knoepfe ohne Unterstreichung */
html body a.np-btn-anfrage.np-btn-anfrage,
html body a.np-btn-anfrage.np-btn-anfrage:hover,
html body ul.products li.product a.button.button,
html body ul.products li.product a.button.button:hover,
html body a.elementor-button.elementor-button,
html body a.elementor-button.elementor-button:hover {
	text-decoration: none !important;
}

/* 105.2 Produktgalerie rund */
html body .woocommerce-product-gallery .flex-viewport {
	border-radius: 20px !important;
	overflow: hidden;
}
html body .woocommerce-product-gallery .woocommerce-product-gallery__wrapper img,
html body .woocommerce-product-gallery img.zoomImg {
	border-radius: 20px !important;
}

/* 105.3 Vorschaubilder unter der Galerie */
html body .flex-control-thumbs li {
	border-radius: 12px !important;
	overflow: hidden;
}
html body .flex-control-thumbs img {
	border-radius: 12px !important;
}

/* 105.4 Bilder im Warenkorb */
html body .woocommerce-cart img.attachment-woocommerce_thumbnail,
html body .wc-block-cart img.wc-block-components-product-image,
html body .wc-block-cart td img {
	border-radius: 12px !important;
}

/* ===== Abschnitt 106 - Warenkorb-Ausklapper ===== */

/* 106.1 Entfernen-Knopf: rund statt achteckig, mit sichtbarem Kreuz */
html body .elementor-menu-cart__product-remove {
	clip-path: none !important;
	border-radius: 999px !important;
}
html body .elementor-menu-cart__product-remove a.remove_from_cart_button {
	clip-path: none !important;
	border-radius: 999px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none !important;
}
html body .elementor-menu-cart__product-remove a.remove_from_cart_button::before {
	content: '×';
	font-size: 17px;
	font-weight: 400;
	line-height: 1;
	color: inherit;
}

/* 106.2 Schliessen-Knopf mit sichtbarem Kreuz */
html body .elementor-menu-cart__close-button {
	clip-path: none !important;
	border-radius: 999px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
html body .elementor-menu-cart__close-button::before {
	content: '×';
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
}

/* 106.3 Preisfeld weich abrunden */
html body .elementor-menu-cart__product-price .quantity {
	border-radius: 12px !important;
}

/* 106.4 Mietdaten sauber in zwei Spalten */
html body .elementor-menu-cart__product dl.variation {
	grid-template-columns: auto minmax(0, 1fr) !important;
	column-gap: 8px !important;
	row-gap: 2px !important;
}
html body .elementor-menu-cart__product dl.variation dt,
html body .elementor-menu-cart__product dl.variation dd,
html body .elementor-menu-cart__product dl.variation dd p {
	margin: 0 !important;
}

/* 106.5 Bild im Ausklapper rund */
html body .elementor-menu-cart__product img.attachment-woocommerce_thumbnail {
	border-radius: 12px !important;
}

/* ===== Abschnitt 107 - Warenkorb-Ausklapper: Textfluss und Knoepfe ===== */

/* 107.1 Mietdaten im normalen Textfluss statt in einer engen Spalte */
html body .elementor-menu-cart__product dl.variation {
	display: block !important;
}
html body .elementor-menu-cart__product dl.variation dt {
	display: inline !important;
	float: none !important;
	margin: 0 6px 0 0 !important;
}
html body .elementor-menu-cart__product dl.variation dd,
html body .elementor-menu-cart__product dl.variation dd p {
	display: inline !important;
	margin: 0 !important;
}
html body .elementor-menu-cart__product dl.variation dd::after {
	content: '';
	display: block;
}

/* 107.2 Fusszeilen-Knoepfe untereinander, damit die Beschriftung passt */
html body .elementor-menu-cart__footer-buttons {
	grid-template-columns: 1fr !important;
	gap: 10px !important;
}
html body .elementor-menu-cart__footer-buttons a.elementor-button {
	width: 100% !important;
	white-space: nowrap !important;
}

/* ===== Abschnitt 108 - Schliessen- und Entfernen-Kreuz sauber zeichnen ===== */

html body .elementor-menu-cart__close-button,
html body .elementor-menu-cart__product-remove {
	position: relative !important;
	display: block !important;
	width: 26px !important;
	height: 26px !important;
	font-size: 0 !important;
	border: 0 !important;
	clip-path: none !important;
	border-radius: 999px !important;
}

html body .elementor-menu-cart__close-button::before,
html body .elementor-menu-cart__close-button::after,
html body .elementor-menu-cart__product-remove::before,
html body .elementor-menu-cart__product-remove::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	width: 14px !important;
	height: 1.5px !important;
	border-radius: 2px !important;
	background-color: #6e6e73 !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body .elementor-menu-cart__close-button::before,
html body .elementor-menu-cart__product-remove::before {
	transform: translate(-50%, -50%) rotate(45deg) !important;
}

html body .elementor-menu-cart__close-button::after,
html body .elementor-menu-cart__product-remove::after {
	transform: translate(-50%, -50%) rotate(-45deg) !important;
}

html body .elementor-menu-cart__product-remove a.remove_from_cart_button {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	font-size: 0 !important;
}

html body .elementor-menu-cart__product-remove a.remove_from_cart_button::before,
html body .elementor-menu-cart__product-remove a.remove_from_cart_button::after {
	content: none !important;
}

/* ===== Abschnitt 109 - Hinweiskasten auf der Produktseite rund ===== */
html body p.np-miethinweis {
	border-radius: 14px !important;
}

/* ===== Abschnitt 110 - Handy-Fehler vom 25.08. ===== */

/* 110.1 Abgeschnittene Ecken grundsaetzlich aufheben */
html body *:not(svg):not(svg *) {
	clip-path: none !important;
}

/* 110.2 Mengensteuerung im Warenkorb als eine runde Gruppe */
html body.woocommerce-cart .quantity,
html body .wc-block-cart .quantity {
	border-radius: 12px !important;
	overflow: hidden;
}
html body.woocommerce-cart a.remove,
html body .wc-block-cart .wc-block-cart-item__remove-link {
	border-radius: 999px !important;
}

/* 110.3 Ergebniszaehler und Sortierung mobil untereinander */
@media (max-width: 767px) {
	html body .woocommerce-result-count,
	html body .woocommerce-ordering {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: left !important;
	}
	html body .woocommerce-result-count {
		margin-bottom: 12px !important;
	}
	html body .woocommerce-ordering select {
		width: 100% !important;
		border-radius: 12px !important;
	}
}

/* 110.4 Schliessen-Kreuz im Burger-Menue */
html body .elementskit-menu-close {
	position: relative !important;
	display: block !important;
	width: 34px !important;
	height: 34px !important;
	font-size: 0 !important;
	color: transparent !important;
	border-radius: 999px !important;
}
html body .elementskit-menu-close::before,
html body .elementskit-menu-close::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	width: 16px !important;
	height: 1.5px !important;
	border-radius: 2px !important;
	background-color: #1d1d1f !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body .elementskit-menu-close::before {
	transform: translate(-50%, -50%) rotate(45deg) !important;
}
html body .elementskit-menu-close::after {
	transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* 110.5 Kopfleiste mit Weichzeichner statt durchscheinend */
html body .elementor-element-9e98c06,
html body .elementor-sticky--active {
	-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
	backdrop-filter: saturate(180%) blur(20px) !important;
}

/* ===== Abschnitt 111 - Korrektur zu 110.1 (Spezifitaet) ===== */

/* 111.1 Die globale Regel aus 110.1 hatte die niedrigste Spezifitaet
   ueberhaupt und wurde von jeder Klassenregel geschlagen.
   Diese Fassung gewinnt. */
html body *[class][class][class][class]:not(svg):not(svg *),
html body *:not([class]):not(svg):not(svg *) {
	clip-path: none !important;
}

/* 111.2 Block-Warenkorb: Mengenwaehler und Entfernen-Knopf rund */
html body .wc-block-components-quantity-selector,
html body .wc-block-components-quantity-selector input {
	border-radius: 12px !important;
}
html body .wc-block-cart-item__remove-link,
html body button.wc-block-cart-item__remove-link,
html body a.wc-block-cart-item__remove-link {
	border-radius: 999px !important;
}

/* ===== Abschnitt 112 - Kopfleiste deckend statt durchscheinend ===== */

/* Warum kein Weichzeichner:
   Im CSS steht bereits dokumentiert, dass backdrop-filter auf dem
   Header einen Containing Block erzeugt. Die fixiert positionierte
   Leiste rechnet ihr top dann relativ zum Header statt zum Fenster
   und rutscht aus dem Kopfbereich heraus. Deshalb war der Filter
   bewusst abgeschaltet - das drehe ich nicht gegen den Willen der
   alten Entscheidung zurueck.

   Deckend loest das Durchscheinen genauso sicher, ohne das Risiko. */

html body .elementor-element-9e98c06.elementor-element-9e98c06,
html body .elementor-sticky--active.elementor-sticky--active {
	background-color: rgba(255, 255, 255, 0.98) !important;
}

/* ==========================================================================
   35. KATEGORIETEXTE ALS AUFKLAPPER
   Eingespielt am 26.08.2026.
   Intro und ausfuehrlicher Text stehen nicht mehr offen auf der Seite,
   sondern in einem nativen -Element direkt unter der Ueberschrift.
   Kein JavaScript. Der Text bleibt vollstaendig im Dokument und wird
   indexiert, ist aber erst nach Klick sichtbar.
   Markup kommt aus Code Snippet 118.
   ========================================================================== */

html body .np-kat-details{
  max-width:70ch;
  margin:calc(var(--sp-2, 16px) * -0.25) 0 var(--sp-3, 24px);
}

html body .np-kat-details > summary.np-kat-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  list-style:none;
  padding:6px 0;
  font-family:var(--np-font);
  font-size:var(--fs-body, 15px);
  font-weight:500;
  line-height:1.4;
  color:var(--np-muted, #6e6e73);
  transition:color .18s var(--np-ease, ease);
}
html body .np-kat-details > summary.np-kat-toggle::-webkit-details-marker{ display:none; }
html body .np-kat-details > summary.np-kat-toggle::marker{ content:""; }
html body .np-kat-details > summary.np-kat-toggle:hover{ color:var(--np-ink, #1d1d1f); }

/* Pfeil, dreht sich beim Aufklappen */
html body .np-kat-details > summary.np-kat-toggle::after{
  content:"";
  width:7px; height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s var(--np-ease, ease);
}
html body .np-kat-details[open] > summary.np-kat-toggle::after{
  transform:translateY(1px) rotate(-135deg);
}

html body .np-kat-inhalt{ padding-top:var(--sp-1, 8px); }
html body .np-kat-inhalt p{
  font-size:var(--fs-body-lg, 17px);
  line-height:1.6;
  color:var(--np-body, #424245);
  margin:0 0 var(--sp-2, 16px);
}
html body .np-kat-inhalt p:last-child{ margin-bottom:0; }

@media (max-width:767px){
  html body .np-kat-details{ margin-bottom:var(--sp-2, 16px); }
  html body .np-kat-inhalt p{ font-size:var(--fs-body, 15px); }
}

/* ===== np-kategoriekopf-fix — Kategorieseiten, oberer Bereich (24.08.2026) =====
   Zum Zuruecknehmen: diesen Block bis zum Endmarker loeschen. */
header.woocommerce-products-header details.np-kat-details{max-width:none!important;margin:0 0 22px!important}
main.site-main > form.np-suche{display:flex!important;gap:10px!important;width:100%!important;max-width:none!important;margin:0 0 22px!important}
main.site-main > form.np-suche input#np-suchfeld{flex:1 1 auto!important;width:auto!important}
main.site-main > form.woocommerce-ordering{float:right!important;width:auto!important;margin:0 0 26px!important}
main.site-main > p.woocommerce-result-count{float:left!important;margin:0 0 26px!important;line-height:44px!important;font-size:15px!important}
main.site-main > ul.products{clear:both!important;margin-top:0!important}
main.site-main > form.woocommerce-ordering select.orderby{width:230px!important;max-width:100%!important;height:44px!important;border-radius:12px!important;border:1px solid rgb(229,229,231)!important;font-size:15px!important}
main.site-main ul.products h2.woocommerce-loop-product__title::after{content:none!important}
/* ===== Ende np-kategoriekopf-fix ===== */

/* ===== np-mobilmenu-fix — Offcanvas-Menue mobil (26.08.2026) =====
   Behebt: Overlay hatte border-radius 999px (grosser Bogen beim Einfahren),
   Panel war nur 350px breit (Streifen rechts), Links zu wenig Innenabstand.
   Zum Zuruecknehmen: Block bis zum Endmarker loeschen. */
@media (max-width:1024px){
html body div.elementskit-menu-overlay.ekit-nav-menu--overlay{border-radius:0 !important;width:100% !important}
html body div.elementskit-menu-container.elementskit-menu-offcanvas-elements{width:100% !important;max-width:400px !important}
html body .elementskit-navbar-nav > li > a{padding:14px 26px !important}
html body .elementskit-menu-close{margin:14px 18px !important}
}
/* ===== Ende np-mobilmenu-fix ===== */

/* ===== np-menue-richtung — Offcanvas faehrt von rechts ein (26.08.2026) =====
   Der Burger sitzt rechts, das Menue kam von links. Jetzt gleiche Seite.
   Panel deckt im Offcanvas-Bereich die volle Breite ab.
   Zum Zuruecknehmen: Block bis zum Endmarker loeschen. */
@media (max-width:1024px){
html body div.elementskit-menu-container.elementskit-menu-offcanvas-elements{width:100% !important;max-width:none !important;left:100% !important}
html body div.elementskit-menu-container.elementskit-menu-offcanvas-elements.active{left:0 !important}
html body div.elementskit-menu-overlay.ekit-nav-menu--overlay{left:100% !important}
html body div.elementskit-menu-overlay.ekit-nav-menu--overlay.active{left:0 !important}
}
/* ===== Ende np-menue-richtung ===== */

/* ===== np-overlay-fade — Overlay blendet ein statt zu schieben (26.08.2026) =====
   Das Overlay fuhr mit 0,4 s Verzoegerung hinter dem Panel her und war
   dabei als grauer Block mit harter Kante sichtbar. Jetzt liegt es fest
   und wird nur ein- und ausgeblendet.
   Zum Zuruecknehmen: Block bis zum Endmarker loeschen. */
@media (max-width:1024px){
html body div.elementskit-menu-overlay.ekit-nav-menu--overlay{left:0 !important;top:0 !important;width:100% !important;height:100% !important;opacity:0 !important;pointer-events:none !important;transition:opacity .3s ease !important}
html body div.elementskit-menu-overlay.ekit-nav-menu--overlay.active{opacity:1 !important;pointer-events:auto !important}
}
/* ===== Ende np-overlay-fade ===== */

/* ===== np-feinschliff — Formular, Shopnav, Footer (26.08.2026) =====
   1) Auswahlfeld hatte einen eigenen dunklen Rahmen INNERHALB des
      Feld-Wrappers — dadurch doppelter Kasten und schmaleres Feld.
      Der Wrapper traegt die Optik, das Select selbst wird neutral.
   2) Datumsfeld und Select-Wrapper auf 52 px wie alle anderen Felder.
   3) Kategorieleiste der Produktseite bekommt mobil denselben
      Seitenabstand wie der uebrige Inhalt (30 px).
   4) Footer-Links mobil auf rund 44 px Tippflaeche.
   Zum Zuruecknehmen: Block bis zum Endmarker loeschen. */
html body .elementor-select-wrapper select.elementor-field-textual{border:0 !important;padding:0 !important;height:auto !important;min-height:0 !important;background-color:transparent !important;width:100% !important;font-size:16px !important}
html body .elementor-field.elementor-select-wrapper{height:52px !important;align-items:center !important}
html body input.elementor-field.elementor-field[type="date"]{height:52px !important}
@media (max-width:1024px){
html body .np-shopnav.np-shopnav.np-shopnav{padding-left:30px !important;padding-right:30px !important}
}
@media (max-width:768px){
html body footer .elementor-icon-list-item.elementor-icon-list-item > a{padding-top:10px !important;padding-bottom:10px !important}
}
/* ===== Ende np-feinschliff ===== */

/* ===== np-rundung — Eingabefelder und Produkt-Thumbnails (26.08.2026) =====
   Eingabefelder standen auf 0 px, das Shop-Suchfeld auf 12 px, Karten auf 20 px.
   Alle Eingabefelder jetzt auf 12 px, passend zum Suchfeld.
   HINWEIS: Die 0 px kommen aus Elementor > Website-Einstellungen >
   Theme Style > Formularfelder > Rahmenradius. Dort dauerhaft auf 12 setzen,
   dann kann dieser Block hier ersatzlos weg.

   Thumbnails standen auf object-fit:fill — nicht quadratische Fotos wurden
   dadurch verzerrt statt beschnitten. Jetzt cover mit einheitlicher Flaeche.
   Zum Zuruecknehmen: Block bis zum Endmarker loeschen. */
html body .elementor-field-group .elementor-field.elementor-field{border-radius:12px !important}
html body .elementor-field-group .elementor-field-textual.elementor-field-textual{border-radius:12px !important}
html body .flex-control-thumbs li img{object-fit:cover !important;background:#F5F5F7 !important;border-radius:12px !important}
/* ===== Ende np-rundung ===== */



/* NP-KACHEL-HOEHE */
/* Kategoriekacheln im Mietshop auf einheitliche Hoehe.
   Hintergrund: Bilder mit npcat-Ableitungen werden quadratisch ausgegeben, alle
   anderen fallen auf 1:1.155 zurueck und werden dadurch hoeher. Die Klassenzahl
   im Selektor muss die Theme-Regel uebertreffen, sonst greift sie nicht.
   Zum Zuruecknehmen: diesen Block bis zum Ende-Marker loeschen. */
html body ul.products li.product-category.product img{
  aspect-ratio:1 / 1 !important;
  width:100% !important;
  height:auto !important;
  object-fit:cover !important;
}
/* NP-KACHEL-HOEHE-ENDE */

/* ==========================================================================
   97. APPLE-DESIGN: Reaktion, Material, Typo-Feinheiten, Barrierefreiheit
   Baut auf Abschnitt 1–96 auf. Zum Zuruecknehmen: diesen Block loeschen.
   Grundlage: Apple "Designing Fluid Interfaces", "UI Typography",
   "Principles of Great Design" – fuer das Web uebersetzt.
   ========================================================================== */

:root{
  /* Kurve, die einer kritisch gedaempften Feder nahekommt (kein Ueberschwingen).
     Fuer alles, was der Nutzer nicht "geworfen" hat. */
  --np-spring:cubic-bezier(.32,.72,0,1);
  --np-spring-t:.45s;
  --np-press:.97;
}

/* ---------- 97.1 Rueckmeldung beim Druecken, nicht erst beim Loslassen ----------
   :active greift beim Herunterdruecken. Rein geht es schnell (100 ms),
   raus federt es zurueck. Hover-Anhebung bleibt, Druck gewinnt. */
html{-webkit-tap-highlight-color:transparent}

.elementor-button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.wc-block-components-button,.wp-element-button,.wc-block-cart__submit-button,
.np-btn-hell,.np-btn-linie,form.np-suche button,.np-slider-nav button{
  transition:transform var(--np-spring-t) var(--np-spring),
             background-color .2s ease,color .2s ease,border-color .2s ease,
             opacity .2s ease!important;
}
.elementor-button:active,
.woocommerce a.button:active,.woocommerce button.button:active,.woocommerce input.button:active,
.wc-block-components-button:active,.wp-element-button:active,.wc-block-cart__submit-button:active,
.np-btn-hell:active,.np-btn-linie:active,form.np-suche button:active,.np-slider-nav button:active{
  transform:scale(var(--np-press))!important;
  transition-duration:.1s!important;
  transition-timing-function:ease-out!important;
}

/* Kacheln: sanfter Druck, damit klar ist, dass die ganze Flaeche klickbar ist */
.np-klickkachel,
.woocommerce ul.products li.product{
  transition:transform var(--np-spring-t) var(--np-spring),
             box-shadow var(--np-spring-t) var(--np-spring)!important;
}
.np-klickkachel:active,
.woocommerce ul.products li.product:active{
  transform:scale(.985)!important;
  transition-duration:.12s!important;
}

/* Navigation: Druckzustand statt toter Klick */
.elementor-location-header .elementskit-navbar-nav > li > a{transition:opacity .2s ease}
.elementor-location-header .elementskit-navbar-nav > li > a:active{opacity:.55}

/* ---------- 97.2 Kopfzeile: Kante nur, wenn Inhalt darunter liegt ----------
   Statt einer festen Trennlinie erscheint die Kante erst, sobald gescrollt
   wird (Klasse np-gescrollt kommt aus dem Script). Oben auf der Seite
   schwebt die Kopfzeile ohne Strich. */
.elementor-location-header > .e-con::before,
.elementor-location-header > .elementor-element::before,
header.elementor-location-header .elementor-sticky{
  border-bottom-color:transparent!important;
  transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease!important;
}
html.np-gescrollt .elementor-location-header > .e-con::before,
html.np-gescrollt .elementor-location-header > .elementor-element::before,
html.np-gescrollt header.elementor-location-header .elementor-sticky{
  border-bottom-color:rgba(0,0,0,.08)!important;
  box-shadow:0 6px 24px -12px rgba(0,0,0,.12);
}

/* ---------- 97.3 Typografie: Laufweite und Zeilenabstand je Groesse ----------
   Grosse Schrift enger, kleine Schrift minimal weiter. Kleine Ueberschriften
   brauchen mehr Zeilenabstand als grosse. */
h1,h2,h3,h4,.elementor-heading-title{font-optical-sizing:auto}

/* 17–22 px Ueberschriften: 1.1 war zu eng fuer zweizeilige Titel */
h3.elementor-heading-title,
.np-klickkachel .elementor-heading-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  line-height:1.28!important;
}
/* Kleintext (Hinweise, Brotkrumen, Pflichtangaben): leicht gesperrt */
.woocommerce-breadcrumb,
.wc-gzd-additional-info,
.woocommerce .woocommerce-result-count,
.np-projekt-ort,
.elementor-location-footer .elementor-widget-text-editor,
.elementor-location-footer .elementor-icon-list-text,
small{
  letter-spacing:.01em!important;
}
/* Fliesstext: Hurenkinder vermeiden */
.elementor-widget-text-editor p{text-wrap:pretty}

/* ---------- 97.4 Seitenwarenkorb: abdunkeln, um zu fokussieren ----------
   Der Warenkorb ist eine Aufgabe, die den Rest pausiert: Hintergrund wird
   abgedunkelt und leicht weichgezeichnet. Das Panel kommt rechts herein und
   geht rechts wieder hinaus, mit Federkurve statt linearer Zeit. */
.elementor-menu-cart__container{
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
  transition:background-color .35s ease,backdrop-filter .35s ease,
             -webkit-backdrop-filter .35s ease,transform 0s .45s!important;
}
.elementor-menu-cart--shown .elementor-menu-cart__container{
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  transition:background-color .35s ease,backdrop-filter .35s ease,
             -webkit-backdrop-filter .35s ease,transform 0s!important;
}
.elementor-menu-cart__main{
  transition:transform var(--np-spring-t) var(--np-spring),
             opacity .3s ease!important;
}

/* ---------- 97.5 Bilderkarussell: greifbar ----------
   Am Rechner mit der Maus ziehbar (Script), am Handy bleibt das native
   Wischen mit Schwung. Seitliches Ueberscrollen zieht nicht die Seite mit. */
.np-slider{overscroll-behavior-x:contain}
@media (hover:hover) and (pointer:fine){
  .np-slider{cursor:grab}
  .np-slider.np-zieht{cursor:grabbing;scroll-snap-type:none!important;scroll-behavior:auto!important}
  .np-slider.np-zieht img{pointer-events:none}
  .np-slider.np-federt{scroll-snap-type:none!important;scroll-behavior:auto!important}
  /* Gummiband am Anfang und Ende: Bilder geben nach statt hart zu stoppen */
  .np-slider > .np-slide{transform:translateX(var(--np-gummi,0px))}
}
.np-slide img{-webkit-user-drag:none;user-select:none}

/* ---------- 97.6 Weniger Bewegung ----------
   Keine Skalierung, keine Federn – aber weiterhin Rueckmeldung,
   nur ueber Deckkraft statt ueber Bewegung. */
@media (prefers-reduced-motion:reduce){
  .elementor-button:active,
  .woocommerce a.button:active,.woocommerce button.button:active,.woocommerce input.button:active,
  .wc-block-components-button:active,.wp-element-button:active,.wc-block-cart__submit-button:active,
  .np-btn-hell:active,.np-btn-linie:active,form.np-suche button:active,.np-slider-nav button:active,
  .np-klickkachel:active,.woocommerce ul.products li.product:active{
    transform:none!important;opacity:.7;
  }
  .np-klickkachel:hover,.woocommerce ul.products li.product:hover,
  .elementor-button:hover{transform:none!important}
  .elementor-menu-cart__main{transition:opacity .2s ease!important}
  .np-slider{scroll-behavior:auto!important}
}

/* ---------- 97.7 Weniger Transparenz ----------
   Glas wird zu einer festen Flaeche, Weichzeichner aus. */
@media (prefers-reduced-transparency:reduce){
  .elementor-location-header > .e-con::before,
  .elementor-location-header > .elementor-element::before,
  header.elementor-location-header .elementor-sticky,
  .elementor-location-header{
    background:#fff!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .elementor-menu-cart__container,
  .elementor-menu-cart--shown .elementor-menu-cart__container{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}

/* ---------- 97.8 Mehr Kontrast ----------
   Feste Flaechen, klare Kanten, kein Hellgrau fuer Text. */
@media (prefers-contrast:more){
  :root{--np-muted:#3a3a3c}
  .elementor-location-header > .e-con::before,
  .elementor-location-header > .elementor-element::before,
  header.elementor-location-header .elementor-sticky{
    background:#fff!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    border-bottom:1px solid #1d1d1f!important;
  }
  .elementor-widget-text-editor,.elementor-widget-text-editor p{color:#3a3a3c!important}
  .woocommerce ul.products li.product,.np-klickkachel{outline:1px solid rgba(0,0,0,.35)}
}