/* =========================================================
   0) BODY NEUTRAL – KEINE GLOBALEN HINTERGRÜNDE
   ========================================================= */
body {
  background: none;
}



/* =========================================================
   1) STANDARD-SEITEN MIT DOTS
   (Home, Rechtstexte, Kontakt, normale Pages)
   ========================================================= */

body.home,
body.page:not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout),
body.post-type-archive-product {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
  background-repeat: repeat;
  background-size: 18px 18px;
}




/* =========================================================
   2) PUZZLE-BÄNDER – KEINE EIGENEN BACKGROUNDS
   ========================================================= */

.pano-row,
.pano-row .elementor-loop-container,
.pano-row .e-loop-item {
  background: transparent !important;
}



/* =========================================================
   3) EINZELPRODUKT – HELLE VERSION
   ========================================================= */

body.single-product:not(.product_cat-dark) {
  background-color: #ffffff;
  background-image: url("https://lademeister.co/wp-content/uploads/2026/03/Hintergrundstruktur_hell2.svg");
  background-repeat: repeat;
  background-size: 200px auto;
  background-position: top left;
}





/* =========================================================
   5) ELEMENTOR – DURCHLÄSSIG, ABER KONTROLLIERT
   ========================================================= */

body.single-product .elementor-section,
body.home .elementor-section {
  background-color: transparent;
  box-shadow: none;
}



/* =========================================================
   PRODUCT ARCHIVE – DOTS (ELEMENTOR-SICHER)
   ========================================================= */

body.post-type-archive-product .lademeister-puzzle-wrapper,
body.tax-product_cat .lademeister-puzzle-wrapper {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
  background-repeat: repeat;
  background-size: 18px 18px;
}




/* =========================================================
   Bezahlt ansicht
   ========================================================= */


.woocommerce-order-received h1 {
  font-size: 3rem;
  letter-spacing: 0.05em;
}

.woocommerce-order-overview {
  background: rgba(0,0,0,0.03);
  padding: 2rem;
  border-radius: 12px;
}












/* =======================================================================
   GLOBAL CLEAN v1 — Lademeister  (FIXED)
   - mobile/tablet: keine opacity-Zwangsregeln mehr ? GSAP kann einflackern
   - Band/Shortcode: nur EIN robuster Overlap-Block (keine Duplikate)
   ======================================================================= */
:root{
  --lm-panel-br: 20px 20px 70px 0;  /* Ecken: TL TR BR BL */
  --lm-panel-w:  260px;             /* Panel-/Drawer-Breite */
  --lm-panel-pad: 24px;             /* Innenabstand */
}

/* ========== 0) Basisschrift / Menüpunkte ========== */
.iksm-term__text{
  font-family:'Inter',sans-serif!important;
  font-size:15px!important; line-height:1.2!important; font-weight:600;
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<Kontaktseite (hell) --deaktiviert <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* 
body.page-id-8545 .menu-holo.iks-menu,
body.page-id-8545 .menu-holo.iks-menu *,
body.page-id-8545 .menu-holo.iks-menu .iksm-term__text,
body.page-id-8545 .menu-holo.iks-menu .iksm-term__link,
body.page-id-8545 .menu-holo.iks-menu .iksm-term__toggle{
  color:#fff!important;
  fill:#fff!important;
  border-color:#fff!important;
}
*/
body.page-id-8545 a.iksm-term__link[href="https://lademeister.co/"] span.iksm-term__text::after{ color:#ddd!important; }
body.page-id-8545 a.iksm-term__link[href="https://lademeister.co/"]:hover span.iksm-term__text::after{ color:#fff!important; }

/* Menü allgemein */
.iksm-term__link{ color:#000!important; }
.iksm-term{ margin-bottom:0; }
.iksm-term__inner,.iksm-term__label,.iksm-term__text,.iksm-term__toggle,.iksm-term{
  margin:0!important; padding:0!important; line-height:1.1!important;
}
.iksm-term__label{ min-height:auto!important; }
.iksm-term__inner{ display:flex; align-items:center; gap:0!important; }

/* Toggle-Pfeile */
.iksm-term__toggle,
.iksm-terms-tree--level-2 .iksm-term__toggle,
.iksm-terms-tree--level-3 .iksm-term__toggle,
.iksm-terms-tree--level-4 .iksm-term__toggle{
  color:#000!important; fill:#000!important; border-color:#000!important;
  mix-blend-mode:normal!important; opacity:1!important; position:relative!important; z-index:99!important;
}
.iksm-term__toggle:hover{ color:#000!important; fill:#000!important; border-color:#000!important; }

/* ========== 1) Menü-Panel (Holo/Glas) ========== */
.menu-holo.iks-menu{
  position:relative; z-index:10; width:260px!important; max-width:none!important; min-width:100px;
  margin:40px 0 0 20px; padding:24px; border-radius:16px; overflow:hidden;
  background:rgba(105,105,105,.08);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.menu-holo.iks-menu *{ position:relative; z-index:10; color:#000; opacity:1; mix-blend-mode:normal; }
@media (max-width:767px){
  .menu-holo.iks-menu{ width:90%!important; margin-left:5%; margin-right:5%; }
}

/* Holo-Animation (einmalig definierte Keyframes) */
@keyframes moveStripe1{
  0%{background-position:30px 0,700px 0}25%{background-position:400px 0,700px 0}
  50%{background-position:150px 0,700px 0}75%{background-position:700px 0,700px 0}
  100%{background-position:30px 0,700px 0}
}
@keyframes moveStripe2{
  0%,100%{background-position:800px 0,0 0,0 0,0 0,0 0,0 0,0 0}
  30%{background-position:150px 0,0 0,0 0,0 0,0 0,0 0,0 0}
  60%{background-position:750px 0,0 0,0 0,0 0,0 0,0 0,0 0}
}
@keyframes flashStripe3{
  0%,10%,90%,100%{background-size:1px 100%,0 0}
  20%,50%,75%{background-size:1px 100%,1px 100%}
  25%,55%,80%{background-size:1px 100%,0 0}
}
@keyframes holoShift{0%{background-position:0% 0%}50%{background-position:30% 70%}100%{background-position:0% 0%}}
@keyframes flickerGlitch{
  0%{opacity:.5}5%{opacity:.6}15%{opacity:.1}25%{opacity:.35}40%{opacity:.88}
  55%{opacity:.9}70%{opacity:1}90%{opacity:.95}100%{opacity:.6}
}
.menu-holo.iks-menu::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.3; mix-blend-mode:screen;
  background:
    linear-gradient(to bottom,rgba(0,255,0,0) 0%,rgba(0,255,0,.8) 50%,rgba(0,255,0,0) 100%) no-repeat,
    linear-gradient(to right, rgba(0,255,0,0) 0%,rgba(0,255,0,.5) 50%,rgba(0,255,0,.5) 100%) no-repeat;
  background-size:.2px 100%, .2px 100%;
  background-position:30px 0, 700px 0;
  animation:moveStripe1 24s ease-in-out infinite, flashStripe3 60s ease-in-out infinite;
}
.menu-holo.iks-menu::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.9; mix-blend-mode:screen;
  background:
    linear-gradient(to bottom,rgba(0,255,0,0) 0%,rgba(0,255,0,.5) 60%,rgba(0,255,0,0) 100%) no-repeat,
    repeating-linear-gradient(90deg, rgba(0,255,0,.07) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,0,64,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, rgba(0,255,0,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(to bottom, rgba(255,0,64,.03) 0 1px, transparent 1px 6px),
    radial-gradient(at 20% 20%, rgba(255,255,200,.2), transparent 60%),
    radial-gradient(at 80% 40%, rgba(128,255,192,.25), transparent 80%),
    radial-gradient(at 25% 95%, rgba(200,128,255,.15), transparent 70%),
    radial-gradient(at 25% 85%, rgba(100,180,255,.2), transparent 70%);
  background-size:1px 100%,auto,auto,auto,auto,auto,auto,auto,auto;
  animation:moveStripe2 30s ease-in-out infinite, holoShift 14s ease-in-out infinite, flickerGlitch 1.2s steps(6) infinite;
}

/* ========== 2) Elementor & Grundlayout / Szene ========== */
html,body{ margin:0; padding:0; overflow-x:hidden; }
.elementor-header{ position:relative; z-index:1000!important; background:transparent!important; }
.container-hintergrund{ position:relative; z-index:1!important; background:transparent!important; }
.elementor-widget-image img,.elementor-widget-image{ filter:none!important; backdrop-filter:none!important; mix-blend-mode:normal!important; z-index:auto!important; }
.elementor-widget-container{ width:fit-content!important; max-width:unset!important; padding:0!important; margin:0!important; display:block!important; }
.elementor-shortcode{ width:100%!important; display:block!important; }

/* Szene 1 (Start) */
.miri-start-obercontainer{ height:190vh; position:relative; }
.miri-start-untercontainer{ height:100vh; position:sticky; top:0; overflow:hidden; isolation:isolate; }
.miri-start{ width:100%; height:100%; position:relative; }
.miri-start img{ position:fixed; opacity:0; pointer-events:none; height:auto; z-index:0; }
.bild-1{ width:500px; top:70%; left:60%; transform:translate(-50%,-50%); }
.bild-2{ width:600px; top:65%; left:70%; transform:translate(-50%,-50%); }

/* Shop-Bereich (liegt unter Hero, wird via JS/Body-Klasse gesteuert) */
.miri-shopbereich{
  width:100%!important; min-height:100vh!important; padding:0; margin:0;
  position:relative; display:block; background:transparent!important;
  z-index:600!important; isolation:isolate; transform:translateZ(0);
}
body.in-shop .bild-1,
body.in-shop .bild-2,
body.in-shop .lademeister-logo{
  opacity:0!important; visibility:hidden!important;
}


/* Header immer vorn */
header,.site-header,#masthead,.elementor-header{ position:relative!important; z-index:5000!important; }

/* GSAP Spacer niemals Weiss */
.pin-spacer,.lm-pin-spacer{ background:transparent!important; }

/* ========== 3) Logo (SVG) & Flicker ========== */
:root{
  --logo-top:42%; --logo-left:79%; --logo-scale:.70;
  --logo-rotX:0deg; --logo-rotY:-28deg; --logo-rotZ:0deg; --logo-persp:520px;
  --logo-front:#fff; --glow-1:rgba(0,255,180,.95); --glow-2:rgba(0,255,180,.45); --glow-3:rgba(0,255,180,.28); --glow-mult:1;
}
.lademeister-logo{
  position:fixed; top:var(--logo-top); left:var(--logo-left);
  transform:translate(-50%,-50%) perspective(var(--logo-persp)) rotateX(var(--logo-rotX)) rotateY(var(--logo-rotY)) rotateZ(var(--logo-rotZ)) scale(var(--logo-scale));
  transform-origin:50% 90%; pointer-events:none; z-index:120;
}
.lademeister-logo svg{ overflow:visible; }
.lademeister-logo [id^="buchstabe-"]{
  fill:var(--logo-front);
  filter:drop-shadow(0 0 calc(1.6px*var(--glow-mult)) var(--glow-1))
         drop-shadow(0 0 calc(10px *var(--glow-mult)) var(--glow-2))
         drop-shadow(0 0 calc(18px *var(--glow-mult)) var(--glow-3));
  will-change:opacity,filter;
}
/* Flicker (einmalig) */
@keyframes flackerLeuchteSVG{
  0%{opacity:.2;filter:drop-shadow(0 0 calc(1.2px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(8px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(14px*var(--glow-mult)) var(--glow-3))}
  25%{opacity:.7;filter:drop-shadow(0 0 calc(1.4px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(12px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(18px*var(--glow-mult)) var(--glow-3))}
  50%{opacity:1; filter:drop-shadow(0 0 calc(1.8px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(16px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(24px*var(--glow-mult)) var(--glow-3))}
  75%{opacity:.7;filter:drop-shadow(0 0 calc(1.4px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(12px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(18px*var(--glow-mult)) var(--glow-3))}
  100%{opacity:1;filter:drop-shadow(0 0 calc(1.6px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(10px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(15px*var(--glow-mult)) var(--glow-3))}
}
.lad-hero-svg .flacker-svg,.lademeister-logo .flacker-svg{ animation:flackerLeuchteSVG 1s ease-in-out 3 forwards; }

/* SVG-Stage */
.lad-hero-svg{
  position:fixed; left:-1px; top:-1px; width:calc(100vw + 2px); height:100vh;
  display:block; pointer-events:none; z-index:0; background:transparent; overflow:visible!important;
}
@supports (height:100dvh){ .lad-hero-svg{ height:100dvh; } }
.elementor-section:has(.lad-hero-svg),
.elementor-container:has(.lad-hero-svg),
.e-con:has(.lad-hero-svg){
  transform:none!important; filter:none!important; perspective:none!important;
  margin:0!important; padding:0!important; max-width:100vw!important; width:100vw!important; background:transparent!important;
}
.lad-after-hero{ margin-top:0!important; padding-top:0!important; }

/* Transform-Eigenschaften aktivieren */
.lad-hero-svg .lademeister-logo,
.lad-hero-svg #model1,
.lad-hero-svg #model2{ transform-box:fill-box; transform-origin:center; }

/* Guard: solange data-armed="0" ? nichts blitzt */
.lad-hero-svg[data-armed="0"] .lademeister-logo [id^="buchstabe-"],
.lad-hero-svg[data-armed="0"] #model1,
.lad-hero-svg[data-armed="0"] #model2{ opacity:0!important; }

/* Responsives Finetuning (nur translate/scale) */
@media (max-width:1024px){
  .lad-hero-svg .lademeister-logo{ transform:translate(0,10px) scale(.95); }
  .lad-hero-svg #model1{ transform:translate(0,0) scale(.95); }
  .lad-hero-svg #model2{ transform:translate(0,0) scale(.95); }
}
@media (max-width:767px){
  .lad-hero-svg .lademeister-logo{ transform:translate(0,18px) scale(.9); }
  .lad-hero-svg #model1{ transform:translate(-20px,10px) scale(.9); }
  .lad-hero-svg #model2{ transform:translate(20px,10px) scale(.9); }
}
@media (max-width:767px){
  .lad-hero-svg .lademeister-logo{ transform:translate(0,24px) scale(.82); }
  .lad-hero-svg #model1{ transform:translate(-28px,16px) scale(.82); }
  .lad-hero-svg #model2{ transform:translate(28px,16px) scale(.82); }
}

/* ===== FIX ? Mobile/Tablet: KEINE opacity-Zwänge (GSAP steuert Intro) ==== */
@media (max-width:1024px){
  .lad-hero-svg, .lad-hero-svg *{
    display: initial !important;
    visibility: visible !important;
    /* keine opacity hier! */
  }
  /* zur Sicherheit explizit freigeben */
  .lad-hero-svg [id^="buchstabe-"],
  .lad-hero-svg #model1,
  .lad-hero-svg #model2{
    opacity: unset !important;
  }
}

/* ========== 5) Footer – nur im Shop sichtbar; Holo/Glas wie Menü ========== */
:root{ --footer-h:64px; }
footer,.site-footer,#colophon{
  position:relative; z-index:1200!important; isolation:isolate;
  background:rgba(105,105,105,.08);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.15);
  box-shadow:0 -6px 24px rgba(0,0,0,.2);
  color:#000;
}
footer *,.site-footer * ,#colophon *{ position:relative; z-index:10; color:#000; mix-blend-mode:normal; }
footer::before,.site-footer::before,#colophon::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.3; mix-blend-mode:screen;
  background:
    linear-gradient(to bottom,rgba(0,255,0,0) 0%,rgba(0,255,0,.8) 50%,rgba(0,255,0,0) 100%) no-repeat,
    linear-gradient(to right, rgba(0,255,0,0) 0%,rgba(0,255,0,.5) 50%,rgba(0,255,0,.5) 100%) no-repeat;
  background-size:.2px 100%, .2px 100%;
  background-position:40px 0, 80% 0;
  animation:moveStripe1 24s ease-in-out infinite, flashStripe3 60s ease-in-out infinite;
}
footer::after,.site-footer::after,#colophon::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.9; mix-blend-mode:screen;
  background:
    linear-gradient(to bottom,rgba(0,255,0,0) 0%,rgba(0,255,0,.5) 60%,rgba(0,255,0,0) 100%) no-repeat,
    repeating-linear-gradient(90deg, rgba(0,255,0,.07) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,0,64,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, rgba(0,255,0,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(to bottom, rgba(255,0,64,.03) 0 1px, transparent 1px 6px),
    radial-gradient(at 20% 20%, rgba(255,255,200,.2), transparent 60%),
    radial-gradient(at 80% 40%, rgba(128,255,192,.25), transparent 80%),
    radial-gradient(at 25% 95%, rgba(200,128,255,.15), transparent 70%),
    radial-gradient(at 25% 85%, rgba(100,180,255,.2), transparent 70%);
  background-size:1px 100%,auto,auto,auto,auto,auto,auto,auto,auto;
  animation:moveStripe2 30s ease-in-out infinite, holoShift 14s ease-in-out infinite, flickerGlitch 1.8s steps(6) infinite;
}
/* nur im Shop fix einblenden */
body.in-hero footer, body.in-hero .site-footer, body.in-hero #colophon{
  opacity:0!important; visibility:hidden!important; pointer-events:none!important;
}
body.in-shop footer, body.in-shop .site-footer, body.in-shop #colophon{
  position:fixed!important; left:0; right:0; bottom:0; z-index:1500!important;
}
footer a,.site-footer a,#colophon a{
  color:#000!important; text-decoration:none; font:600 14px/1.2 'Inter',sans-serif; border-bottom:1px dotted rgba(0,0,0,.35);
}
footer a:hover,.site-footer a:hover,#colophon a:hover{ border-bottom-color:rgba(0,0,0,.85); }
@media (max-width:767px){
  footer,.site-footer,#colophon{ padding:12px 14px; }
  footer a,.site-footer a,#colophon a{ font-size:13px; }
}

/* ========== 6) Burger „Pill“ & Drawer (mobiles Menü) ========== */
:root{
  --glass-bg:rgba(255,255,255,.14); --glass-border:rgba(255,255,255,.25); --glass-blur:16px;
  --shadow-panel:0 12px 40px rgba(0,0,0,.35);
  --shadow-ring:0 0 28px rgba(0,0,0,.18);
  --pulse-speed:5.5s; --bright-base:1; --contrast-base:1;
  --bright-hi:1.12; --contrast-hi:1.06; --bright-lo:.96; --contrast-lo:.99;
  --opacity-hi:.97; --opacity-mid:.93; --opacity-lo:.90;
  --backdrop-dim:.12;
  --pill-bg:rgba(255,255,255,.10); --pill-border:rgba(255,255,255,.22); --pill-blur:12px;
  --pill-ring:0 0 10px rgba(0,0,0,.10);
  --pill-shadow-1:0 6px 14px -8px rgba(0,0,0,.20);
  --pill-shadow-2:0 2px 6px -2px rgba(0,0,0,.12);
}
@keyframes lmPulseMenu{
  0%{filter:brightness(var(--bright-base)) contrast(var(--contrast-base));opacity:var(--opacity-lo)}
  16%{filter:brightness(var(--bright-hi)) contrast(var(--contrast-hi));opacity:var(--opacity-hi)}
  32%{filter:brightness(var(--bright-lo)) contrast(var(--contrast-lo));opacity:var(--opacity-lo)}
  60%{filter:brightness(var(--bright-hi)) contrast(var(--contrast-hi));opacity:var(--opacity-hi)}
  84%{filter:brightness(var(--bright-lo)) contrast(var(--contrast-lo));opacity:var(--opacity-mid)}
  100%{filter:brightness(var(--bright-base)) contrast(var(--contrast-base));opacity:var(--opacity-lo)}
}
@keyframes lmStepFlickerMenu{
  0%{opacity:1}10%{opacity:.97}20%{opacity:1}30%{opacity:.96}40%{opacity:.99}
  55%{opacity:.95}70%{opacity:1}85%{opacity:.97}100%{opacity:1}
}

/* Desktop: kein Drawer */
@media (min-width:1025px){
  #lm-burger,.menu-backdrop{ display:none!important; }
  .menu-holo.iks-menu{
    position:static!important; transform:none!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important;
    left:auto!important; right:auto!important; width:auto!important; max-height:none!important; overflow:visible!important;
  }
}

/* Mobile/Tablet */
@media (max-width:1024px){
  #lm-burger{
    position:fixed!important; top:calc(12px + var(--adminbar-h,0px))!important; left:12px!important;
    width:80px!important; height:80px!important; display:flex!important; align-items:center!important; justify-content:center!important;
    border-radius:9999px!important; cursor:pointer; overflow:hidden!important; isolation:isolate!important; z-index:5200!important;
    background:var(--pill-bg)!important; border:1px solid var(--pill-border)!important;
    backdrop-filter:blur(var(--pill-blur))!important; -webkit-backdrop-filter:blur(var(--pill-blur))!important;
    box-shadow:var(--pill-ring),var(--pill-shadow-1),var(--pill-shadow-2), inset 0 1px 0 rgba(255,255,255,.2)!important;
  }
  #lm-burger:focus-visible{ outline:2px solid rgba(0,0,0,.6); outline-offset:2px; border-radius:9999px; }
  #lm-burger .bars, #lm-burger .bars::before, #lm-burger .bars::after{
    content:""; display:block; width:22px; height:2px; border-radius:2px; background:#0a0a0a; position:relative; z-index:3;
    transition:transform .25s ease, opacity .25s ease; opacity:.9;
  }
  #lm-burger .bars::before{ position:absolute; top:-6px; left:0; }
  #lm-burger .bars::after{ position:absolute; top:6px; left:0; }
  body.menu-open #lm-burger .bars{ transform:rotate(45deg); }
  body.menu-open #lm-burger .bars::before{ transform:translateY(6px) rotate(90deg); }
  body.menu-open #lm-burger .bars::after{ transform:translateY(-6px) rotate(90deg); opacity:0; }

  #lm-burger::before,#lm-burger::after{ content:""; position:absolute; inset:0; border-radius:inherit; mix-blend-mode:normal; }
  #lm-burger::before{
    z-index:1; opacity:.08;
    background:
      linear-gradient(to bottom, rgba(0,255,0,0) 0%, rgba(0,255,0,.45) 50%, rgba(0,255,0,0) 100%) no-repeat,
      linear-gradient(90deg, rgba(0,255,0,.45), rgba(0,255,0,0)) no-repeat;
    background-size:100% 100%, .2px 100%;
    animation:moveStripe1 20s ease-in-out infinite;
  }
  #lm-burger::after{
    z-index:2; opacity:.82;
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) no-repeat,
      repeating-linear-gradient(90deg, rgba(0,255,0,.04) 0 1px, transparent 1px 12px),
      repeating-linear-gradient( 0deg, rgba(0,255,0,.03) 0 1px, transparent 1px 10px),
      repeating-linear-gradient(to bottom, rgba(0,255,0,.035) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(to bottom, rgba(255,0,64,.028) 0 1px, transparent 1px 6px),
      radial-gradient(at 20% 20%, rgba(255,255,200,.08), transparent 60%),
      radial-gradient(at 80% 40%, rgba(128,255,192,.07), transparent 80%),
      radial-gradient(at 25% 95%, rgba(200,128,255,.06), transparent 70%),
      radial-gradient(at 25% 85%, rgba(100,180,255,.07), transparent 70%);
    background-size:100% 140%, 1px 100%, auto, auto, auto, auto, auto, auto, auto;
    animation: lmPulseMenu var(--pulse-speed) ease-in-out infinite,
               lmStepFlickerMenu 2.1s steps(6) infinite,
               moveStripe2 14s ease-in-out infinite,
               holoShift 10s ease-in-out infinite!important;
    filter:brightness(1) contrast(1);
  }

  .menu-holo.iks-menu,
  .lm-portal.menu-holo.iks-menu{
    position:fixed!important; top:calc(64px + var(--adminbar-h,0px))!important; left:12px!important;
    width:260px!important; max-width:92vw!important; max-height:72vh!important; overflow:auto!important;
    z-index:5100!important; isolation:isolate!important; border-radius:16px!important; box-sizing:border-box!important;
    background:var(--glass-bg)!important; border:1px solid var(--glass-border)!important;
    backdrop-filter:blur(var(--glass-blur))!important; -webkit-backdrop-filter:blur(var(--glass-blur))!important;
    box-shadow:0 6px 16px -6px rgba(0,0,0,.26), 0 1px 4px -1px rgba(0,0,0,.16)!important;
    transform:translateY(-16px) scale(.98)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important;
    transition:transform .28s ease, opacity .28s ease, visibility 0s .28s!important; background-clip:padding-box!important;
  }
  body.menu-opening .menu-holo.iks-menu{ transform:translateY(-16px) scale(.98)!important; opacity:.001!important; visibility:visible!important; pointer-events:none!important; }
  body.menu-open .menu-holo.iks-menu{ transform:translateY(0) scale(1)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; }

  .menu-holo.iks-menu::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; opacity:.35;
    background:
      linear-gradient(to bottom, rgba(0,255,0,0) 0%, rgba(0,255,0,.85) 50%, rgba(0,255,0,0) 100%) no-repeat,
      linear-gradient(to right, rgba(0,255,0,.65) 0%, rgba(0,255,0,0) 100%) no-repeat;
    background-size:.2px 100%, .2px 100%; animation:moveStripe1 24s ease-in-out infinite;
  }
  .menu-holo.iks-menu::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none; opacity:.95;
    background:
      linear-gradient(to bottom, rgba(0,255,0,0) 0%, rgba(0,255,0,.55) 60%, rgba(0,255,0,0) 100%) no-repeat,
      repeating-linear-gradient(90deg, rgba(0,255,0,.10) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(90deg, rgba(255,0,64,.08) 0 1px, transparent 1px 14px),
      repeating-linear-gradient(to bottom, rgba(0,255,0,.07) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(to bottom, rgba(255,0,64,.05) 0 1px, transparent 1px 6px),
      radial-gradient(at 20% 20%, rgba(255,255,200,.24), transparent 60%),
      radial-gradient(at 80% 40%, rgba(128,255,192,.28), transparent 80%),
      radial-gradient(at 25% 95%, rgba(200,128,255,.20), transparent 70%),
      radial-gradient(at 25% 85%, rgba(100,180,255,.24), transparent 70%);
    background-size:1px 100%, auto, auto, auto, auto, auto, auto, auto, auto;
  }
  body.menu-open .menu-holo.iks-menu::after{
    animation: lmPulseMenu 4.2s ease-in-out infinite, lmStepFlickerMenu 1.8s steps(7) infinite,
               moveStripe2 30s ease-in-out infinite, holoShift 14s ease-in-out infinite!important;
    filter:brightness(1) contrast(1);
  }

  .menu-backdrop{
    position:fixed!important; inset:0!important; z-index:5090!important;
    background:rgba(0,0,0,var(--backdrop-dim))!important;
    opacity:0!important; pointer-events:none!important; transition:opacity .2s ease!important;
  }
  body.menu-open .menu-backdrop{ opacity:1!important; pointer-events:auto!important; }

  @media (prefers-reduced-motion:reduce){
    #lm-burger::before,#lm-burger::after,.menu-holo.iks-menu::before,.menu-holo.iks-menu::after{ animation:none!important; }
    .menu-holo.iks-menu,#lm-burger .bars{ transition:none!important; }
  }
}

/* ========== 7) Exclamation mark bei H3IM-Link ========== */
span.iksm-term__text{ position:relative; z-index:5; }
a.iksm-term__link[href="https://lademeister.co/"] span.iksm-term__text::after{
  content:"!"; position:absolute; top:-.15em; right:-.60em; font-family:'Inter',sans-serif; font-weight:700; font-size:1.1em;
  color:#000; opacity:0; transition:all .3s ease; pointer-events:none;
}
a.iksm-term__link[href="https://lademeister.co/"]:hover span.iksm-term__text::after{ opacity:1; transform:rotate(0) scale(1.05); color:#000; }

/* ========== 8) Pano-Grid (unverändert) ========== */
.pano-wrap{ width:100vw; max-width:100vw; margin:0 auto; padding:0; }
.pano-grid{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:0; }
.pano-item{ aspect-ratio:16/9; overflow:hidden; }
.pano-item>img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
@media (max-width:1200px){ .pano-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:900px){  .pano-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){  .pano-grid{ grid-template-columns:1fr; } }

/* =======================================================================
   BAND/SHORTCODE: robustes Overlap (einziger aktiver Block)
   ======================================================================= */
:root{
  --band-h: 16vh;
  --band-overlap: calc(var(--band-h) * .58);
}
@media (max-width:1024px){
  :root{ --band-h: 13vh; --band-overlap: calc(var(--band-h) * .56); }
}
@media (max-width:767px){
  :root{ --band-h: 10vh; --band-overlap: calc(var(--band-h) * .54); }
}

/* Band full-bleed – Eltern clippen nicht */
#lm-band,
#lm-claim2,
#lm-claim2 > .elementor-widget-container{
  position:relative!important;
  left:50%!important; right:50%!important;
  margin-left:-50vw!important; margin-right:-50vw!important;
  width:100vw!important; max-width:100vw!important;
  height:var(--band-h)!important;
  box-sizing:border-box!important;
  z-index:1100!important; pointer-events:none!important;
}
#lm-band img{
  display:block!important; width:100%!important; height:100%!important;
  object-fit:cover!important; object-position:top center!important;
}
#lm-band svg{
  display:block!important; width:100%!important; height:100%!important; overflow:visible!important;
}

.abschnitt_hero_wrap{ background:transparent!important; overflow:visible!important; padding:0!important; }
.abschnitt_hero_wrap > .elementor-container,
.abschnitt_hero_wrap > .e-con{
  width:100%!important; max-width:100%!important;
  justify-content:flex-start!important; align-items:stretch!important;
  --e-con-grid-gap:0px!important;
}

/* Folgeabschnitt unters Band ziehen – robust gegen Wrapper */
#lm-band ~ .miri-shopbereich.shop-hero-bg,
.abschnitt_hero_wrap + .miri-shopbereich.shop-hero-bg,
.abschnitt_hero_wrap ~ .miri-shopbereich.shop-hero-bg{
  margin-top: calc(-1 * var(--band-overlap)) !important;
  padding-top: 0 !important;
  --e-con-grid-gap: 0px;
  background: transparent !important;
}

/* Innenabstände & IMG-Baseline killen */
.miri-shopbereich.shop-hero-bg > .elementor-container,
.miri-shopbereich.shop-hero-bg > .e-con,
.miri-shopbereich.shop-hero-bg .e-con-inner,
.miri-shopbereich.shop-hero-bg .elementor-column > .elementor-widget-wrap{
  margin-top:0!important; padding-top:0!important;
}
.miri-shopbereich.shop-hero-bg .elementor-image,
.miri-shopbereich.shop-hero-bg .elementor-widget-image{ line-height:0!important; }
.miri-shopbereich.shop-hero-bg img{ display:block; margin:0; padding:0; border:0; }

/* === Logo-letters: erlaube die SVG-eigene Flicker-Animation ==== */
.lad-hero-svg .lademeister-logo [id^="buchstabe-"].flacker-svg{
  animation: lmLetterFlicker 1.1s steps(6) 1 both !important;
}





/* =========================================
   Hier waren HERO (BG + LOGO + MODELS) alz — nun neu weiter unten !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   ========================================= */










































































/* =========================================================
   LM ? BAND x SHORTCODE — Lite Overlap + sauberes Stacking
   (Drop-in-Override: ans ENDE deiner globalen CSS)
   ========================================================= */

/* 0) Bandhöhe + „sichtbarer Überlapp“ angenehm niedrig halten */
:root{
  --band-h: 16vh;
  --band-overlap: 8vh;     /* war zu stark ? jetzt „lite“ */
}
@media (max-width: 1024px){
  :root{
    --band-h: 13vh;
    --band-overlap: 6.5vh;
  }
}
@media (max-width: 767px){
  :root{
    --band-h: 10vh;
    --band-overlap: 5vh;
  }
}

/* 1) Hero-Abschnitt (der das Band enthält) liegt über dem Shortcode */
.abschnitt_hero_wrap{
  position: relative !important;
  z-index: 50 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* 2) Das Band selbst: full-bleed, definierte Höhe, klicktransparent */
#lm-band,
#lm-claim2,
#lm-claim2 > .elementor-widget-container{
  position: relative !important;
  z-index: 60 !important;                 /* vor dem Shortcode, aber noch „im Hero“ */
  pointer-events: none !important;        /* blockiert keine Klicks darunter */
  left: 50% !important; right: 50% !important;
  margin-left: -50vw !important; margin-right: -50vw !important;
  width: 100vw !important; max-width: 100vw !important;
  height: var(--band-h) !important;
  box-sizing: border-box !important;
}

/* Band-Inhalt skaliert „cover“, damit es nicht „breiter“ wirkt */
#lm-band img,
#lm-band svg{
  display: block !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  overflow: visible !important;
}

/* 3) Shortcode-Abschnitt: unter das Band ziehen – ABER moderat */
.miri-shopbereich.shop-hero-bg{
  position: relative !important;
  z-index: 10 !important;                  /* sicher unter dem Band */
  margin-top: calc(-1 * var(--band-overlap)) !important;
  padding-top: 0 !important;
  --e-con-grid-gap: 0px;
  overflow: visible !important;
}

/* (Falls zuvor irgendwo pauschal hoher z-index gesetzt wurde) */
.miri-shopbereich.shop-hero-bg *{
  z-index: auto !important;                /* neutralisiert frühere 500er etc. */
}

/* Erste Innencontainer: keine künstlichen Abstände oben */
.miri-shopbereich.shop-hero-bg > .elementor-container,
.miri-shopbereich.shop-hero-bg > .e-con,
.miri-shopbereich.shop-hero-bg .e-con-inner,
.miri-shopbereich.shop-hero-bg .elementor-column > .elementor-widget-wrap{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* IMG-Baseline-Gap entfernen (sonst wirkt es, als ob „Stück fehlt“) */
.miri-shopbereich.shop-hero-bg .elementor-image,
.miri-shopbereich.shop-hero-bg .elementor-widget-image{ line-height: 0 !important; }
.miri-shopbereich.shop-hero-bg img{
  display: block !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}

/* OPTIONAL ? leichte „Ausklinkung“ an der Unterkante des Bandes
   (wenn du eine optische Kerbe/Fade willst – sonst auslassen)
#lm-band{
  -webkit-mask-image: radial-gradient(120% 18px at 50% 100%, transparent 98%, #000 100%);
  mask-image: radial-gradient(120% 18px at 50% 100%, transparent 98%, #000 100%);
}
*/


/* SHORTCODE BAND NAVIGATION */

:root{
  /* z.B. von .58 auf .66 erhöhen */
  --band-h: 16vh;
  --band-overlap: calc(var(--band-h) * .66);
}
@media (max-width:1024px){
  :root{ --band-h: 13vh; --band-overlap: calc(var(--band-h) * .64); }
}
@media (max-width:767px){
  :root{ --band-h: 10vh; --band-overlap: calc(var(--band-h) * .62); }
}







/* --- STACK: Template (Shopbereich) ÜBER dem Band --- */
#lm-band,
#lm-claim2,
#lm-claim2 > .elementor-widget-container{
  z-index: 20 !important;          /* Band tiefer */
  pointer-events: none !important;  /* bleibt klicktransparent */
}

.miri-shopbereich.shop-hero-bg{
  z-index: 60 !important;           /* Template darüber */
  margin-top: 0 !important;         /* NICHT mehr unters Band ziehen */
  padding-top: 0 !important;
}

/* Optional: Template exakt UNTER der Band-Unterkante beginnen lassen */
:root{
  /* Bandhöhe moderat halten, kein „hartes“ Überziehen */
  --band-h: 16vh;
  --band-overlap: 0vh;              /* 0 = kein Überlappen */
}





/* Footer NIE ausblenden – auch im Hero sichtbar */
body.in-hero footer,
body.in-hero .site-footer,
body.in-hero #colophon{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Über allen Overlays halten (Menü-Backdrop etc.) */
footer,.site-footer,#colophon{
  z-index: 6000 !important;
}





/* === FOOTER: kompakter === */
footer, .site-footer, #colophon{
  padding: 8px 14px !important;     /* vorher vermutlich mehr */
  font-size: 13px !important;
  line-height: 1.25 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Falls du ihn im Shop fix positionierst, Höhe nicht hart erzwingen: */
body.in-shop footer,
body.in-shop .site-footer,
body.in-shop #colophon{
  height: auto !important;
}




/* === BAND & TEMPLATE: bündig, keine Kante === */
#lm-band,
#lm-claim2,
#lm-claim2 > .elementor-widget-container{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Template/Shop-Start – direkt an die Band-Unterkante kleben */
.miri-shopbereich.shop-hero-bg,
.miri-shopbereich.shop-hero-bg > .elementor-container,
.miri-shopbereich.shop-hero-bg .elementor-section:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  background: transparent !important; /* keine fremde Linie */
}

/* Falls irgendein erstes Puzzle selbst Top-Abstand/Borders hat: */
.miri-shopbereich.shop-hero-bg .pano-puzzle:first-of-type{
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* — Option A: exaktes Anliegen (Standard) — */
.miri-shopbereich.shop-hero-bg{ margin-top: 0 !important; }

/* — Option B: mini Überlappung, falls noch Haarlinie sichtbar — */
/* Kommentierung entfernen, wenn du die Linie siehst: */
/* .miri-shopbereich.shop-hero-bg{ margin-top: -1px !important; } */






/* =======================================================================
   GLOBAL CLEAN v1 — Lademeister  (FIXED)
   - mobile/tablet: keine opacity-Zwangsregeln mehr ? GSAP kann einflackern
   - Band/Shortcode: nur EIN robuster Overlap-Block (keine Duplikate)
   ======================================================================= */

/* ========== 0) Basisschrift / Menüpunkte ========== */
.iksm-term__text{
  font-family:'Inter',sans-serif!important;
  font-size:15px!important; line-height:1.2!important; font-weight:600;
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<Kontaktseite (hell) deaktiviert<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* 
body.page-id-8545 .menu-holo.iks-menu,
body.page-id-8545 .menu-holo.iks-menu *,
body.page-id-8545 .menu-holo.iks-menu .iksm-term__text,
body.page-id-8545 .menu-holo.iks-menu .iksm-term__link,
body.page-id-8545 .menu-holo.iks-menu .iksm-term__toggle{
  color:#fff!important;
  fill:#fff!important;
  border-color:#fff!important;
}
*/
body.page-id-8545 a.iksm-term__link[href="https://lademeister.co/"] span.iksm-term__text::after{ color:#ddd!important; }
body.page-id-8545 a.iksm-term__link[href="https://lademeister.co/"]:hover span.iksm-term__text::after{ color:#fff!important; }

/* Menü allgemein */
.iksm-term__link{ color:#000!important; }
.iksm-term{ margin-bottom:0; }
.iksm-term__inner,.iksm-term__label,.iksm-term__text,.iksm-term__toggle,.iksm-term{
  margin:0!important; padding:0!important; line-height:1.1!important;
}
.iksm-term__label{ min-height:auto!important; }
.iksm-term__inner{ display:flex; align-items:center; gap:0!important; }

/* Toggle-Pfeile */
.iksm-term__toggle,
.iksm-terms-tree--level-2 .iksm-term__toggle,
.iksm-terms-tree--level-3 .iksm-term__toggle,
.iksm-terms-tree--level-4 .iksm-term__toggle{
  color:#000!important; fill:#000!important; border-color:#000!important;
  mix-blend-mode:normal!important; opacity:1!important; position:relative!important; z-index:99!important;
}
.iksm-term__toggle:hover{ color:#000!important; fill:#000!important; border-color:#000!important; }

/* ========== 1) Menü-Panel (Holo/Glas) ========== */
.menu-holo.iks-menu{
  position:relative; z-index:10; width:260px!important; max-width:none!important; min-width:100px;
  margin:40px 0 0 20px; padding:24px; border-radius:16px; overflow:hidden;
  background:rgba(105,105,105,.08);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.menu-holo.iks-menu *{ position:relative; z-index:10; color:#000; opacity:1; mix-blend-mode:normal; }
@media (max-width:767px){
  .menu-holo.iks-menu{ width:90%!important; margin-left:5%; margin-right:5%; }
}

/* Holo-Animation (einmalig definierte Keyframes) */
@keyframes moveStripe1{
  0%{background-position:30px 0,700px 0}25%{background-position:400px 0,700px 0}
  50%{background-position:150px 0,700px 0}75%{background-position:700px 0,700px 0}
  100%{background-position:30px 0,700px 0}
}
@keyframes moveStripe2{
  0%,100%{background-position:800px 0,0 0,0 0,0 0,0 0,0 0,0 0}
  30%{background-position:150px 0,0 0,0 0,0 0,0 0,0 0,0 0}
  60%{background-position:750px 0,0 0,0 0,0 0,0 0,0 0,0 0}
}
@keyframes flashStripe3{
  0%,10%,90%,100%{background-size:1px 100%,0 0}
  20%,50%,75%{background-size:1px 100%,1px 100%}
  25%,55%,80%{background-size:1px 100%,0 0}
}
@keyframes holoShift{0%{background-position:0% 0%}50%{background-position:30% 70%}100%{background-position:0% 0%}}
@keyframes flickerGlitch{
  0%{opacity:.5}5%{opacity:.6}15%{opacity:.1}25%{opacity:.35}40%{opacity:.88}
  55%{opacity:.9}70%{opacity:1}90%{opacity:.95}100%{opacity:.6}
}
.menu-holo.iks-menu::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.3; mix-blend-mode:screen;
  background:
    linear-gradient(to bottom,rgba(0,255,0,0) 0%,rgba(0,255,0,.8) 50%,rgba(0,255,0,0) 100%) no-repeat,
    linear-gradient(to right, rgba(0,255,0,0) 0%,rgba(0,255,0,.5) 50%,rgba(0,255,0,.5) 100%) no-repeat;
  background-size:.2px 100%, .2px 100%;
  background-position:30px 0, 700px 0;
  animation:moveStripe1 24s ease-in-out infinite, flashStripe3 60s ease-in-out infinite;
}
.menu-holo.iks-menu::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.9; mix-blend-mode:screen;
  background:
    linear-gradient(to bottom,rgba(0,255,0,0) 0%,rgba(0,255,0,.5) 60%,rgba(0,255,0,0) 100%) no-repeat,
    repeating-linear-gradient(90deg, rgba(0,255,0,.07) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,0,64,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, rgba(0,255,0,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(to bottom, rgba(255,0,64,.03) 0 1px, transparent 1px 6px),
    radial-gradient(at 20% 20%, rgba(255,255,200,.2), transparent 60%),
    radial-gradient(at 80% 40%, rgba(128,255,192,.25), transparent 80%),
    radial-gradient(at 25% 95%, rgba(200,128,255,.15), transparent 70%),
    radial-gradient(at 25% 85%, rgba(100,180,255,.2), transparent 70%);
  background-size:1px 100%,auto,auto,auto,auto,auto,auto,auto,auto;
  animation:moveStripe2 30s ease-in-out infinite, holoShift 14s ease-in-out infinite, flickerGlitch 1.2s steps(6) infinite;
}

/* ========== 2) Elementor & Grundlayout / Szene ========== */
html,body{ margin:0; padding:0; overflow-x:hidden; }
.elementor-header{ position:relative; z-index:1000!important; background:transparent!important; }
.container-hintergrund{ position:relative; z-index:1!important; background:transparent!important; }
.elementor-widget-image img,.elementor-widget-image{ filter:none!important; backdrop-filter:none!important; mix-blend-mode:normal!important; z-index:auto!important; }

.elementor-widget-container{ width:fit-content!important; max-width:unset!important; padding:0!important; margin:0!important; display:block!important; }

.elementor-shortcode{ width:100%!important; display:block!important; }

/* Szene 1 (Start) */
.miri-start-obercontainer{ height:190vh; position:relative; }
.miri-start-untercontainer{ height:100vh; position:sticky; top:0; overflow:hidden; isolation:isolate; }
.miri-start{ width:100%; height:100%; position:relative; }
.miri-start img{ position:fixed; opacity:0; pointer-events:none; height:auto; z-index:0; }
.bild-1{ width:500px; top:70%; left:60%; transform:translate(-50%,-50%); }
.bild-2{ width:600px; top:65%; left:70%; transform:translate(-50%,-50%); }

/* AUSGETAUSCHT Shop-Bereich (liegt unter Hero, wird via JS/Body-Klasse gesteuert) */
.miri-shopbereich{
  width:100% !important;
  min-height:100vh !important;
  padding:0;
  margin:0;
  position:relative;
  display:block;
  background:transparent !important;
  z-index:600 !important;
  isolation:isolate;
  transform: translateZ(0);
}
body.in-shop .bild-1, body.in-shop .bild-2, body.in-shop .lademeister-logo{ opacity:0!important; visibility:hidden!important; }

/* Header immer vorn */
header,.site-header,#masthead,.elementor-header{ position:relative!important; z-index:5000!important; }

/* GSAP Spacer niemals Weiss */
.pin-spacer,.lm-pin-spacer{ background:transparent!important; }

/* ========== 3) Logo (SVG) & Flicker ========== */
:root{
  --logo-top:42%; --logo-left:79%; --logo-scale:.70;
  --logo-rotX:0deg; --logo-rotY:-28deg; --logo-rotZ:0deg; --logo-persp:520px;
  --logo-front:#fff; --glow-1:rgba(0,255,180,.95); --glow-2:rgba(0,255,180,.45); --glow-3:rgba(0,255,180,.28); --glow-mult:1;
}
.lademeister-logo{
  position:fixed; top:var(--logo-top); left:var(--logo-left);
  transform:translate(-50%,-50%) perspective(var(--logo-persp)) rotateX(var(--logo-rotX)) rotateY(var(--logo-rotY)) rotateZ(var(--logo-rotZ)) scale(var(--logo-scale));
  transform-origin:50% 90%; pointer-events:none; z-index:120;
}
.lademeister-logo svg{ overflow:visible; }
.lademeister-logo [id^="buchstabe-"]{
  fill:var(--logo-front);
  filter:drop-shadow(0 0 calc(1.6px*var(--glow-mult)) var(--glow-1))
         drop-shadow(0 0 calc(10px *var(--glow-mult)) var(--glow-2))
         drop-shadow(0 0 calc(18px *var(--glow-mult)) var(--glow-3));
  will-change:opacity,filter;
}
/* Flicker (einmalig) */
@keyframes flackerLeuchteSVG{
  0%{opacity:.2;filter:drop-shadow(0 0 calc(1.2px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(8px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(14px*var(--glow-mult)) var(--glow-3))}
  25%{opacity:.7;filter:drop-shadow(0 0 calc(1.4px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(12px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(18px*var(--glow-mult)) var(--glow-3))}
  50%{opacity:1; filter:drop-shadow(0 0 calc(1.8px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(16px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(24px*var(--glow-mult)) var(--glow-3))}
  75%{opacity:.7;filter:drop-shadow(0 0 calc(1.4px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(12px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(18px*var(--glow-mult)) var(--glow-3))}
  100%{opacity:1;filter:drop-shadow(0 0 calc(1.6px*var(--glow-mult)) var(--glow-1)) drop-shadow(0 0 calc(10px*var(--glow-mult)) var(--glow-2)) drop-shadow(0 0 calc(15px*var(--glow-mult)) var(--glow-3))}
}
.lad-hero-svg .flacker-svg,.lademeister-logo .flacker-svg{ animation:flackerLeuchteSVG 1s ease-in-out 3 forwards; }

/* SVG-Stage */
.lad-hero-svg{
  position:fixed; left:-1px; top:-1px; width:calc(100vw + 2px); height:100vh;
  display:block; pointer-events:none; z-index:0; background:transparent; overflow:visible!important;
}
@supports (height:100dvh){ .lad-hero-svg{ height:100dvh; } }
.elementor-section:has(.lad-hero-svg),
.elementor-container:has(.lad-hero-svg),
.e-con:has(.lad-hero-svg){
  transform:none!important; filter:none!important; perspective:none!important;
  margin:0!important; padding:0!important; max-width:100vw!important; width:100vw!important; background:transparent!important;
}
.lad-after-hero{ margin-top:0!important; padding-top:0!important; }

/* Transform-Eigenschaften aktivieren */
.lad-hero-svg .lademeister-logo,
.lad-hero-svg #model1,
.lad-hero-svg #model2{ transform-box:fill-box; transform-origin:center; }

/* Guard: solange data-armed="0" ? nichts blitzt */
.lad-hero-svg[data-armed="0"] .lademeister-logo [id^="buchstabe-"],
.lad-hero-svg[data-armed="0"] #model1,
.lad-hero-svg[data-armed="0"] #model2{ opacity:0!important; }

/* Responsives Finetuning (nur translate/scale) */
@media (max-width:1024px){
  .lad-hero-svg .lademeister-logo{ transform:translate(0,10px) scale(.95); }
  .lad-hero-svg #model1{ transform:translate(0,0) scale(.95); }
  .lad-hero-svg #model2{ transform:translate(0,0) scale(.95); }
}
@media (max-width:767px){
  .lad-hero-svg .lademeister-logo{ transform:translate(0,18px) scale(.9); }
  .lad-hero-svg #model1{ transform:translate(-20px,10px) scale(.9); }
  .lad-hero-svg #model2{ transform:translate(20px,10px) scale(.9); }
}
@media (max-width:767px){
  .lad-hero-svg .lademeister-logo{ transform:translate(0,24px) scale(.82); }
  .lad-hero-svg #model1{ transform:translate(-28px,16px) scale(.82); }
  .lad-hero-svg #model2{ transform:translate(28px,16px) scale(.82); }
}

/* ===== FIX ? Mobile/Tablet: KEINE opacity-Zwänge (GSAP steuert Intro) ==== */
@media (max-width:1024px){
  .lad-hero-svg, .lad-hero-svg *{
    display: initial !important;
    visibility: visible !important;
    /* keine opacity hier! */
  }
  /* zur Sicherheit explizit freigeben */
  .lad-hero-svg [id^="buchstabe-"],
  .lad-hero-svg #model1,
  .lad-hero-svg #model2{
    opacity: unset !important;
  }
}

/* ========== 5) Footer – nur im Shop sichtbar; Holo/Glas wie Menü ========== */
:root{ --footer-h:64px; }
footer,.site-footer,#colophon{
  position:relative; z-index:1200!important; isolation:isolate;
  background:rgba(105,105,105,.08);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.15);
  box-shadow:0 -6px 24px rgba(0,0,0,.2);
  color:#000;
}
footer *,.site-footer * ,#colophon *{ position:relative; z-index:10; color:#000; mix-blend-mode:normal; }
footer::before,.site-footer::before,#colophon::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.3; mix-blend-mode:screen;
  background:
    linear-gradient(to bottom,rgba(0,255,0,0) 0%,rgba(0,255,0,.8) 50%,rgba(0,255,0,0) 100%) no-repeat,
    linear-gradient(to right, rgba(0,255,0,0) 0%,rgba(0,255,0,.5) 50%,rgba(0,255,0,.5) 100%) no-repeat;
  background-size:.2px 100%, .2px 100%;
  background-position:40px 0, 80% 0;
  animation:moveStripe1 24s ease-in-out infinite, flashStripe3 60s ease-in-out infinite;
}
footer::after,.site-footer::after,#colophon::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.9; mix-blend-mode:screen;
  background:
    linear-gradient(to bottom,rgba(0,255,0,0) 0%,rgba(0,255,0,.5) 60%,rgba(0,255,0,0) 100%) no-repeat,
    repeating-linear-gradient(90deg, rgba(0,255,0,.07) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,0,64,.05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, rgba(0,255,0,.05) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(to bottom, rgba(255,0,64,.03) 0 1px, transparent 1px 6px),
    radial-gradient(at 20% 20%, rgba(255,255,200,.2), transparent 60%),
    radial-gradient(at 80% 40%, rgba(128,255,192,.25), transparent 80%),
    radial-gradient(at 25% 95%, rgba(200,128,255,.15), transparent 70%),
    radial-gradient(at 25% 85%, rgba(100,180,255,.2), transparent 70%);
  background-size:1px 100%,auto,auto,auto,auto,auto,auto,auto,auto;
  animation:moveStripe2 30s ease-in-out infinite, holoShift 14s ease-in-out infinite, flickerGlitch 1.8s steps(6) infinite;
}
/* nur im Shop fix einblenden */
body.in-hero footer, body.in-hero .site-footer, body.in-hero #colophon{
  opacity:0!important; visibility:hidden!important; pointer-events:none!important;
}
body.in-shop footer, body.in-shop .site-footer, body.in-shop #colophon{
  position:fixed!important; left:0; right:0; bottom:0; z-index:1500!important;
}
footer a,.site-footer a,#colophon a{
  color:#000!important; text-decoration:none; font:600 14px/1.2 'Inter',sans-serif; border-bottom:1px dotted rgba(0,0,0,.35);
}
footer a:hover,.site-footer a:hover,#colophon a:hover{ border-bottom-color:rgba(0,0,0,.85); }
@media (max-width:767px){
  footer,.site-footer,#colophon{ padding:12px 14px; }
  footer a,.site-footer a,#colophon a{ font-size:13px; }
}

/* ========== 6) Burger „Pill“ & Drawer (mobiles Menü) ========== */
:root{
  --glass-bg:rgba(255,255,255,.14); --glass-border:rgba(255,255,255,.25); --glass-blur:16px;
  --shadow-panel:0 12px 40px rgba(0,0,0,.35);
  --shadow-ring:0 0 28px rgba(0,0,0,.18);
  --pulse-speed:5.5s; --bright-base:1; --contrast-base:1;
  --bright-hi:1.12; --contrast-hi:1.06; --bright-lo:.96; --contrast-lo:.99;
  --opacity-hi:.97; --opacity-mid:.93; --opacity-lo:.90;
  --backdrop-dim:.12;
  --pill-bg:rgba(255,255,255,.10); --pill-border:rgba(255,255,255,.22); --pill-blur:12px;
    --pill-ring:0 14px 26px rgba(0,0,0,.45);
  --pill-shadow-1:0 8px 22px rgba(0,0,0,.35);
  --pill-shadow-2:0 3px 10px rgba(0,0,0,.25);
}
@keyframes lmPulseMenu{
  0%{filter:brightness(var(--bright-base)) contrast(var(--contrast-base));opacity:var(--opacity-lo)}
  16%{filter:brightness(var(--bright-hi)) contrast(var(--contrast-hi));opacity:var(--opacity-hi)}
  32%{filter:brightness(var(--bright-lo)) contrast(var(--contrast-lo));opacity:var(--opacity-lo)}
  60%{filter:brightness(var(--bright-hi)) contrast(var(--contrast-hi));opacity:var(--opacity-hi)}
  84%{filter:brightness(var(--bright-lo)) contrast(var(--contrast-lo));opacity:var(--opacity-mid)}
  100%{filter:brightness(var(--bright-base)) contrast(var(--contrast-base));opacity:var(--opacity-lo)}
}
@keyframes lmStepFlickerMenu{
  0%{opacity:1}10%{opacity:.97}20%{opacity:1}30%{opacity:.96}40%{opacity:.99}
  55%{opacity:.95}70%{opacity:1}85%{opacity:.97}100%{opacity:1}
}

/* Desktop: kein Drawer */
@media (min-width:1025px){
  #lm-burger,.menu-backdrop{ display:none!important; }
  .menu-holo.iks-menu{
    position:static!important; transform:none!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important;
    left:auto!important; right:auto!important; width:auto!important; max-height:none!important; overflow:visible!important;
  }
}

/* Mobile/Tablet */
@media (max-width:1024px){
  #lm-burger{
    position:fixed!important; top:calc(12px + var(--adminbar-h,0px))!important; left:12px!important;
    width:80px!important; height:80px!important; display:flex!important; align-items:center!important; justify-content:center!important;
    border-radius:9999px!important; cursor:pointer; overflow:hidden!important; isolation:isolate!important; z-index:5200!important;
    background:var(--pill-bg)!important; border:1px solid var(--pill-border)!important;
    backdrop-filter:blur(var(--pill-blur))!important; -webkit-backdrop-filter:blur(var(--pill-blur))!important;
    box-shadow:var(--pill-ring),var(--pill-shadow-1),var(--pill-shadow-2), inset 0 1px 0 rgba(255,255,255,.2)!important;
  }

  #lm-burger:focus-visible{ outline:2px solid rgba(0,0,0,.6); outline-offset:2px; border-radius:9999px; }
  #lm-burger .bars, #lm-burger .bars::before, #lm-burger .bars::after{
    content:""; display:block; width:22px; height:2px; border-radius:2px; background:#0a0a0a; position:relative; z-index:3;
    transition:transform .25s ease, opacity .25s ease; opacity:.9;
  }
  #lm-burger .bars::before{ position:absolute; top:-6px; left:0; }
  #lm-burger .bars::after{ position:absolute; top:6px; left:0; }
  body.menu-open #lm-burger .bars{ transform:rotate(45deg); }
  body.menu-open #lm-burger .bars::before{ transform:translateY(6px) rotate(90deg); }
  body.menu-open #lm-burger .bars::after{ transform:translateY(-6px) rotate(90deg); opacity:0; }

  #lm-burger::before,#lm-burger::after{ content:""; position:absolute; inset:0; border-radius:inherit; mix-blend-mode:normal; }
  #lm-burger::before{
    z-index:1; opacity:.08;
    background:
      linear-gradient(to bottom, rgba(0,255,0,0) 0%, rgba(0,255,0,.45) 50%, rgba(0,255,0,0) 100%) no-repeat,
      linear-gradient(90deg, rgba(0,255,0,.45), rgba(0,255,0,0)) no-repeat;
    background-size:100% 100%, .2px 100%;
    animation:moveStripe1 20s ease-in-out infinite;
  }
  #lm-burger::after{
    z-index:2; opacity:.82;
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) no-repeat,
      repeating-linear-gradient(90deg, rgba(0,255,0,.04) 0 1px, transparent 1px 12px),
      repeating-linear-gradient( 0deg, rgba(0,255,0,.03) 0 1px, transparent 1px 10px),
      repeating-linear-gradient(to bottom, rgba(0,255,0,.035) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(to bottom, rgba(255,0,64,.028) 0 1px, transparent 1px 6px),
      radial-gradient(at 20% 20%, rgba(255,255,200,.08), transparent 60%),
      radial-gradient(at 80% 40%, rgba(128,255,192,.07), transparent 80%),
      radial-gradient(at 25% 95%, rgba(200,128,255,.06), transparent 70%),
      radial-gradient(at 25% 85%, rgba(100,180,255,.07), transparent 70%);
    background-size:100% 140%, 1px 100%, auto, auto, auto, auto, auto, auto, auto;
    animation: lmPulseMenu var(--pulse-speed) ease-in-out infinite,
               lmStepFlickerMenu 2.1s steps(6) infinite,
               moveStripe2 14s ease-in-out infinite,
               holoShift 10s ease-in-out infinite!important;
    filter:brightness(1) contrast(1);
  }

/* Burger-Drawer – gleiche Form wie Desktop-Panel */
.menu-holo.iks-menu,
.lm-portal.menu-holo.iks-menu{
  position:fixed!important;
  top:calc(64px + var(--adminbar-h,0px))!important;
  left:12px!important;
  width:260px!important;
  max-width:92vw!important;
  max-height:72vh!important;
  overflow:auto!important;
  z-index:5100!important;
  isolation:isolate!important;
  box-sizing:border-box!important;

  /* ?? Hier: gleiche Rundung wie Desktop-Panel */
  border-radius: var(--lm-panel-br)!important;
  clip-path: inset(0 round var(--lm-panel-br))!important;

  background:var(--glass-bg)!important;
  border:1px solid var(--glass-border)!important;
  backdrop-filter:blur(var(--glass-blur))!important;
  -webkit-backdrop-filter:blur(var(--glass-blur))!important;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.26),
              0 1px 4px -1px rgba(0,0,0,.16)!important;
  transform:translateY(-16px) scale(.98)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:transform .28s ease, opacity .28s ease, visibility 0s .28s!important;
  background-clip:padding-box!important;
}

/* Grid/Holo-Overlay an Rundung anpassen */
.menu-holo.iks-menu::before,
.menu-holo.iks-menu::after{
  border-radius: var(--lm-panel-br)!important;
  overflow:hidden;
  -webkit-mask-image: radial-gradient(circle at bottom right, black 97%, transparent 100%);
  mask-image: radial-gradient(circle at bottom right, black 97%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}
  body.menu-opening .menu-holo.iks-menu{ transform:translateY(-16px) scale(.98)!important; opacity:.001!important; visibility:visible!important; pointer-events:none!important; }
  body.menu-open .menu-holo.iks-menu{ transform:translateY(0) scale(1)!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; }

  .menu-holo.iks-menu::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; opacity:.35;
    background:
      linear-gradient(to bottom, rgba(0,255,0,0) 0%, rgba(0,255,0,.85) 50%, rgba(0,255,0,0) 100%) no-repeat,
      linear-gradient(to right, rgba(0,255,0,.65) 0%, rgba(0,255,0,0) 100%) no-repeat;
    background-size:.2px 100%, .2px 100%; animation:moveStripe1 24s ease-in-out infinite;
  }
  .menu-holo.iks-menu::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none; opacity:.95;
    background:
      linear-gradient(to bottom, rgba(0,255,0,0) 0%, rgba(0,255,0,.55) 60%, rgba(0,255,0,0) 100%) no-repeat,
      repeating-linear-gradient(90deg, rgba(0,255,0,.10) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(90deg, rgba(255,0,64,.08) 0 1px, transparent 1px 14px),
      repeating-linear-gradient(to bottom, rgba(0,255,0,.07) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(to bottom, rgba(255,0,64,.05) 0 1px, transparent 1px 6px),
      radial-gradient(at 20% 20%, rgba(255,255,200,.24), transparent 60%),
      radial-gradient(at 80% 40%, rgba(128,255,192,.28), transparent 80%),
      radial-gradient(at 25% 95%, rgba(200,128,255,.20), transparent 70%),
      radial-gradient(at 25% 85%, rgba(100,180,255,.24), transparent 70%);
    background-size:1px 100%, auto, auto, auto, auto, auto, auto, auto, auto;
  }
  body.menu-open .menu-holo.iks-menu::after{
    animation: lmPulseMenu 4.2s ease-in-out infinite, lmStepFlickerMenu 1.8s steps(7) infinite,
               moveStripe2 30s ease-in-out infinite, holoShift 14s ease-in-out infinite!important;
    filter:brightness(1) contrast(1);
  }

  .menu-backdrop{
    position:fixed!important; inset:0!important; z-index:5090!important;
    background:rgba(0,0,0,var(--backdrop-dim))!important;
    opacity:0!important; pointer-events:none!important; transition:opacity .2s ease!important;
  }
  body.menu-open .menu-backdrop{ opacity:1!important; pointer-events:auto!important; }

  @media (prefers-reduced-motion:reduce){
    #lm-burger::before,#lm-burger::after,.menu-holo.iks-menu::before,.menu-holo.iks-menu::after{ animation:none!important; }
    .menu-holo.iks-menu,#lm-burger .bars{ transition:none!important; }
  }
}

/* ========== 7) Exclamation mark bei H3IM-Link ========== */
span.iksm-term__text{ position:relative; z-index:5; }
a.iksm-term__link[href="https://lademeister.co/"] span.iksm-term__text::after{
  content:"!"; position:absolute; top:-.15em; right:-.60em; font-family:'Inter',sans-serif; font-weight:700; font-size:1.1em;
  color:#000; opacity:0; transition:all .3s ease; pointer-events:none;
}
a.iksm-term__link[href="https://lademeister.co/"]:hover span.iksm-term__text::after{ opacity:1; transform:rotate(0) scale(1.05); color:#000; }

/* ========== 8) Pano-Grid (unverändert) ========== */
.pano-wrap{ width:100vw; max-width:100vw; margin:0 auto; padding:0; }
.pano-grid{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:0; }
.pano-item{ aspect-ratio:16/9; overflow:hidden; }
.pano-item>img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
@media (max-width:1200px){ .pano-grid{ grid-template-columns:repeat(5,1fr); } }
@media (max-width:900px){  .pano-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){  .pano-grid{ grid-template-columns:1fr; } }







/* =======================================================================
   BAND/SHORTCODE: robustes Overlap (einziger aktiver Block)
   ======================================================================= */
:root{
  --band-h: 16vh;
  --band-overlap: calc(var(--band-h) * .58);
}
@media (max-width:1024px){
  :root{ --band-h: 13vh; --band-overlap: calc(var(--band-h) * .56); }
}
@media (max-width:767px){
  :root{ --band-h: 10vh; --band-overlap: calc(var(--band-h) * .54); }
}

/* Band full-bleed – Eltern clippen nicht */
#lm-band,
#lm-claim2,
#lm-claim2 > .elementor-widget-container{
  position:relative!important;
  left:50%!important; right:50%!important;
  margin-left:-50vw!important; margin-right:-50vw!important;
  width:100vw!important; max-width:100vw!important;
  height:var(--band-h)!important;
  box-sizing:border-box!important;
  z-index:1100!important; pointer-events:none!important;
}
#lm-band img{
  display:block!important; width:100%!important; height:100%!important;
  object-fit:cover!important; object-position:top center!important;
}
#lm-band svg{
  display:block!important; width:100%!important; height:100%!important; overflow:visible!important;
}

.abschnitt_hero_wrap{ background:transparent!important; overflow:visible!important; padding:0!important; }
.abschnitt_hero_wrap > .elementor-container,
.abschnitt_hero_wrap > .e-con{
  width:100%!important; max-width:100%!important;
  justify-content:flex-start!important; align-items:stretch!important;
  --e-con-grid-gap:0px!important;
}

/* Folgeabschnitt unters Band ziehen – robust gegen Wrapper */
#lm-band ~ .miri-shopbereich.shop-hero-bg,
.abschnitt_hero_wrap + .miri-shopbereich.shop-hero-bg,
.abschnitt_hero_wrap ~ .miri-shopbereich.shop-hero-bg{
  margin-top: calc(-1 * var(--band-overlap)) !important;
  padding-top: 0 !important;
  --e-con-grid-gap: 0px;
  background: transparent !important;
}

/* Innenabstände & IMG-Baseline killen */
.miri-shopbereich.shop-hero-bg > .elementor-container,
.miri-shopbereich.shop-hero-bg > .e-con,
.miri-shopbereich.shop-hero-bg .e-con-inner,
.miri-shopbereich.shop-hero-bg .elementor-column > .elementor-widget-wrap{
  margin-top:0!important; padding-top:0!important;
}
.miri-shopbereich.shop-hero-bg .elementor-image,
.miri-shopbereich.shop-hero-bg .elementor-widget-image{ line-height:0!important; }
.miri-shopbereich.shop-hero-bg img{ display:block; margin:0; padding:0; border:0; }

/* === Logo-letters: erlaube die SVG-eigene Flicker-Animation ==== */
.lad-hero-svg .lademeister-logo [id^="buchstabe-"].flacker-svg{
  animation: lmLetterFlicker 1.1s steps(6) 1 both !important;
}




/* =========================================================
  Hier war der alte code zu manuipulation der models schrift hintergrund auf wer ist lademeister<<<<<<<<
   ========================================================= */




/* =========================================================
   LM ? BAND x SHORTCODE — Lite Overlap + sauberes Stacking
   (Drop-in-Override: ans ENDE deiner globalen CSS)
   ========================================================= */

/* 0) Bandhöhe + „sichtbarer Überlapp“ angenehm niedrig halten */
:root{
  --band-h: 16vh;
  --band-overlap: 8vh;     /* war zu stark ? jetzt „lite“ */
}
@media (max-width: 1024px){
  :root{
    --band-h: 13vh;
    --band-overlap: 6.5vh;
  }
}
@media (max-width: 767px){
  :root{
    --band-h: 10vh;
    --band-overlap: 5vh;
  }
}

/* 1) Hero-Abschnitt (der das Band enthält) liegt über dem Shortcode */
.abschnitt_hero_wrap{
  position: relative !important;
  z-index: 50 !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* 2) Das Band selbst: full-bleed, definierte Höhe, klicktransparent */
#lm-band,
#lm-claim2,
#lm-claim2 > .elementor-widget-container{
  position: relative !important;
  z-index: 60 !important;                 /* vor dem Shortcode, aber noch „im Hero“ */
  pointer-events: none !important;        /* blockiert keine Klicks darunter */
  left: 50% !important; right: 50% !important;
  margin-left: -50vw !important; margin-right: -50vw !important;
  width: 100vw !important; max-width: 100vw !important;
  height: var(--band-h) !important;
  box-sizing: border-box !important;
}

/* Band-Inhalt skaliert „cover“, damit es nicht „breiter“ wirkt */
#lm-band img,
#lm-band svg{
  display: block !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  overflow: visible !important;
}

/* 3) Shortcode-Abschnitt: unter das Band ziehen – ABER moderat */
.miri-shopbereich.shop-hero-bg{
  position: relative !important;
  z-index: 10 !important;                  /* sicher unter dem Band */
  margin-top: calc(-1 * var(--band-overlap)) !important;
  padding-top: 0 !important;
  --e-con-grid-gap: 0px;
  overflow: visible !important;
}

/* (Falls zuvor irgendwo pauschal hoher z-index gesetzt wurde) */
.miri-shopbereich.shop-hero-bg *{
  z-index: auto !important;                /* neutralisiert frühere 500er etc. */
}

/* Erste Innencontainer: keine künstlichen Abstände oben */
.miri-shopbereich.shop-hero-bg > .elementor-container,
.miri-shopbereich.shop-hero-bg > .e-con,
.miri-shopbereich.shop-hero-bg .e-con-inner,
.miri-shopbereich.shop-hero-bg .elementor-column > .elementor-widget-wrap{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* IMG-Baseline-Gap entfernen (sonst wirkt es, als ob „Stück fehlt“) */
.miri-shopbereich.shop-hero-bg .elementor-image,
.miri-shopbereich.shop-hero-bg .elementor-widget-image{ line-height: 0 !important; }
.miri-shopbereich.shop-hero-bg img{
  display: block !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}

/* OPTIONAL ? leichte „Ausklinkung“ an der Unterkante des Bandes
   (wenn du eine optische Kerbe/Fade willst – sonst auslassen)
#lm-band{
  -webkit-mask-image: radial-gradient(120% 18px at 50% 100%, transparent 98%, #000 100%);
  mask-image: radial-gradient(120% 18px at 50% 100%, transparent 98%, #000 100%);
}
*/


/* SHORTCODE BAND NAVIGATION */

:root{
  /* z.B. von .58 auf .66 erhöhen */
  --band-h: 16vh;
  --band-overlap: calc(var(--band-h) * .66);
}
@media (max-width:1024px){
  :root{ --band-h: 13vh; --band-overlap: calc(var(--band-h) * .64); }
}
@media (max-width:767px){
  :root{ --band-h: 10vh; --band-overlap: calc(var(--band-h) * .62); }
}







/* --- STACK: Template (Shopbereich) ÜBER dem Band --- */
#lm-band,
#lm-claim2,
#lm-claim2 > .elementor-widget-container{
  z-index: 20 !important;          /* Band tiefer */
  pointer-events: none !important;  /* bleibt klicktransparent */
}

.miri-shopbereich.shop-hero-bg{
  z-index: 60 !important;           /* Template darüber */
  margin-top: 0 !important;         /* NICHT mehr unters Band ziehen */
  padding-top: 0 !important;
}

/* Optional: Template exakt UNTER der Band-Unterkante beginnen lassen */
:root{
  /* Bandhöhe moderat halten, kein „hartes“ Überziehen */
  --band-h: 16vh;
  --band-overlap: 0vh;              /* 0 = kein Überlappen */
}





/* Footer NIE ausblenden – auch im Hero sichtbar */
body.in-hero footer,
body.in-hero .site-footer,
body.in-hero #colophon{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Über allen Overlays halten (Menü-Backdrop etc.) */
footer,.site-footer,#colophon{
  z-index: 6000 !important;
}





/* === FOOTER: kompakter === */
footer, .site-footer, #colophon{
  padding: 8px 14px !important;     /* vorher vermutlich mehr */
  font-size: 13px !important;
  line-height: 1.25 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Falls du ihn im Shop fix positionierst, Höhe nicht hart erzwingen: */
body.in-shop footer,
body.in-shop .site-footer,
body.in-shop #colophon{
  height: auto !important;
}




/* === BAND & TEMPLATE: bündig, keine Kante === */
#lm-band,
#lm-claim2,
#lm-claim2 > .elementor-widget-container{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Template/Shop-Start – direkt an die Band-Unterkante kleben */
.miri-shopbereich.shop-hero-bg,
.miri-shopbereich.shop-hero-bg > .elementor-container,
.miri-shopbereich.shop-hero-bg .elementor-section:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  background: transparent !important; /* keine fremde Linie */
}

/* Falls irgendein erstes Puzzle selbst Top-Abstand/Borders hat: */
.miri-shopbereich.shop-hero-bg .pano-puzzle:first-of-type{
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

/* — Option A: exaktes Anliegen (Standard) — */
.miri-shopbereich.shop-hero-bg{ margin-top: 0 !important; }

/* — Option B: mini Überlappung, falls noch Haarlinie sichtbar — */
/* Kommentierung entfernen, wenn du die Linie siehst: */
/* .miri-shopbereich.shop-hero-bg{ margin-top: -1px !important; } */






/* Tablet PORTRAIT (768–1200) – höheres Fenster, kein Innenrand */
@media (min-width:768px) and (max-width:1200px) and (orientation:portrait){
  .pano-puzzle{
    --ar-p: 2/3;
    --minh-p: 560px;
    --pad-p: 0;
    --gap-p: 16px;
  }
}

/* Mobile PORTRAIT (<=767) – etwas kompakter; Edge-to-edge optional per .m-edge */
@media (max-width:767.98px) and (orientation:portrait){
  .pano-puzzle{ --ar-p: 4/5; --minh-p: 380px; --pad-p: 10px; --gap-p: 12px; }
  .pano-puzzle.m-edge{ --pad-p: 0; --minh-p: 400px; }
}



















/* === PANO: Text soll nach unten „aufgehen“, ohne das Band/Kacheln zu verändern === */
@media (orientation: landscape), (min-aspect-ratio: 1001/1000){

  /* Band darf nach unten auslaufen (sonst „frisst“ overflow:hidden den Text) */
  html body .pano-puzzle.pano-bleed{
    overflow: visible !important;
  }

  /* Jede Kachel bleibt bandhoch, lässt aber den Text unten herausragen */
  html body .pano-puzzle.pano-bleed .pano-piece{
    position: relative !important;
    height: 100% !important;       /* bleibt exakt bandhoch */
    overflow: visible !important;  /* Text darf raus */
    display: block !important;     /* evtl. Flex-Kolumne neutralisieren */
  }

  /* Bildfenster bleibt unverändert bandhoch */
  html body .pano-puzzle.pano-bleed .pano-piece > .pano-media,
  html body .pano-puzzle.pano-bleed .pano-piece > figure{
    position: relative !important;
    height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    overflow: hidden !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto !important;
  }

  /* Bild füllt das Fenster (wie gehabt) */
  html body .pano-puzzle.pano-bleed .pano-piece > .pano-media img,
  html body .pano-puzzle.pano-bleed .pano-piece > figure img{
    width: 100% !important; height: 100% !important;
    object-fit: contain !important; /* oder cover – je nach deinem Setup */
    object-position: center center !important;
    display: block !important;
  }

  /* >>> Text absolut direkt UNTER dem Bildfenster positionieren <<< */
  html body .pano-puzzle.pano-bleed .pano-meta{
    position: absolute !important;
    top: 100% !important;          /* direkt unter dem Fenster */
    left: 0 !important; right: 0 !important;
    margin-top: 8px !important;    /* kleiner Abstand */
    padding: 0 10px !important;    /* nur seitlich, kein top-padding */
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    z-index: 2 !important;
  }

  /* Sicherheit: alte Flex-Spalten-Logik in Landscape killen */
  html body .pano-puzzle.pano-bleed .pano-piece{
    flex-direction: initial !important;
    align-items: initial !important;
  }
}








/* === DELTA-PATCH: Text darf nach unten wachsen, Bild bleibt fix === */

/* 0) Im ganzen Panorama-Bereich: niemals „Deckel drauf“ */
.pano-puzzle.pano-bleed,
.pano-puzzle.pano-bleed > .e-con-inner,
.pano-puzzle.pano-bleed .elementor-container,
.pano-puzzle.pano-bleed .elementor-row,
.pano-puzzle.pano-bleed .elementor-column,
.pano-puzzle.pano-bleed .elementor-widget-wrap{
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}



/* 4) Textblock im normalen Flow (nie overlay), Abstand via margin-top */
.pano-puzzle.pano-bleed .pano-meta{
  position: static !important;
  z-index: auto !important;
  flex: 0 0 auto !important;
  margin-top: 8px !important;
  padding: 0 10px !important;     /* seitliche Luft okay, kein padding-top */
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: #111; font: 500 14px/1.4 'Inter', system-ui, sans-serif;
}














/* === LANDSCAPE: Text absolut unter die Kachel, Platz unten für die ganze Row reservieren === */
@media (orientation: landscape), (min-aspect-ratio:1001/1000){

  /* Die Band-Row darf Inhalte „unten rauslassen“ + bekommt unten Platz */
  .pano-puzzle.pano-bleed{
    overflow: visible !important;
    padding-bottom: var(--row-pad, 140px) !important; /* <- einmal pro Row setzen, siehe unten */
    margin-bottom: var(--row-gap-after, 28px) !important;
  }

  /* Jede Kachel bleibt exakt bandhoch, Text wird relativ zu ihr positioniert */
  .pano-puzzle.pano-bleed .pano-piece{
    position: relative !important;
    height: var(--band-h, 56vh) !important;   /* Kachel bleibt bandhoch */
    overflow: visible !important;
  }

  /* Das Bildfenster füllt die Kachel-Höhe (dein Puzzle bleibt bündig) */
  .pano-puzzle.pano-bleed .pano-piece > .pano-media,
  .pano-puzzle.pano-bleed .pano-piece > figure{
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important; padding: 0 !important;
    overflow: hidden !important;
  }

  /* Text absolut direkt UNTER dem Bildfenster */
  .pano-puzzle.pano-bleed .pano-meta{
    position: absolute !important;
    top: 100% !important;   /* direkt unter der Kachel */
    left: 0 !important; right: 0 !important;
    margin-top: 8px !important;
    padding: 0 10px !important;       /* seitliche Luft */
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    display: block !important; visibility: visible !important; opacity: 1 !important;
    z-index: 2 !important;
  }
}

/* === PORTRAIT: Text im normalen Flow unter dem Bild, nix absolut === */
@media (orientation: portrait), (max-aspect-ratio:1000/1001){
  .pano-puzzle.pano-bleed{
    padding-bottom: 0 !important;   /* keinen reservierten Raum nötig */
  }
  .pano-puzzle.pano-bleed .pano-piece{
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .pano-puzzle.pano-bleed .pano-piece > .pano-media,
  .pano-puzzle.pano-bleed .pano-piece > figure{
    height: auto !important;
    aspect-ratio: var(--ar-p, 2/3) !important;
    min-height: var(--minh-p, 44vh) !important;
  }
  .pano-puzzle.pano-bleed .pano-meta{
    position: static !important;
    margin-top: 8px !important;
    padding: 0 10px !important;
    display: block !important; visibility: visible !important; opacity: 1 !important;
  }
}

/* Unblocker: falls alte Regeln den Text verstecken */
.pano-puzzle.pano-bleed .pano-meta,
.pano-puzzle.pano-bleed .pano-meta *{
  color:#111 !important;
  display: initial; /* Baseline */
}









/* ====== HOTFIX 1: Kein Padding/Margin irgendwo im Band – Bilder füllen exakt ====== */

/* Alle Elementor-Wrapper im Panorama bündig machen */
.pano-puzzle.pano-bleed,
.pano-puzzle.pano-bleed > .e-con-inner,
.pano-puzzle.pano-bleed .elementor-container,
.pano-puzzle.pano-bleed .elementor-row,
.pano-puzzle.pano-bleed .elementor-column,
.pano-puzzle.pano-bleed .elementor-widget-wrap,
.pano-puzzle.pano-bleed .elementor-widget,
.pano-puzzle.pano-bleed .elementor-widget-image,
.pano-puzzle.pano-bleed .elementor-widget-image .elementor-widget-container{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Kachel selbst bündig und ohne Innenabstand */
.pano-puzzle.pano-bleed .pano-piece{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:visible !important;
}

/* Medien-Fenster füllt die Kachelhöhe (Landscape) bzw. AR (Portrait) ohne Zusatzabstand */
.pano-puzzle.pano-bleed .pano-piece > .pano-media,
.pano-puzzle.pano-bleed .pano-piece > figure{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

/* Bild selbst: kein Inline-Gap, immer Fläche komplett füllen */
.pano-puzzle.pano-bleed .pano-piece > .pano-media img,
.pano-puzzle.pano-bleed .pano-piece > figure img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  line-height:0 !important;         /* killt den typischen img-Baseline-Spalt */
  vertical-align:top !important;     /* doppelt hält besser */
  object-fit:cover !important;       /* WICHTIG: nicht contain */
  object-position: var(--pos-x-p,50%) var(--pos-y-p,50%) !important;
}

/* Keine lästigen 1-px-Gaps zwischen den Kacheln */
.pano-puzzle, .pano-puzzle > .e-con-inner{ gap:0 !important; }

/* ====== HOTFIX 2: Text-Logik (Landscape absolut + Reserve, Portrait normal) ====== */

/* LANDSCAPE: Text absolut unter das Bild, Row reserviert unten Platz */
@media (orientation: landscape), (min-aspect-ratio:1001/1000){
  .pano-puzzle.pano-bleed{
    overflow:visible !important;
 
    margin-bottom: var(--row-gap-after, 128px) !important;
  }
  .pano-puzzle.pano-bleed .pano-piece{
    position:relative !important;
    height: var(--band-h, 56vh) !important; /* Kachel bleibt bandhoch */
  }
  .pano-puzzle.pano-bleed .pano-meta{
    position:absolute !important;
    top:100% !important; left:0 !important; right:0 !important;
    margin-top:8px !important;
    padding:0 10px !important;             /* nur seitlich */
    background:transparent !important;
    border:0 !important; box-shadow:none !important;
    display:block !important; visibility:visible !important; opacity:1 !important;
    z-index:2 !important;
  }
}

/* PORTRAIT: Text im normalen Flow direkt unter dem Bild (sichtbar, schiebt Seite) */
@media (orientation: portrait), (max-aspect-ratio:1000/1001){
  .pano-puzzle.pano-bleed{
    padding-bottom:0 !important;   /* Reserve nur in Landscape nötig */
  }
  .pano-puzzle.pano-bleed .pano-piece{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
  }
  .pano-puzzle.pano-bleed .pano-piece > .pano-media,
  .pano-puzzle.pano-bleed .pano-piece > figure{
    height:auto !important;
    aspect-ratio: var(--ar-p, 2/3) !important;
    min-height: var(--minh-p, 44vh) !important;
  }
  .pano-puzzle.pano-bleed .pano-meta{
    position:static !important;     /* ? zurück in den Flow */
    margin-top:8px !important;
    padding:0 10px !important;
    display:block !important; visibility:visible !important; opacity:1 !important;
    color:#111 !important;
  }
}

/* Sicherheitsnetz: falls irgendwo (älterer Code) .pano-meta versteckt wird */
.pano-puzzle.pano-bleed .pano-meta, .pano-puzzle.pano-bleed .pano-meta *{
  display: initial;
  visibility: visible !important;
  opacity: 1 !important;
  color:#111 !important;
}










































/* === PANO MINIPATCH – Gaps weg, Portrait-Stack & Meta-Band ================= */
/* 0) Gaps & äußere Ränder ausknipsen */
.pano-puzzle {
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.pano-puzzle .elementor-loop-container {
  display: flex;
  gap: 0;
  flex-wrap: nowrap; /* Default: nebeneinander in Landscape */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%; /* Keine Begrenzung */
}
.pano-puzzle [class*="e-loop-item"],
.pano-puzzle .elementor-widget-container {
  margin: 0;
  padding: 0;
}
.pano-puzzle .elementor-loop-container.elementor-grid {
  column-gap: 0;
  row-gap: 0;
}
/* 1) Kachel-Basics */
.pano-puzzle a.pano-piece {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto; /* Bild + Meta */
  overflow: hidden;
  min-width: 0;
  width: calc((var(--w, 1) / max(var(--pano-sum, 1), 1)) * 100%); /* Breite per --w */
}
/* 2) Bild füllt die Kachel */
.pano-puzzle .pano-piece > .pano-media {
  position: relative;
  overflow: hidden;
}
.pano-puzzle .pano-piece > .pano-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos-x, 50%) var(--pos-y, 50%);
  transform-origin: var(--org-p, 50% 50%);
  transform: scale(var(--scale-p, 1)); /* Nur Basis-Skala */
}
/* 3) Meta – Overlay in Landscape >1024px */
@media (min-width: 1025px) {
  .pano-puzzle .pano-piece .pano-meta {
    position: absolute;
    left: 1rem;
    top: 1rem;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.35rem 0.6rem;
  }
}
/* Meta-Band unter Bild (default) */
.pano-puzzle .pano-piece .pano-meta {
  position: static;
  display: block;
  background: var(--band, #fff);
  padding: 0.6rem 0.9rem;
  margin: 0;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06) inset;
}
/* === Portrait: Stacked, keine fixe Fenstergröße, manuelle per Kachel === */
@media (orientation: portrait), (max-aspect-ratio: 1000/1001) {
  .pano-puzzle .elementor-loop-container {
    flex-wrap: wrap;
    flex-direction: column;
    aspect-ratio: auto; /* Kein fixes Puzzle-Fenster */
    height: auto;
    row-gap: 12px;
    width: 100%;
  }
  .pano-puzzle .elementor-loop-container a.pano-piece {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: auto;
    flex-basis: 100%;
    width: 100%;
    aspect-ratio: calc(var(--w, 1) / var(--pano-src-h, 1800)); /* Manuelle Größe */
    overflow: visible;
  }
  .pano-puzzle .pano-piece > .pano-media {
    z-index: 1;
    aspect-ratio: calc(var(--w, 1) / var(--pano-src-h, 1800));
    height: auto;
  }
  .pano-puzzle .pano-piece .pano-meta {
    grid-row: 2 / 3;
    position: relative;
    z-index: 2;
    display: block;
    visibility: visible;
    opacity: 1;
    margin: 0;
    padding: 0.6rem 0.9rem;
    background: var(--band, rgba(0, 0, 0, 0.65));
  }
  .pano-puzzle .pano-piece > .pano-media img {
    width: 100%;
    height: auto;
    object-position: var(--pos-x-p, 50%) var(--pos-y-p, 50%);
    transform-origin: var(--org-p, 50% 50%);
    transform: scale(var(--scale-p, 1));
  }
  .pano-puzzle .elementor-loop-container a.pano-piece:last-child {
    margin-bottom: max(0px, var(--footer-h, 72px));
  }
}
/* Portrait Meta-Band konstant */
@media (orientation: portrait), (max-aspect-ratio: 1000/1001) {
  .pano-puzzle .pano-piece .pano-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 48px;
    padding: 0.45rem 0.9rem;
    background: var(--band, rgba(0, 0, 0, 0.65));
  }
}
/* A) Portrait-Stack */
@media (orientation: portrait), (max-aspect-ratio: 1000/1001) {
  .pano-puzzle .elementor-loop-container {
    flex-wrap: wrap;
    height: auto;
    width: 100%;
  }
  .pano-puzzle .elementor-loop-container a.pano-piece {
    flex-basis: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: calc(var(--w, 1) / var(--pano-src-h, 1800));
  }
  .pano-puzzle .pano-piece .pano-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.5rem 0.9rem;
    background: var(--band, rgba(0, 0, 0, 0.65));
  }
  .pano-puzzle {
    padding-bottom: max(0px, var(--footer-h, 72px));
  }
}
/* B) Tablet-Landscape Korridor */
@media (min-width: 954px) and (max-width: 1025px) {
  @media (orientation: landscape), (min-aspect-ratio: 1001/1000) {
    .pano-puzzle .elementor-loop-container {
      flex-wrap: nowrap;
      width: 100%;
    }
    .pano-puzzle .elementor-loop-container a.pano-piece {
      flex-grow: 0;
      flex-shrink: 0;
      width: auto;
      height: 100%;
      aspect-ratio: auto;
    }
    .pano-puzzle .elementor-loop-container a.pano-piece[style*="--w:"] {
      flex-basis: calc((var(--w) / max(var(--pano-sum, 1), 1)) * 100%);
      width: calc((var(--w) / max(var(--pano-sum, 1), 1)) * 100%);
    }
    .pano-puzzle .pano-piece .pano-meta {
      position: absolute;
      left: 1rem;
      top: 1rem;
      min-height: auto;
      padding: 0.35rem 0.6rem;
      background: rgba(0, 0, 0, 0.35);
    }
  }
}
/* ================= PANO — CLEAN PACK v2 (kein Overlay, identische Fenster) ================ */
/* 0) Globale Hygiene */
.pano-puzzle .elementor-loop-container,
.pano-puzzle .elementor-loop-container.elementor-grid {
  display: flex;
  flex-wrap: nowrap; /* Default Landscape */
  gap: 0;
  padding: 0;
  margin: 0; --w:; --p-sum: 4000; --p-src-h: 1800; data-wobble|on
  box-sizing: border-box;
  width: 100%;
}
/* Kill Paddings */
.pano-puzzle [class*="e-loop-item"],
.pano-puzzle [class*="elementor-element"],
.pano-puzzle .elementor-widget,
.pano-puzzle .elementor-widget-container,
.pano-puzzle .e-con,
.pano-puzzle .e-con-inner {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}
/* 1) Tile-Basis */
.pano-puzzle a.pano-piece {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: visible;
  row-gap: 0;
  column-gap: 0;
  width: calc((var(--w, 1) / max(var(--pano-sum, 1), 1)) * 100%);
}
/* 2) Medien-Container: Block, no overlay */
.pano-puzzle .pano-piece > .pano-media {
  display: block;
  position: static;
  overflow: hidden;
  line-height: 0;
  min-height: 0;
  box-sizing: border-box;
}
/* Bild-Wrapper full */
.pano-puzzle .pano-piece > .pano-media > .elementor-widget-image,
.pano-puzzle .pano-piece > .pano-media > .elementor-widget-container {
  height: 100%;
  width: 100%;
}
/* Bild fill */
.pano-puzzle .pano-piece > .pano-media img {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;

  /* Desktop nutzt --pos-x / --pos-y
     Mobile kann optional --pos-x-p / --pos-y-p setzen
     Fallback immer 50% */
  object-position:
    var(--pos-x, var(--pos-x-p, 50%))
    var(--pos-y, var(--pos-y-p, 50%));

  border: 0;
  outline: 0;
}/* 3) Meta-Band */
.pano-puzzle .pano-piece .pano-meta {
  position: static;
  background: var(--band, #fff);
  color: #111;
  padding: 8px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  box-shadow: none;
  overflow: visible;
}
.pano-puzzle .pano-piece .pano-meta > * {
  margin: 0;
}
.pano-puzzle .pano-piece .pano-meta .price {
  white-space: nowrap;
  line-height: 1.2;
}
/* Short Desc clamp */
.pano-puzzle .pano-piece .pano-meta :is(.elementor-widget-text-editor, .woocommerce-product-details__short-description, .product-short-description, .woocommerce-loop-product__description) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 4) Portrait: Manuelle per-Kachel-Größe */
@media (orientation: portrait), (max-aspect-ratio: 1000/1001) {
  .pano-puzzle .elementor-loop-container {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 0;
    width: 100%;
  }
  .pano-puzzle a.pano-piece {
    flex-basis: 100%;
    aspect-ratio: calc(var(--w, 1) / var(--pano-src-h, 1800)); /* Manuell */
    width: 100%;
  }
  .pano-puzzle .pano-piece > .pano-media {
    aspect-ratio: calc(var(--w, 1) / var(--pano-src-h, 1800));
    height: auto;
  }
  .pano-puzzle .pano-piece > .pano-media img {
    height: auto;
    object-position: var(--pos-x-p, 50%) var(--pos-y-p, 50%);
  }
}
/* 5) Landscape: Gleiche Höhe, nebeneinander – angepasst für Meta-Platz, mit fixer Ratio */
@media (orientation: landscape), (min-aspect-ratio: 1001/1000) {
  .pano-puzzle .elementor-loop-container {
    flex-wrap: nowrap;
    aspect-ratio: calc(var(--pano-sum, 4000) / (var(--pano-src-h, 1800) + var(--meta-height-l, 80))); /* Fixe Ratio + Meta-Höhe addiert, um Platz zu schaffen */
    height: auto;
    width: 100%;
  }
  .pano-puzzle .elementor-loop-container a.pano-piece[style*="--w:"] {
    flex-basis: calc((var(--w, 1) / max(var(--pano-sum, 1), 1)) * 100%);
    height: 100%; /* Gleiche Höhe */
    width: calc((var(--w, 1) / max(var(--pano-sum, 1), 1)) * 100%);
  }
  .pano-puzzle .pano-piece > .pano-media {
    height: 100%; /* Full Höhe */
    aspect-ratio: auto;
  }
  .pano-puzzle .pano-piece > .pano-media img {
    height: 100%;
  }
  /* Extra: Dickes Meta-Band hier overschreiben (höhere Spezifität) */
  .pano-puzzle .pano-piece .pano-meta {
    padding: 1.2rem 1.5rem !important; /* Dicker Padding für Höhe */
    min-height: var(--meta-height-l, 80px) !important; /* Mindesthöhe, damit's nicht dünn wirkt */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Zentriert Schrift im Band */
  }
}
/* 6) Ränder killen */
.pano-puzzle .pano-piece,
.pano-puzzle .pano-piece > .pano-media,
.pano-puzzle .pano-piece .pano-meta,
.pano-puzzle .elementor-widget,
.pano-puzzle .elementor-widget-container {
  padding-inline: 0;
  margin-inline: 0;
  border: 0;
}
.pano-puzzle * {
  border-image-width: 0;
  border-image-slice: 0;
}
/* FIX: Rechtes Weißband */
.pano-puzzle .pano-piece > .pano-media {
  text-align: initial;
}
.pano-puzzle .pano-piece > .pano-media > .elementor-widget-image {
  width: 100%;
  max-width: none;
  align-self: stretch;
  justify-self: stretch;
  display: block;
  --container-widget-width: 100%;
  --container-widget-flex-grow: 1;
}
.pano-puzzle .pano-piece > .pano-media > .elementor-widget-image > .elementor-widget-container {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}
/* Abschnitt auf echte Kantenbreite ziehen */
.puzzle-fullbleed{
  width:100vw; max-width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:0 !important;
}
.puzzle-fullbleed .elementor-container,
.puzzle-fullbleed .elementor-widget-container{ padding:0 !important; }
/* Flex-Items dürfen schrumpfen (sonst Restweiß) */
.puzzle-feld .e-loop-item,
.puzzle-feld ul.products > li.product{ min-width:0; }
/* Sicherheitsnetz: keine max-width-Bremse irgendwo im Pfad */
.puzzle-fullbleed [class*="elementor-container"],
.puzzle-fullbleed [class*="elementor-col"]{ max-width:none !important; }
/* PORTRAIT – eine eindeutige Schablone */
@media (orientation: portrait), (max-aspect-ratio:1000/1001){
  .pano-puzzle.pano-bleed .pano-piece{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    /* keine fixe Höhe hier */
    overflow:visible !important;
    margin:0 !important;
    border:0 !important;
  }
/* Der Bild-Wrapper IST die Schablone (jetzt Fullscreen im Portrait - EINSTELLUNG DES FORMATS HIER ÄNDERBAR) */
.pano-puzzle.pano-bleed .pano-piece > .pano-media,
.pano-puzzle.pano-bleed .pano-piece > figure {
  width: 100% !important;
  height: 100vh !important;         /* Feste Schablone = voller Bildschirm */
  aspect-ratio: auto !important;    /* Proportion aufheben */
  position: relative !important;
  overflow: hidden !important;
}
  /* Bild füllt die Schablone, Motivausschnitt steuerbar */
  .pano-puzzle.pano-bleed .pano-piece > .pano-media img,
  .pano-puzzle.pano-bleed .pano-piece > figure img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position: var(--fx, 50%) var(--fy, 50%); /* je Kachel setzen */
    display:block;
  }
  /* Text unter dem Bild im normalen Flow */
  .pano-puzzle.pano-bleed .pano-meta{
    position:static !important;
    margin-top:8px !important;
    padding:0 10px !important;
    visibility:visible !important; opacity:1 !important;
  }
  /* Elementor-Spacing in diesem Kontext neutralisieren */
  .pano-puzzle .elementor-widget:not(:last-child){
    margin-bottom:0 !important;
  }
}
/* === ANHÄNGE-PATCH: Puzzle-Größen konsistent machen ================= */
/* Puzzles auf volle Browser-Breite setzen */
.pano-puzzle {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* Container- und Widget-Paddings neutralisieren */
.pano-puzzle .elementor-loop-container,
.pano-puzzle .elementor-section,
.pano-puzzle .elementor-container,
.pano-puzzle .elementor-widget-container {
  width: 100% !important;
  max-width: 100vw !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
/* Sicherstellen, dass jedes Puzzle die volle Breite nutzt */
.pano-puzzle .elementor-loop-container a.pano-piece {
  width: 100% !important;
  min-width: 100% !important;
}
/* Höhe konsistent halten über alle Puzzles <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<sehr wichtig*/
/* Höhe konsistent halten über alle Puzzles */
/* Höhe konsistent halten über alle Puzzles (Portrait) */
@media (orientation: portrait), (max-aspect-ratio: 1000/1001) {

  /* 3/4 Box beibehalten */
  .pano-puzzle .pano-piece > .pano-media {
    aspect-ratio: var(--ar-p, 3/4) !important;
    position: relative;
    overflow: hidden; /* wichtig für Crop */
  }

  /* Bild korrekt covern + verschiebbar machen */
  .pano-puzzle .pano-piece > .pano-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos-x, 50%) 50%;
  }

}

/* Elementor-Spacing zwischen Puzzles entfernen */
.pano-puzzle + .pano-puzzle,
.pano-puzzle + .elementor-section {
  margin-top: 0 !important;
}
/* Meta: fester Block bis 300px, bei schmalen Kacheln flexibel */
.pano-puzzle .pano-piece .pano-meta{
  width: min(100%, 300px);
  max-width: 300px;
  box-sizing: border-box;
  justify-self: start; /* Grid: verhindert Stretch */
  align-self: flex-start;/* Flex (Portrait): verhindert Stretch */
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Portrait: deine stärkere Optik beibehalten */
@media (orientation: portrait), (max-aspect-ratio:1000/1001){
  .pano-puzzle .pano-piece .pano-meta{
    min-height: 48px;
    padding: .35rem .6rem;
  }
}
/* === PORTRAIT META-PACK (nur Portrait) ===================== */
/* Werte kannst du je Row im Style überschreiben, z. B.:
   <div class="pano-puzzle" style="--meta-pt-p:16px; --meta-pb-p:8px;"></div> */
:root{
  --meta-pt-p: 24px; /* padding-top Portrait */
  --meta-pb-p: 40px; /* padding-bottom Portrait */
  --meta-pad-x-p: 12px;/* links/rechts Portrait */
  --meta-min-h-p: 48px;/* Mindesthöhe Portrait */
}
@media (orientation: portrait), (max-aspect-ratio:1000/1001){
  /* Bild unter dem Text halten, Wobble clippen */
  .pano-puzzle .pano-piece > .pano-media{
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .pano-puzzle .pano-piece .pano-meta{
    position: relative;
    z-index: 2;
    min-height: var(--meta-min-h-p);
    padding: var(--meta-pt-p) var(--meta-pad-x-p) var(--meta-pb-p) var(--meta-pad-x-p) !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    width: min(100%, 300px);
    box-sizing: border-box;
  }
}
/* === FIX: Meta-Band in LANDSCAPE gezielt überschreiben =============== */
/* Defaults – nach Bedarf global anpassen oder pro Row im style=… setzen */
:root{
  --meta-pt: 6px; /* oben mehr Luft */
  --meta-pb: 68px; /* unten etwas weniger */
  --meta-pad-x: 32px;
  --meta-mt: 0px; /* äußerer Abstand oben */
  --meta-mb: 4px; /* äußerer Abstand unten */
  --meta-min-h: 48px;
}
@media (orientation: landscape), (min-aspect-ratio:1001/1000){
  /* Sicher: Bild bleibt darunter geklippt */
  .pano-puzzle .pano-piece > .pano-media{ position:relative; overflow:hidden; z-index:1; }
  /* Härterer Selektor + !important ? überstimmt die alte 18px/0-10px-Regel */
  .pano-puzzle.pano-bleed .pano-piece .pano-meta{
    position:relative; z-index:2;
    min-height: var(--meta-min-h);
    padding: var(--meta-pt) var(--meta-pad-x) var(--meta-pb) var(--meta-pad-x) !important;
    margin-top: var(--meta-mt) !important;
    margin-bottom: var(--meta-mb) !important;
    width: min(100%,300px);
    box-sizing: border-box;
  }
}
/* Sicherheitsnetz: keine zusätzlichen Paddings aus Elementor-Containern */
.pano-puzzle.pano-bleed .elementor-widget-container{ padding:0 !important; }
/* Meta-Band unter Bild (default) */
.pano-puzzle .pano-piece .pano-meta {
  position: static;
  display: block;
  background: var(--band, #fff);
  padding: 0.6rem 0.9rem;
  margin: 0;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06) inset;
}

/* === META-SCHRIFT FEINTUNING „Lademeister“ === */
:root {

  /* Produktname */
  --meta-title-fz: 20px;          /* etwas größer für Präsenz */
  --meta-title-fw: 600;           /* leicht, fast „stiftartig“ */
  --meta-title-lh: 1.2;           /* kompakt */
  --meta-title-mb: 6px;           /* etwas mehr Abstand für Rhythmus */
  --meta-title-ls: 0.3px;         /* minimaler Letterspacing */
  --meta-title-style: italic;     /* leichte Neigung = Atelier-Anmutung */

  /* Preis */
  --meta-price-fz: 13px;          /* bewusst kleiner, zurückhaltend */
  --meta-price-fw: 700;           /* kräftig für Struktur */
  --meta-price-lh: 1.1;           
  --meta-price-mb: 4px;           /* rhythmisch abgestimmt */
  --meta-price-clr: rgba(0,0,0,0.9); /* sanfter Schwarzton */

  /* Kurzbeschreibung */
  --meta-desc-fz: 11px;           /* zart, aber gut lesbar */
  --meta-desc-fw: 300;            /* fein, nicht zu dünn */
  --meta-desc-lh: 1.5;            /* gute Luft */
  --meta-desc-lines: 2;           /* line clamp bleibt */
  --meta-desc-mb: 0;
  --meta-desc-clr: rgba(0,0,0,0.7); /* leicht transparent für Ruhe */

}



/* Erzwinge Schriftgröße in Kurzbeschreibung (alle Ebenen) */
.pano-puzzle .pano-piece .pano-meta 
:is(.elementor-widget-text-editor, .woocommerce-loop-product__description, .product-short-description, .woocommerce-product-details__short-description),
.pano-puzzle .pano-piece .pano-meta 
:is(.elementor-widget-text-editor, .woocommerce-loop-product__description, .product-short-description, .woocommerce-product-details__short-description) p {
  font-size: var(--meta-desc-fz) !important;
  line-height: var(--meta-desc-lh, 1.4) !important;
  color: var(--meta-desc-clr, rgba(0,0,0,0.8)) !important;
}



/* Scope: Nur .pano-meta (keine Kollisionen) */
.pano-puzzle .pano-piece .pano-meta {
  /* Basis: Flex für Abstände */
  display: flex !important;
  flex-direction: column !important;
  gap: var(--meta-gap) !important; /* Cockpit: Abstände zwischen Name/Preis/Desc */
  font-family: var(--meta-font) !important; /* Cockpit: Font allgemein */
  color: var(--meta-color) !important;
}
/* Produktname (.product_title oder h2/h3) */
/* Produktname (Woo-Titel, H2/H3 ODER eigener .meta-title) */
.pano-puzzle .pano-piece .pano-meta 
  :is(.product_title, h2, h3, .woocommerce-loop-product__title, .meta-title) {
  font-size: var(--meta-title-fz) !important; /* Cockpit: Größe */
  font-weight: var(--meta-title-fw) !important; /* Cockpit: Fett */
  line-height: var(--meta-title-lh) !important; /* Cockpit: Zeilenhöhe */
  margin: 0 0 var(--meta-title-mb) 0 !important; /* Cockpit: Abstand unten */
}
}
/* Preis (.price, ins/del) */
.pano-puzzle .pano-piece .pano-meta .price,
.pano-puzzle .pano-piece .pano-meta .price * {
  font-size: var(--meta-price-fz) !important; /* Cockpit: Größe */
  font-weight: var(--meta-price-fw) !important; /* Cockpit: Fett */
  line-height: var(--meta-price-lh) !important; /* Cockpit: Zeilenhöhe */
  margin: 0 0 var(--meta-price-mb) 0 !important; /* Cockpit: Abstand unten */
}
.pano-puzzle .pano-piece .pano-meta .price del { opacity: 0.7; } /* Altpreis dezent */
/* Kurzbeschreibung (.description, .elementor-widget-text-editor) */
.pano-puzzle .pano-piece .pano-meta :is(.description, .elementor-widget-text-editor, .woocommerce-loop-product__description) {
  font-size: var(--meta-desc-fz) !important; /* Cockpit: Größe */
  font-weight: var(--meta-desc-fw) !important; /* Cockpit: Fett */
  line-height: var(--meta-desc-lh) !important; /* Cockpit: Zeilenhöhe */
  margin-bottom: var(--meta-desc-mb) !important; /* Cockpit: Abstand unten */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: var(--meta-desc-lines, 2) !important; /* Cockpit: Zeilenlimit */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Landscape-spezifisch: Etwas größer (optional, überschreibt Defaults) */
@media (min-width: 1025px) {
  .pano-puzzle .pano-piece .pano-meta {
    gap: var(--meta-gap, 10px) !important; /* Etwas mehr Abstand in Desktop */
  }
}






































/* ==================Performance-Verbesserung - reduziert Repaints, vermeidet unnötige Animationen auf Touch-Geräten==============*/
#infos .lm-colors,
#infos .lm-sizes {
  contain: paint;
}

@media (hover: hover) {
  #infos .lm-colors .swatch,
  #infos .lm-sizes .swatch {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  }
}


/* ==================Sticky Summary (fallback-sicher) Falls dein aktueller Sticky-Block manchmal „springt“:==============*/

#infos {
  position: sticky;
  top: var(--summary-top, 8vh);
  align-self: start;
  min-width: 0;
}





/* ==================Typo-Glättung & Strukturpflege - macht Text konsistent scharf, besonders bei hell/dunkel-Kontrasten==============*/
#infos h1, #infos .price, #infos .variations label {
  font-family: var(--lm-font, 'Inter', sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}




/* ================== EMPFEHLUNGEN – MORPH OBERKANTE ================== */

/* Grund-Setup für die Tiles */
.single-product .sektion-empfehlungen ul.products li.product a > img,
.single-product .related.products           ul.products li.product a > img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0;

  /* hier läuft der Morph */
  animation: lmRelMorph 26s ease-in-out infinite alternate;
}


/* ================== EMPFEHLUNGEN – LEBENDIGER WAVY?TREPPEN-MORPH ================== */

.single-product .sektion-empfehlungen ul.products li.product a > img,
.single-product .related.products           ul.products li.product a > img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  animation: lmRelMorphWaveSteps 16s ease-in-out infinite alternate;
}

/* lebendigere Bewegung */
@keyframes lmRelMorphWaveSteps {
  /* 0% – runde, weiche Welle */
  0% {
    clip-path: polygon(
      0%   4%,
      8%   6%,
      16%  8%,
      24%  9%,
      32%  8%,
      40%  6%,
      48%  4%,
      56%  5%,
      64%  7%,
      72%  9%,
      80%  7%,
      88%  5%,
      96%  4%,
      100% 5%,
      100% 100%,
      0%   100%
    );
  }

  /* 25% – Welle verschoben, andere Phase */
  25% {
    clip-path: polygon(
      0%   7%,
      8%   8%,
      16%  9%,
      24%  7%,
      32%  5%,
      40%  4%,
      48%  5%,
      56%  7%,
      64%  9%,
      72%  8%,
      80%  6%,
      88%  5%,
      96%  4%,
      100% 4%,
      100% 100%,
      0%   100%
    );
  }

  /* 50% – Übergangsform Richtung Treppe */
  50% {
    clip-path: polygon(
      0%   5%,
      8%   5%,
      16%  6%,
      24%  8%,
      32%  8%,
      40%  9%,
      48%  9%,
      56% 11%,
      64% 11%,
      72%  8%,
      80%  6%,
      88%  5%,
      96%  4%,
      100% 4%,
      100% 100%,
      0%   100%
    );
  }

  /* 75% – richtige Treppenstufen, klare Plateaus */
  75% {
    clip-path: polygon(
      0%   3%,
      8%   3%,
      16%  3%,
      24%  8%,
      32%  8%,
      40%  8%,
      48% 13%,
      56% 13%,
      64% 13%,
      72%  7%,
      80%  7%,
      88%  7%,
      96%  2%,
      100% 2%,
      100% 100%,
      0%   100%
    );
  }

  /* 100% – Treppenstruktur bleibt, leicht beruhigt */
  100% {
    clip-path: polygon(
      0%   3%,
      8%   3%,
      16%  3%,
      24%  7%,
      32%  7%,
      40%  7%,
      48% 11%,
      56% 11%,
      64% 11%,
      72%  5%,
      80%  5%,
      88%  5%,
      96%  3%,
      100% 3%,
      100% 100%,
      0%   100%
    );
  }
}

/* Fallback + weniger Bewegung */
@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)) {
  .single-product .sektion-empfehlungen ul.products li.product a > img,
  .single-product .related.products           ul.products li.product a > img{
    clip-path: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .single-product .sektion-empfehlungen ul.products li.product a > img,
  .single-product .related.products           ul.products li.product a > img{
    animation: none;
  }
}
}

/* =========================================================
   RELATED PRODUCTS – FINAL CLEAN VERSION
   ========================================================= */

/* Überschrift = gleiche Rail wie Karten-Text */
.single-product section.related.products > h2{
  padding-left: clamp(1rem, 2vw, 2rem);
  padding-right: clamp(1rem, 2vw, 2rem);
  margin-bottom: 2rem;
}

/* Grid: außen full-bleed, innen kontrollierter Abstand */
.single-product section.related.products ul.products{
  padding: 0 !important;
  margin: 0 !important;

  column-gap: clamp(0.8rem, 1.5vw, 1.6rem);
  row-gap: 2.5rem;
}

/* Karten: kein Außenabstand */
.single-product section.related.products ul.products li.product{
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Bilder: randlos */
.single-product section.related.products ul.products li.product img{
  display: block;
  width: 100%;
  margin: 0;
}

/* Text in Karten eingerückt */
.single-product section.related.products
li.product .woocommerce-loop-product__title,
.single-product section.related.products
li.product .price{
  padding-left: clamp(1rem, 2vw, 2rem);
  padding-right: clamp(1rem, 2vw, 2rem);
}

/* Mobile Feinschliff */
@media (max-width: 767px){
  .single-product section.related.products > h2{
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }

  .single-product section.related.products
  li.product .woocommerce-loop-product__title,
  .single-product section.related.products
  li.product .price{
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}


/* === ÄHNLICHE PRODUKTE – HEADLINE = KARTENTEXT-RAIL === */
.single-product section.related.products > h2{
  padding-left: clamp(1rem, 2vw, 2rem);
  padding-right: clamp(1rem, 2vw, 2rem);
  margin-bottom: 2rem;
}




/*================= KACHELN DEHNEN ÄHNLICHE PRODUKTE -ENDE =================== */




/*================================ COCKPIT KACHELN EMPFEHLUNGEN ====================================*/
:root{
  --empf-gap: 24px;           /* Abstand zwischen Kacheln */
  --empf-radius: 10px;        /* Ecken Bild */
  --empf-title-fz: 20px;      /* Titelgröße */
  --empf-price-fz: 19px;      /* Preisgröße */
  --empf-fg: #1f3a1f;         /* Text */
  --empf-accent: #326132;     /* Akzent/Preis */
}


  /* neu, falls wir sie später im Morph nutzen wollen AMPLITUTE MORPH KACHELN*/
  --morph-wave-amp: 16%;
  --morph-step-amp: 10%;
}



/* Container bündig – keine Innenabstände vom Widget */
.single-product .empfehlungen{ padding-inline:0 !important; }
.single-product .empfehlungen ul.products{
  column-gap: var(--empf-gap) !important;
  row-gap: var(--empf-gap) !important;
}

/* Variante "nahtlos" (an Container die Klasse .nahtlos hängen) */
.single-product .empfehlungen.nahtlos ul.products{
  column-gap: 0 !important; row-gap: 0 !important;
}

/* Bild 2:3, sauber beschnitten */
.single-product .empfehlungen ul.products li.product a img{
  display:block; width:100%;
  aspect-ratio: 2 / 3;       /* Portraitformat */
  object-fit: cover;
  border-radius: var(--empf-radius);
}


/* Typo/Karteninhalt – Ähnliche Produkte (stärkerer Selector) */
.single-product .empfehlungen ul.products li.product .woocommerce-loop-product__title{
  color: var(--empf-fg) !important;
  font-size: var(--empf-title-fz) !important;
  line-height: 0.5;
  margin: 12px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-product .empfehlungen .price{
  color: var(--empf-accent) !important;
  font-size: var(--empf-price-fz);
  margin: 0;
}
.single-product .empfehlungen .price del{ opacity:.55; }
.single-product .empfehlungen .price ins{ text-decoration:none; }

/* CTA in Karten dezent & mittig lassen (falls vorhanden) */
.single-product .empfehlungen ul.products li.product a.button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:30px; padding:8px 16px; border-radius:22px;
  margin-top:12px; margin-inline:auto;
}

/* Headline enger, Block dafür mit äußerem Margin (Option A) oder Spacer (Option B) arbeiten */
.single-product .empfehlungen > h2{
  margin-block: 0 16px; /* unten ein bisschen Luft lassen */




}
/*================================ COCKPIT KACHELN EMPFEHLUNGEN - ENDE====================================*/










/* ============== SEITENAUFBAU===============*/

  /* ---- Stellwerte zentral ---- */
.einzel{
  --break:1024px; --lockW:1360px; --gap:24px;
  --infoW:560px; --infosTopDesktop:80px; --infosTopMobile:24px; --infosPadX:60px;
  --bilderMaxW:880px;
  --stack:14px; --stack-sm:10px; --img-stack:14px;
  --buyBarBg:rgba(15,63,47,.96); --buyBarNeon:#6affcb;
  --buyBarGlow1:rgba(106,255,203,.20); --buyBarGlow2:rgba(106,255,203,.10);
}

.einzel{ gap:var(--gap); }

/* ========================= Linke Spalte: Galerie gestapelt ========================= */
.einzel .woocommerce-product-gallery{ width:100%; }
.einzel .flex-viewport, .einzel .woocommerce-product-gallery__trigger{ display:none !important; }
.einzel .flex-control-thumbs{ display:block !important; margin:0; padding:0; }
.einzel .flex-control-thumbs li{ list-style:none; width:100% !important; }
.einzel .flex-control-thumbs img{ width:100% !important; height:auto !important; display:block; object-fit:cover; }
.einzel .woocommerce-product-gallery__wrapper, .einzel .woocommerce-product-gallery__image{ width:100% !important; }
.einzel > .bilder{ margin-top:0 !important; padding-top:0 !important; display:flow-root; }
.einzel > .bilder :is(.e-con-inner,.elementor-widget-container,.woocommerce-product-gallery,.woocommerce-product-gallery__wrapper,.flex-viewport,.flex-control-thumbs){
  margin-top:0 !important; padding-top:0 !important; border-top:0 !important;
}
.einzel > .bilder .woocommerce-product-gallery{ position:relative; }
.einzel > .bilder .woocommerce-product-gallery .onsale{ position:absolute; top:8px; left:8px; margin:0; }

/* ========================= Rechte Spalte ========================= */
.einzel > .infos{ padding-left:var(--infosPadX); padding-right:var(--infosPadX); box-sizing:border-box; overflow:visible; }
.einzel > .infos{ padding-top: var(--infosTopDesktop) !important; }

@media (max-width:767.98px){
  .einzel > .infos{
    padding-top: var(--infosTopMobile) !important;
    padding-left:8px !important; padding-right:8px !important; /* GESAMT-GUTTER bleibt */
  }
  /* Widgets mobil seitlich bündig halten (nur Widgets, nicht der Gesamt-Container) */
  .einzel > .infos :where(.elementor-widget,.elementor-widget-container,.product_meta){
    padding-left:0 !important; padding-right:0 !important;
    margin-left:0 !important;  margin-right:0 !important;
  }
}

/* ========================= Spaltenbreiten & Deckel ========================= */
@media (min-width:1024px){
  .einzel{ max-width:var(--lockW); margin:0 auto; }
  .einzel > .infos{ flex:0 0 var(--infoW); max-width:var(--infoW); }
  .einzel > .bilder{ flex:1 1 var(--bilderMaxW); max-width:var(--bilderMaxW); min-width:0; align-content:flex-start; }
  .einzel > .bilder :is(.woocommerce-product-gallery img,.woocommerce-product-gallery__wrapper img,.flex-viewport img,.flex-control-thumbs img){
    max-width:100% !important; height:auto; display:block; object-fit:contain;
  }
}












/* ========================= Header-Widgets (unverändert) ========================= */
/*#lm-cart.lm-bag, #lm-search.lm-search{ width:auto; max-width:var(--bag-size,300px); position:fixed; }*/



/* ========================= Abstände / Rhythmus ========================= */
.einzel .flex-control-thumbs li{ margin:0 0 var(--img-stack) 0; }
.einzel .flex-control-thumbs li:last-child{ margin-bottom:0; }

.einzel > .infos{ display:flex; flex-direction:column; row-gap:var(--stack); }

.einzel > .infos .elementor-widget, .einzel > .infos .elementor-widget-container{
  margin:0 !important; padding-left:0 !important; padding-right:0 !important;
}

.einzel > .infos .product_title{ margin:0 0 var(--stack) 0 !important; }
.einzel > .infos .price{ margin:0 0 var(--stack-sm) 0 !important; }
.einzel > .infos .woocommerce-product-details__short-description{ margin:0 0 var(--stack) 0 !important; }
.einzel > .infos .woocommerce-product-attributes{ margin:0 0 var(--stack) 0; }

.einzel > .infos .variations_form{ margin:0 0 var(--stack-sm) 0 !important; }
.einzel > .infos .variations_form td, .einzel > .infos .variations_form .value, .einzel > .infos .variations_form select{ margin:0 !important; }

/* Standard: Desktop/Allgemein – Wrap erlaubt (Button/Qty neben Swatches möglich) */
.einzel > .infos form.cart{
  display:flex; flex-wrap:wrap; gap:var(--stack-sm);
  align-items:stretch;
  margin:0 0 var(--stack) 0 !important;
}
.einzel > .infos form.cart .quantity{ max-width:96px; }
.einzel > .infos form.cart .single_add_to_cart_button{ flex:1 0 auto; width:100%; }

.einzel > .infos :where(p,ul,ol){ margin:0 0 var(--stack-sm) 0; }
.einzel > .infos :where(ul,ol){ padding-left:1.2em; }

@media (max-width:767.98px){
  .einzel{ --stack:12px; --stack-sm:8px; --img-stack:12px; }
}







/* Utility für Script-Collapsing */
.sp-collapsed{ display:none !important; }

/* === Mobile: NUR Widgets & Bilder randlos, sonst nichts ändern === */
@media (max-width:767.98px){
  /* 1) Related-Block bekommt KEIN zusätzliches Mobile-Padding mehr */
  .related.products{ padding-left:0; padding-right:0; }

  /* 2) Alle Bilder mobil randlos (war schon so – belassen/absichern) */
  .einzel img, .related.products img{ padding:0; margin:0; max-width:100%; }

  /* 3) Widget-Container mobil OHNE seitliches Padding (8px entfernt) */
  .einzel .elementor-widget-container,
  .related.products .elementor-widget-container{
    padding-left:0; padding-right:0;
  }
}






/* Nur im LM-Header dublette Theme/Plugin-Buttons verstecken */
.lm-header :is(
  .elementor-search-form,
  .elementor-menu-cart__toggle_button,
  .elementor-menu-cart__container,
  .site-header-cart,
  a.cart-contents,
  .dgwt-wcas-search-wrapp
){
  display: none !important;
}







/* ===== ICON STYLE WARENKORB ===== LM Bag + Search – alter Neon-Look (konfliktarm) ===== */

/* Adminbar berücksichtigen */
:root{ --lm-adminbar: 0px; }
body.admin-bar{ --lm-adminbar: 32px; }
.elementor-editor-active{ --lm-adminbar: 48px; }

/* ---------- BAG (Tasche + reine Zahl) ---------- */
:root{
  /* Position/Layer */
  --bag-top: 36px;         /* Abstand vom oberen Rand */
  --bag-right: 44px;       /* Abstand vom rechten Rand */
  --bag-z: 5400;

  /* Icon-Look */
  --bag-size: 34px;        /* 32–40 je nach Geschmack */
  --bag-color:#8edcc0;     /* Neongrün */
  --bag-hover:#a9ffe2;
  --bag-glow: 0 0 10px rgba(125,255,203,.55);
  --bag-shift-x: 0px;
  --bag-shift-y: 3px;

  /* Zähler (nur Zahl) */
  --count-size:14px;
  --count-top:-4px;
  --count-right:-10px;
  --count-color:#8edcc0;
  --count-shadow:0 0 10px rgba(125,255,203,.65);
}

#lm-cart.lm-bag{
  position: fixed;
  top: calc(var(--bag-top) + var(--lm-adminbar));
  right: var(--bag-right);
  z-index: var(--bag-z);
  width: var(--bag-size); height: var(--bag-size);
  display:grid; place-items:center;
  text-decoration:none; background:transparent; border:0; padding:0;
  -webkit-tap-highlight-color: transparent; cursor:pointer;
}
#lm-cart .lm-ico{
  width: var(--bag-size); height: var(--bag-size);
  display:block; color: var(--bag-color);
  transform: translate(var(--bag-shift-x), var(--bag-shift-y));
  filter: drop-shadow(var(--bag-glow));
  transition: color .15s ease, filter .15s ease, transform .15s ease;
}
#lm-cart:hover .lm-ico{
  color: var(--bag-hover);
  filter: drop-shadow(0 0 12px rgba(169,255,226,.7));
}
#lm-cart .cart-count{
  position:absolute; pointer-events:none;
  top: var(--count-top); right: var(--count-right);
  color: var(--count-color);
  font: 700 var(--count-size)/1 'Inter', system-ui, sans-serif;
  text-shadow: var(--count-shadow);
}

/* Elementor-Wrapper neutralisieren (falls Widget „zieht“) */
.elementor-widget-html:has(#lm-cart),
.elementor-shortcode:has(#lm-cart){ width:auto !important; display:contents !important; }

/* ---------- SEARCH (Lupe + Overlay, CSS-only) ---------- */
:root{
  --icons-gap:16px;           /* Abstand Lupe?? Bag */
  --search-size:30px;
  --search-color:#8cdec1;
  --search-hover:#a9ffe2;
  --search-glow:0 0 10px rgba(125,255,203,.55);

  /* Panel */
  --panel-maxw:560px;
  --panel-pad:20px 22px;
  --panel-bg:rgba(10,10,10,.78);
  --panel-border:1px solid rgba(255,255,255,.18);
  --panel-radius:14px;

  /* Input */
  --input-color:#fff;
  --input-ph:rgba(255,255,255,.7);
  --input-underline:#7dffcb;

  --close-size:28px;
  --backdrop:rgba(0,0,0,.28);
}

#lm-search.lm-search{
  position: fixed;
  top: calc(var(--bag-top) + var(--lm-adminbar));
  right: calc(var(--bag-right) + var(--bag-size) + var(--icons-gap));
  z-index: calc(var(--bag-z) - 2);
}
.lm-search-btn{
  width: var(--search-size); height: var(--search-size);
  display:grid; place-items:center; cursor:pointer;
  color: var(--search-color);
  filter: drop-shadow(var(--search-glow));
  transition: color .15s ease, filter .15s ease, transform .15s ease;
  transform: translateY(2px); /* optische Zentrierung */
}
.lm-search-btn:hover{ color: var(--search-hover); transform: translateY(1px); }
.lm-search-ico{ width:100%; height:100%; display:block; }

/* Overlay-Panel (Checkbox-Toggle) */
.lm-search-panel{
  position: fixed; left:50%; top: calc(80px + var(--lm-adminbar));
  transform: translateX(-50%) translateY(-8px);
  width: min(var(--panel-maxw), 92vw);
  background: var(--panel-bg);
  border: var(--panel-border); border-radius: var(--panel-radius);
  padding: var(--panel-pad);
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.45), 0 6px 18px -8px rgba(0,0,0,.32);
  display:grid; grid-template-columns: 1fr auto auto; gap:10px; align-items:center;

  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
  z-index: calc(var(--bag-z) + 2);
}
#lm-search-toggle:checked ~ .lm-search-panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translateX(-50%) translateY(0);
}

/* Backdrop */
.lm-search-backdrop{
  position: fixed; inset:0; background: var(--backdrop);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, visibility 0s .18s;
  z-index: calc(var(--bag-z) + 1);
}
#lm-search-toggle:checked ~ .lm-search-backdrop{
  opacity:1; visibility:visible; pointer-events:auto;
}

/* Input underlined */
.lm-search-panel input[type="search"]{
  appearance:none; -webkit-appearance:none;
  background: transparent; border:0; outline:0;
  color: var(--input-color);
  font: 500 18px/1.4 'Inter', system-ui, sans-serif;
  padding: 10px 2px 8px;
  border-bottom: 2px solid var(--input-underline);
}
.lm-search-panel input::placeholder{ color: var(--input-ph); }

/* Submit + Close */
.lm-search-go{
  background: transparent; border:0; color: var(--search-color);
  font: 600 14px/1 'Inter', system-ui, sans-serif; padding: 10px 8px; cursor:pointer;
}
.lm-search-go:hover{ color: var(--search-hover); }
.lm-search-close{
  width: var(--close-size); height: var(--close-size);
  display:grid; place-items:center; color:#fff; opacity:.9; cursor:pointer;
  font-size: 24px; line-height:1;
}
.lm-search-close:hover{ opacity:1; }

/* Mobile Tuning */
@media (max-width:520px){
  :root{
    --bag-top:14px; --bag-right:34px; --bag-size:30px;
    --icons-gap:12px; --search-size:28px;
    --count-size:13px; --count-top:-4px; --count-right:-8px;
  }
  .lm-search-btn{ transform: translateY(1px); }
}

/* A11y Helper (falls noch nicht global vorhanden) */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}





/* ===================== */
/* ?? + ?? Transparenz wie Burger */
/* ===================== */

/* Warenkorb */
#lm-cart .lm-ico {
  opacity: 0.85;
  transition: opacity .2s ease, color .15s ease, filter .15s ease, transform .15s ease;
}
#lm-cart:hover .lm-ico {
  opacity: 1;
}

/* Lupe */
.lm-search-btn {
  opacity: 0.85;
  transition: opacity .2s ease, color .15s ease, filter .15s ease, transform .15s ease;
}
.lm-search-btn:hover {
  opacity: 1;
}

/* ========================================================= */
/* ?? ENTER-Button – überschreibt alle Elementor-Styles       */
/* ========================================================= */
.lm-search-panel .lm-search-go,
.lm-search-panel .lm-search-go:focus,
.lm-search-panel .lm-search-go:visited {
  background: #000 !important;    /* schwarz */
  color: #8cdec1 !important;      /* gleiche Farbe wie Panel */
  border: 1px solid #000 !important;
  border-radius: 4px;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .2s ease, color .2s ease;
}

.lm-search-panel .lm-search-go:hover {
  background: transparent !important; /* invertiert beim Hover */
  color: #000 !important;
}

/* Klicks auf das X wieder aktivieren */
.lm-search-close {
  position: relative;
  z-index: 9999;
  pointer-events: auto !important;
  cursor: pointer;
}

/* Falls der Backdrop Klicks blockiert: */
.lm-search-backdrop {
  pointer-events: auto !important;
}

/* Falls das Panel selbst alles abfängt: */
.lm-search-panel {
  pointer-events: auto !important;
}















































/* === Layout-FIX: Wrapper & Spalten === */
.single-product .einzel { 
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gap, 24px) !important;
  max-width: var(--lockW, 1360px) !important;
  margin: 0 auto !important;
  padding: 0 !important; /* Bündig links */
  box-sizing: border-box !important;
}

.single-product .einzel > .bilder, .single-product .einzel > .infos {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Desktop/Tablet: Zweispaltig (>767px und Landscape) – Responsiv */
@media (min-width: 768px) and (orientation: landscape) {
  .single-product .einzel {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  .single-product .einzel > .bilder {
    flex: 1 1 clamp(50%, 60vw, var(--bilderMaxW, 880px)) !important; /* Dominant, skaliert */
    max-width: clamp(50%, 60vw, var(--bilderMaxW, 880px)) !important;
    min-width: 0 !important;
  }
  .single-product .einzel > .infos {
    flex: 0 0 clamp(300px, 30vw, var(--infoW, 560px)) !important; /* Schrumpft stärker */
    max-width: clamp(300px, 30vw, var(--infoW, 560px)) !important;
    font-size: clamp(12px, 1.2vw, 16px) !important; /* Schrift skaliert */
    line-height: 1.4 !important;
    padding: 0 clamp(10px, 3vw, var(--infosPadX, 60px)) !important; /* Responsives Padding */
    box-sizing: border-box !important;
  }
  /* Bilder skalieren ohne Überlapp */
  .single-product .einzel > .bilder img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* Mobile und Portrait: Einspaltig */
@media (max-width: 767.98px), (orientation: portrait) {
  .single-product .einzel {
    flex-direction: column !important;
  }
  .single-product .einzel > .bilder, .single-product .einzel > .infos {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }
  .single-product .einzel > .infos {
    font-size: clamp(14px, 4vw, 16px) !important; /* Mobiler Font */
  }
}











/* ===== OPTIMIERUNGEN ======== */

/* Elementor/Woo-Overrides: Entferne Paddings/Margins */
.single-product .elementor-section, .single-product .e-con, .single-product .elementor-container,
.single-product .woocommerce-product-gallery, .single-product .summary {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* === A11Y Fokus sichtbar, ohne Layout-Sprung === */
#lm-cart:focus-visible,.lm-search-btn:focus-visible,.lm-search-close:focus-visible,
.lm-addbar__btn:focus-visible,.lm-addbar__close:focus-visible{
  outline:2px solid #7dffcb; outline-offset:3px; border-radius:10px;
}

/* === Body-Padding nur wenn Addbar sichtbar === */
body.has-addbar{ padding-bottom: var(--lm-addbar-h,68px); }

/* === Variation-Hinweis & Fehler-Marker === */
.einzel .variations_form select:invalid{ outline:2px solid #ff7d7d; }
.var-hint{
  font:500 13px/1.3 system-ui; color:hsl(0 80% 38%/.95);
  background:hsl(0 85% 96%/.9); padding:4px 8px; border-radius:6px; margin-top:6px;
}

/* === Out-of-Stock robust === */
.single-product .stock.out-of-stock ~ .cart .single_add_to_cart_button{ opacity:.5; pointer-events:none; }
.single-product .stock.out-of-stock ~ .lm-addbar{ display:none !important; }

/* === Reduced Motion === */
@media (prefers-reduced-motion:reduce){
  #lm-cart .lm-ico,.lm-search-btn{ transition:none; filter:none; }
  .lm-addbar.is-visible{ animation:none; }
}

/* === Safe Areas (iOS) === */
.lm-addbar{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }

/* === Cookie-Banner Kollision (Complianz-Höhe via --cmplz-h) === */
body.has-addbar .lm-addbar{ bottom: calc(var(--cmplz-h,0px) + 12px); }

/* === Mobile Search Tuning === */
@media (max-width:520px){
  .lm-search-panel{ gap:8px; }
  .lm-search-panel input{ font-size:16px; }
  .lm-search-close{ width:32px; height:32px; }
}

/* === Visually Hidden Utility === */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); overflow:hidden; white-space:nowrap;
}

/* === Shake (bei fehlender Variation) === */
@keyframes lm-shake{ 0%{transform:translateX(0)}33%{transform:translateX(-4px)}66%{transform:translateX(4px)}100%{transform:translateX(0)} }
.shake{ animation: lm-shake .28s ease; }

/* === (dein vorhandenes CSS für Empfehlungen, Header-Icons, Search, Addbar bleibt wie gepostet) === */











/* =================REZENSION=====================*/

/* Tab-Nav ausblenden, nur den Inhalt des Reviews-Panels zeigen */
.single-product .woocommerce-tabs .tabs { display:none; }
.single-product .woocommerce-Tabs-panel:not(#tab-reviews) { display:none; }

/* etwas Luft über dem Block */
.single-product #tab-reviews { padding-top: 58px; }

/* =================REZENSION=====================*/































/*===============Runde ECKE MENU ===========================================================================================*/


/*AUSGESTELLT========MENUE PANEL ECKEN !!!!!! Beispiel: nur oben rund, unten links eckig, unten rechts leicht rund =========*/
/*.elementor-location-header .menu-holo{
  border-radius: 18px 18px 10px 0px;  /* TL TR BR BL */
}*/

/* Nur unten-links rund, Rest eckig */
/*.elementor-location-header .menu-holo{
  border-radius: 0 0 0 20px;
}*/

/* Diagonal: oben-links rund, unten-rechts rund */
/*.elementor-location-header .menu-holo{
  border-radius: 20px 20px 70px 0px;
}*/






/* OFF: Kann bei Bedarf raus, ist ausgeschaltet -menu-holo Paket – 2025-09-27 */
@media not all {

  /* Panel: bekommt die Rundung + Schatten, aber KEIN overflow:hidden */
  .elementor-location-header .menu-holo{
    position: relative;
    border-radius: 20px 20px 70px 0;
    overflow: visible; /* wichtig: Schatten nicht abschneiden */
    /* nimm entweder box-shadow ODER drop-shadow (drop-shadow clippt nie) */
    /* box-shadow: 0 12px 30px rgba(0,0,0,.25); */
    filter: drop-shadow(0 12px 30px rgba(0,0,0,.25));
  }

  /* Inhalt über dem Grid halten */
  .elementor-location-header .menu-holo > *{
    position: relative;
    z-index: 1;
  }

  /* FALL A: Grid liegt als Pseudo-Element am Panel */
  .elementor-location-header .menu-holo::before{
    content: "";
    position: absolute;
    inset: 0;                     /* vollflächig */
    border-radius: inherit;       /* Rundung übernehmen */
    background: var(--holo-grid); /* dein Grid-Gradient/Bild */
    background-clip: padding-box; /* sauber an Rundung ausrichten */
    pointer-events: none;
    z-index: 0;                   /* unter dem Inhalt */
  }

  /* FALL B: Grid ist ein echtes Kind-Element */
  .elementor-location-header .menu-holo > .grid-overlay{
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--holo-grid);
    background-clip: padding-box;
    pointer-events: none;
    z-index: 0;
  }


  /* Wrapper (optional) nur wenn du den Schatten ganz trennen willst */
  .holo-wrap{ position:relative; /* kein filter hier */ }

  /* Panel mit Rundung, Inhalt & Schatten */
  .elementor-location-header .menu-holo{
    position:relative;
    border-radius: 20px 20px 70px 0;
    overflow:visible;                 /* Schatten nicht abschneiden */
    box-shadow: 0 16px 40px rgba(0,0,0,.25);   /* statt drop-shadow */
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    isolation:isolate;                /* sichert Layering */
  }

  /* Grid im Pseudo-Element: wird mitgeschnitten, aber clippt sauber */
  .elementor-location-header .menu-holo::before{
    content:"";
    position:absolute; inset:0;
    border-radius:inherit;
    background: var(--holo-grid);     /* dein Grid */
    background-clip: padding-box;     /* keine Farbsäume an der Rundung */
    opacity:.28;                      /* feiner */
    pointer-events:none; z-index:0;
  }

  /* Inhalt über dem Grid */
  .elementor-location-header .menu-holo > *{ position:relative; z-index:1; }

}



/* 1) Header-/Sticky-Overlays komplett neutralisieren */
.elementor-location-header,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Elementor Sticky-Effekt legt oft ein ::before – weg damit */
.elementor-location-header.elementor-sticky--effects::before,
.elementor-location-header .elementor-sticky--effects::before{
  content: none !important;
}

/* Falls dein Header-Wrapper mal fullscreen war: Fläche wieder “einschrumpfen” */
header .elementor-element[data-id="eb1e354"]{
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;   /* frisst keine Klicks */
}
header .elementor-element[data-id="eb1e354"] .menu-holo{
  pointer-events: auto !important;   /* Panel bleibt bedienbar */
}

/* END OFF: menu-holo Paket */



/* Festes Panel im Header */
.elementor-location-header .menu-holo{
  border-radius: var(--lm-panel-br);
  box-sizing: border-box;
  width: var(--lm-panel-w);
  padding: var(--lm-panel-pad);
}

/* Drawer / Off-Canvas (Variante A: häufig bei dir) */
.lm-portal.menu-holo.iks-menu{
  border-radius: var(--lm-panel-br);
  box-sizing: border-box;
  width: var(--lm-panel-w) !important;
  max-width: 92vw !important;      /* Safety für kleine Screens */
  padding: var(--lm-panel-pad) !important;
}

/* Drawer / Off-Canvas (Variante B: falls A nicht trifft, bitte nur EINE benutzen) */
.menu-drawer .menu-holo,
.iks-drawer  .menu-holo,
.elementor-popup-modal .menu-holo{
  border-radius: var(--lm-panel-br);
  box-sizing: border-box;
  width: var(--lm-panel-w) !important;
  max-width: 92vw !important;
  padding: var(--lm-panel-pad) !important;
}

/* Grid-Overlay im Drawer rund mitschneiden (falls vorhanden) */
.lm-portal.menu-holo.iks-menu::before,
.lm-portal.menu-holo.iks-menu::after,
.menu-drawer .menu-holo::before,
.iks-drawer  .menu-holo::before,
.elementor-popup-modal .menu-holo::before,
.menu-holo.iks-menu::before,
.menu-holo.iks-menu::after {
  border-radius: inherit !important;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at bottom right, black 97%, transparent 100%);
  mask-image: radial-gradient(circle at bottom right, black 97%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}
@media (max-width: 1024px){
  :root{ --lm-panel-w: 240px; }
}















/* Höhe über aspect-ratio statt Padding-Hack */
.single-product :is(.related.products, .sektion-empfehlungen)
  ul.products li.product a > .lm-rel-frame{
  aspect-ratio: 2 / 3;
}
.single-product :is(.related.products, .sektion-empfehlungen)
  ul.products li.product a > .lm-rel-frame::before{
  content: none !important; /* Padding-Placeholder abschalten */
}










/* === ACF-Motor: Canvas verschieben/zoomen, egal was oben steht === */
.single-product :is(.related.products,.sektion-empfehlungen)
  ul.products li.product a > .lm-rel-frame{
  position: relative; /* falls nicht schon gesetzt */
}

.single-product :is(.related.products,.sektion-empfehlungen)
  ul.products li.product a > .lm-rel-frame > .lm-rel-canvas{
  position: absolute;
  inset: 0;
  transform:
    translate(calc((50% - var(--lm-px,50)*1%)),
              calc((50% - var(--lm-py,50)*1%)))
    scale(var(--lm-sc,1)) !important;
  transform-origin: 50% 50% !important;
  will-change: transform;
}

.single-product :is(.related.products,.sektion-empfehlungen)
  ul.products li.product a > .lm-rel-frame > .lm-rel-canvas > img.lm-related-acf-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}





  
  

/* === Ripple: globaler Canvas-Basisstil === */


.ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* === Ripple fixieren über der gesamten Hero-Bühne === */
.hero-wasserring {
  position: relative;
  isolation: isolate; /* isoliert den Z-Stack sauber */
}

.hero-wasserring .ripple-canvas {
  z-index: 9999; /* höher als Schablonen/Bänder */
  mix-blend-mode: overlay; /* optisch natürlich */
}









/* =======================?? TTRIPODEN-Holo-Button=========================== */
#lm-burger {
  position: fixed;
  left: 16px;
  top: calc(12px + var(--adminbar-h, 0px));
  z-index: 9999;
  width: 80px;
  height: 80px;
  border: none;
  padding: 0;
  cursor: pointer;

  background: linear-gradient(180deg,
              rgba(0,255,200,0.35),
              rgba(0,255,200,0.1));

  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);

  box-shadow:
    0 0 12px rgba(0,255,180,0.4),
    inset 0 0 10px rgba(0,255,180,0.3);

  border-radius: 0;

  transition: box-shadow 0.3s ease, transform 0.3s ease;

  /* ORIGINAL MASK */
  -webkit-mask: url('/wp-content/uploads/2026/02/hamburger-tripode2-wurde-eingesetzte-291025.svg') center/contain no-repeat;
  mask: url('/wp-content/uploads/2026/02/hamburger-tripode2-wurde-eingesetzte-291025.svg') center/contain no-repeat;
}

#lm-burger:hover {
  box-shadow:
    0 0 18px rgba(0,255,200,0.6),
    inset 0 0 12px rgba(0,255,200,0.4);
  transform: scale(1.06);
}

#lm-burger .tripod-icon {
  display: none;
}












/* =======================HAARSPALTEN ENTFERNEN  =========================== */
/* ?? entfernt feine Haarlinien zwischen den Tiles */
.pano-piece {
  overflow: hidden;
}

.pano-piece img {
  display: block;
  width: 100.2%;
  height: 100.2%;
  object-fit: cover;
  transform: translate(-0.1%, -0.1%);
  backface-visibility: hidden;
}




/* sorgt für gleichmäßigen Abstand zwischen LoopGrid-Abschnitten */
.elementor-widget-template + .elementor-widget-template,
.elementor-widget-shortcode + .elementor-widget-template,
.elementor-widget-template + .elementor-widget-shortcode {
  margin-top: 60px; /* oder was du ästhetisch brauchst */
}

/* optional: Abstand unter jedem Puzzle */
.pano-puzzle {
  margin-bottom: 60px;
}


/* ?? titel weg im archive */
.woocommerce .elementor {
  margin: 0;
  padding: 0;
}
.woocommerce .elementor-section {
  width: 100% !important;
  max-width: none !important;
}



/* ?? Grundsetup für Puzzle-/Loop-Container */
.lademeister-puzzle-wrapper,
.lademeister-puzzle-wrapper .elementor-container,
.lademeister-puzzle-wrapper .elementor-section {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Wenn du im Container gezielt Padding brauchst */
.lademeister-puzzle-wrapper .loop-container {
  padding-top: var(--loop-pad-top, 0px);
  padding-bottom: var(--loop-pad-bottom, 0px);
}


/* ?? padding im looptemplate--funzt noch nicht!!! */
.loop-container {
  --loop-pad-top: 20px;
  --loop-pad-bottom: 40px;
}












.lademeister-gap {
  background: rgba(255,255,255,0.1);
  padding: 8vh 0;
  text-align: center;
  backdrop-filter: blur(6px);
}
.lademeister-gap h2 {
  font-size: 2rem;
  color: white;
}
.lademeister-gap .elementor-button {
  margin-top: 1rem;
  border: 1px solid rgba(255,255,255,0.4);
  color: white;
  transition: 0.3s ease;
}
.lademeister-gap .elementor-button:hover {
  border-color: #00ffb3;
  color: #00ffb3;
}




/* === Ripple: globaler Canvas-Basisstil === */


.ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* === Ripple fixieren über der gesamten Hero-Bühne === */
.hero-wasserring {
  position: relative;
  isolation: isolate; /* isoliert den Z-Stack sauber */
}

.hero-wasserring .ripple-canvas {
  z-index: 9999; /* höher als Schablonen/Bänder */
  mix-blend-mode: overlay; /* optisch natürlich */
}








/* === ich glaub die animierten neon teiler im puzzel === */
.inner-divider {
  position: absolute;
  right: 0;
  top: var(--offset, 15%);
  width: 2px;
  height: var(--len, 45%);
  background: linear-gradient(to bottom,
    rgba(0,255,0,0) 0%,
    rgba(0,255,120,0.25) 15%,
    rgba(0,255,150,0.9) 50%,
    rgba(0,255,120,0.25) 85%,
    rgba(0,255,0,0) 100%);
  pointer-events: none;
  opacity: 2;
  mix-blend-mode: screen;
  z-index: 2;
  animation: holoStretch 12s ease-in-out infinite;
  transform-origin: center top;
  will-change: height, top, opacity, filter;
}

@keyframes holoStretch {
  0%, 100% {
    height: var(--len, 45%);
    top: var(--offset, 15%);
    opacity: 0.7;
    filter: blur(0.3px);
  }
  20% {
    height: 100%; /* volle Kachelhöhe */
    top: 0%;
    opacity: 0.95;
    filter: blur(0.4px);
  }
  45% {
    height: 70%;
    top: 10%;
    opacity: 0.8;
  }
  65% {
    height: 35%;
    top: 40%;
    opacity: 0.6;
  }
  85% {
    height: 90%;
    top: 5%;
    opacity: 0.9;
  }
}

.amsee .pano-piece:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 10%;
  right: 0;
  height: 80%;
  width: 1.2px;
  background: rgba(0,255,150,0.9);
  box-shadow: 0 0 6px rgba(0,255,150,0.4);
}










/* ===================Globale Anwendung von Kursiv und Letterspacing auf Produktname=============== */
.pano-meta .meta-title {
  font-style: var(--meta-title-style);
  letter-spacing: var(--meta-title-ls);
}
.pano-meta .meta-desc {
  color: var(--meta-desc-clr);
}
.pano-meta .meta-price {
  color: var(--meta-price-clr);
}








/* ================Überschrift, Größe und Abstände im Organischen Text================ */

.karaoke-headline {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 1.2;
  margin: 0 0 12vh 0;
  font-weight: 300;
  color: #666;
}

.morph-karaoke .organic-text p {
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  line-height: 1.7;
}

.organic-text p {
  margin-bottom: 15vh;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.7;
  color: #444;
}





/* ================Text hervorheben -off gestellt ================ */
/*.organic-text .karaoke-highlight {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}*/



/* ================ MORPH DOPPELDECKER – CLEAN ================ */

/* Äußerer Block für Foto + Morph */
.morph-spot-block {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffffff;

  /* dünne Kante nach unten verhindern */
  margin-bottom: -1px;
}

/* Basisfoto (unter dem Morph) – gibt die Höhe vor */
.morph-spot-bg {
  display: block;
  width: 100%;
  height: auto;   /* Bild bestimmt die Höhe ? auch neue Panorama-Bilder ok */
}

/* Overlay mit Morph-Loch */
.morph-spot-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;     /* über dem Basisfoto */
}

/* SVG passt sich an die Blockgröße an */
.morph-spot-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Bild im Loch – Drift kommt per GSAP */
.morph-spot-svg image {
  transform-origin: center center;
}

/* Slogan-Overlay über dem Doppeldecker */
.morph-spot-text {
  position: absolute;
  inset: 0;                  /* füllt den ganzen Block */
  z-index: 10;               /* über Bild + Morph */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;      /* nichts blockieren */
  text-align: center;
  padding: 0 5vw;            /* etwas Luft links/rechts */
}

.morph-spot-text span {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
  line-height: 1.1;
  opacity: var(--slogan-opacity, 1);
}

/* Optional: weichere Schriftvariante */
.morph-spot-block.soft-slogan {
  --slogan-opacity: 0.3;
}

/* ABSCHNITT "WER IST LADEMEISTER" DARUNTER */
.lm-section-slogan {
  padding: 18vh 8vw 12vh;
  background: #ffffff;
  text-align: left;
}

/* Überschrift */
.lm-section-title {
  margin: 0 0 8vh 0;
  font-size: clamp(3.4rem, 3vw, 4.1rem);
  line-height: 1.1;
  font-weight: 100;
  letter-spacing: 0.05em;
  color: #0c2626;
}

/* Fließtext */
.lm-section-slogan p {
  margin: 0;
  font-size: clamp(1.4rem, 2.8vw, 1.5rem);
  line-height: 2;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #0c2626;
}

/* Desktop: Platz für Menü */
@media (min-width: 1024px) {
  .lm-section-slogan {
    padding-left: calc(8vw + 260px);
  }
}



.lm-section-title + p {
  margin-top: 0;
}

.lm-section-title:not(:first-child) {
  margin-top: 15vh;
}




/* Alle Karaoke-Zeilen linksbündig und an der linken Kante verankern */
.organic-text .smart-text {
  text-align: left;
}

.organic-text .smart-text .line {
  display: block;
  transform-origin: 0% 50%; /* links zentrieren ? Bewegung schwingt von der linken Kante aus */
}












/* Dekor-Maske HERO ;) */
./* Hero-Bühne: darf überlappt werden */
.miri-start-obercontainer {
  position: relative;
  overflow: visible;
  z-index: 1;
}

/* Mini-Section zwischen Hero und Morph */
.lm-hero-divider-wrap {
  position: relative;
  z-index: 5;           /* über dem Hero, unter Menü/Holo */
  min-height: 0;
  padding: 0;           /* kein zusätzlicher Abstand */
}

/* Der eigentliche Bogen */
.lm-hero-divider {
  position: absolute;
  top: -6vw;            /* wie weit er in den Hero hineinbeißt */
  left: 0;
  width: 100%;
  height: 10vw;         /* Höhe der Welle */
  pointer-events: none;
}

/* SVG skaliert über die ganze Breite */
.lm-hero-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Wellenfarbe (an Hintergrund anpassen) */
.lm-hero-divider-shape {
  fill: #ffffff;        /* gleiche Farbe wie Morph-/Seitenhintergrund */
}

/* Die Maske sitzt über dem Hero, aber unter dem Inhalt im Morph */
.hero-morph-mask {
  z-index: 6;  /* bleibt absolut in .morph-karaoke, nur höher als die Hero-Bühne */
}
.hero-morph-mask {
  position: absolute;
  top: -8vw;   /* vorher -6vw ? weiter hoch ins Hero-Bild */
  left: 0;
  width: 100%;
  height: 10vw; /* ein bisschen höher, damit du genug Fläche hast */
  pointer-events: none;
}






/* Deko Maske  - Doppeldecker oben ;) */
/* Section mit der Welle, sitzt ÜBER dem Bild */
.lm-bottom-divider-section {
  position: relative;
  z-index: 5;       /* über dem Bild-Abschnitt */
  min-height: 0;
  padding: 0;
  background: #ffffff;  /* gleiche Farbe wie Seitenhintergrund */
}

/* Vollbreit-Bild-Section darunter – darf überlappt werden */
.lm-bottom-image {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Die Welle selbst */
.lm-bottom-divider {
  position: absolute;
  left: 0;
  bottom: -6vw;     /* wie weit die Welle in das Bild darunter reinragt */
  width: 100%;
  height: 10vw;     /* Höhe der Welle */
  pointer-events: none;
}

/* SVG skalieren */
.lm-bottom-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Farbe der Welle = Hintergrund oben */
.lm-bottom-divider-shape {
  fill: #ffffff;    /* ggf. dein Off-White */
}













/* Mobile: Bilder wieder volle Höhe einnehmen – wie vorher! */
@media (max-width: 767px) {
  .e-loop-item img,
  .pano-piece img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}


/* Reset: Links & Zeilen im Holo-Menü dürfen grundsätzlich klickbar sein */
.menu-holo.iks-menu .iksm-term__link,
.menu-holo.iks-menu .iksm-term_inner {
  pointer-events: auto;
}













/* Basis-Sicherheit: Box-Sizing, keine Lücken durch Padding/Margin */
.pano-grid,
.pano-piece {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Standard: Portrait = gestapelte Kacheln */
@media (orientation: portrait) {
  .pano-grid {
    display: block;
    font-size: 0;      /* verhindert Lücken durch Inline-Whitespace */
  }

  .pano-piece {
    display: block;
    width: 100%;
  }
}

/* Landscape: echtes Puzzle, eine Reihe, keine Gaps */
@media (orientation: landscape) {
  .pano-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: flex-start;
    align-items: stretch;
    font-size: 0;      /* falls irgendwas inline ist -> keine Zwischenräume */
  }

  .pano-piece {
    flex: 0 0 auto;
  }
}



/* iOS-spezifischer Fallback für Landscape,
   falls WebKit das Puzzle zerreißt */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) and (max-height: 500px) {
    .pano-grid {
      display: flex;
      flex-wrap: wrap;          /* darf umbrechen */
      gap: 0;
      font-size: 0;
    }

    .pano-piece {
      width: 50% !important;    /* einfache 2-Spalten-Kacheln */
      height: auto !important;
      flex: 0 0 auto;
      background-size: cover !important;
      background-position: center !important;
    }
  }
}




/* ============================================================
   VARIABLEN – SWATCHES (Color + Size)
   ============================================================ */
:root{

  /* ===========================
     Swatch-Grundlayout
     =========================== */
  --lmC-w: 30px; 
  --lmC-h: 30px; 
  --lmC-gap: 8px;

  --lmC-r-tl: 30px; 
  --lmC-r-tr: 30px; 
  --lmC-r-br: 30px; 
  --lmC-r-bl: 30px;

  --lmC-bg: #ffffff; 
  --lmC-fg: #111111;

  --lmC-hover-overlay: #ffffff85;

  /* COLOR – Selected Ring (HELL) */
  --lm-ring-color: #2a2a2a;

  /* SIZE – Selected Ring (HELL) */
  --lm-size-ring: #2a2a2a;

  /* SIZE – Holo-Opacity (HELL) */
  --lm-size-holo-opacity: .35;

  /* COLOR – Basis-Schatten (HELL) */
  --lm-color-shadow:
    0 1px 0 rgba(60,60,60,.35),
    0 4px 6px rgba(60,60,60,.22);

  --lm-disabled-opacity: .6;
  --lm-stock-green: #6affcb;
}

/* ============================================================
   DARK – Swatch Overrides
   ============================================================ */

.elementor-location-single.product_cat-dark{

  /* COLOR – Ring */
  --lm-ring-color: #9ad7ba;

  /* SIZE – Ring */
  --lm-size-ring: #9ad7ba;

  /* SIZE – Holo-Opacity (DUNKEL) */
  --lm-size-holo-opacity: .55;

  /* COLOR – Basis-Schatten (DUNKEL) */
  --lm-color-shadow:
    0 2px 2px rgba(0,0,0,.55),
    0 6px 10px rgba(0,0,0,.55);
}



/* B) Woo/Theme-Reste neutralisieren + Dropdowns verstecken */
#infos .elementor-widget-woocommerce-product-variations,
#infos .elementor-widget-woocommerce-product-variations .elementor-widget-container,
#infos .variations_form, #infos .variations, #infos .woocommerce-variation,
#infos .woocommerce-variation-description, #infos .woocommerce-variation-price,
#infos .woocommerce-variation-availability, #infos .woocommerce-variation-add-to-cart,
#infos .single_variation_wrap, #infos .reset_variations,
#infos table.variations, #infos table.variations tr,
#infos table.variations td, #infos table.variations th{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
#infos table.variations{ border-collapse:collapse !important; }
#infos table.variations td, #infos table.variations th{
  padding-left:0 !important; padding-right:0 !important; vertical-align:middle;
}
#infos table.variations .label{
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(1px,1px,1px,1px) !important;
  white-space:nowrap !important; border:0 !important; padding:0 !important; margin:-1px !important;
}
#infos table.variations select{ display:none !important; }







/* ===========================
   Schatten ausbluten lassen 
   =========================== */
#infos .lm-colors,
#infos .lm-sizes{
  contain: initial !important;
  overflow: visible !important;
  padding: 4px 0;
}
#infos table.variations td,
#infos table.variations .value{
  overflow: visible !important;
}


/* Overlay für Grössen */
:root{
  --lmS-hover-overlay: rgba(255,255,255,.72);
}
#infos .lm-size{ position: relative; }










/* LM – Größen-Swatches im Holo-Look (v4) */
#infos .lm-size,
#infos .lm-size > *{
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

#infos .lm-size{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 50px !important;
  height: 45px !important;
  padding: 0 16px !important;
  border-radius: 0px 0px 0px 0px !important;


  color: #000 !important;
  font-weight: 600;
  letter-spacing: .03em;
  overflow: hidden !important;
}

#infos .lm-size > *{
  all: unset;
  display: grid !important;
  place-items: center !important;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  color: inherit;
  cursor: pointer;
}

/* Holo-Layer 1 */
#infos .lm-size::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .40;
  mix-blend-mode: screen;
  background:
    linear-gradient(to bottom,
      rgba(0,255,0,0) 0%,
      rgba(0,255,0,.8) 50%,
      rgba(0,255,0,0) 100%
    ) no-repeat,
    linear-gradient(to right,
      rgba(0,255,0,0) 0%,
      rgba(0,255,0,.5) 50%,
      rgba(0,255,0,.5) 100%
    ) no-repeat;
  background-size: .2px 100%, .2px 100%;
  background-position: 16px 0, 160px 0;
  animation: moveStripe1 24s ease-in-out infinite,
             flashStripe3 60s ease-in-out infinite;
}

/* Holo-Layer 2 */
#infos .lm-size::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .95;
  mix-blend-mode: screen;
  background:
    linear-gradient(to bottom,
      rgba(0,255,0,0) 0%,
      rgba(0,255,0,.5) 60%,
      rgba(0,255,0,0) 100%
    ) no-repeat,
    repeating-linear-gradient(
      90deg,
      rgba(0,255,0,.10) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,0,64,.06) 0 1px,
      transparent 1px 14px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,255,0,.07) 0 1px,
      transparent 1px 6px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,0,64,.04) 0 1px,
      transparent 1px 6px
    ),
    radial-gradient(at 20% 20%, rgba(255,255,200,.25), transparent 60%),
    radial-gradient(at 80% 30%, rgba(128,255,192,.30), transparent 80%),
    radial-gradient(at 25% 90%, rgba(200,128,255,.18), transparent 70%);
  background-size: 1px 100%, auto, auto, auto, auto, auto, auto, auto;
  animation:
    moveStripe2 30s ease-in-out infinite,
    holoShift   18s ease-in-out infinite,
    flickerGlitch 1.4s steps(6) infinite;
}





/* ===========================
   Size Selected Shadow Grund: wird neu über Variablen gelöst
   =========================== */

#infos .lm-size.is-selected,
#infos .lm-size > *.selected,
#infos .lm-size > *[aria-pressed="true"]{
  outline: 2.5px solid var(--lm-size-ring);
  outline-offset: -1px;
}



#infos .lm-size.is-disabled,
#infos .lm-size[aria-disabled="true"],
#infos .lm-size > *[aria-disabled="true"]{
  opacity: .45 !important;
  filter: saturate(.7) brightness(.95);
  cursor: not-allowed !important;
}

#infos .lm-sizes{
  gap: 10px !important;
  overflow: visible !important;
}





/* ===========================
   SIZE – Basis-Schatten (wie Color)
   =========================== */
#infos .lm-size{
  box-shadow: var(--lm-color-shadow) !important;
}

/* ===========================
   SIZE – Selected (Ring + Basis)
   =========================== */
#infos .lm-size.is-selected,
#infos .lm-size > *.selected,
#infos .lm-size > *[aria-pressed="true"]{
  box-shadow:
    var(--lm-color-shadow),
    0 0 0 2px var(--lm-size-ring) !important;
}





/* ============================================================
   SIZE-SWATCHES – HOVER (MEHR TIEFE, HOLO BLEIBT INTAKT)
   ============================================================ */

/* Gemeinsame Basis-Transition */
#infos .lm-size{
  transition:
    filter .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}

/* ===========================
   HELLE SEITE
   =========================== */
@media (hover:hover){
  :not(.product_cat-dark) #infos .lm-size:hover:not(.is-disabled){
    transform: translateY(-1px);

    filter: brightness(1.12) saturate(1.08);

    box-shadow:
      var(--lm-color-shadow),
      0 6px 14px rgba(0,0,0,.18),
      0 0 18px rgba(106,255,203,.35) !important;
  }
}

/* ===========================
   DUNKLE SEITE
   =========================== */
@media (hover:hover){
  .product_cat-dark #infos .lm-size:hover:not(.is-disabled){
    transform: translateY(-1.5px);

    filter: brightness(1.25) saturate(1.15);

    box-shadow:
      var(--lm-color-shadow),
      0 10px 22px rgba(0,0,0,.45),
      0 0 14px rgba(106,255,203,.18),
      0 0 24px rgba(106,255,203,.08) !important;
  }
}





/* ============================================================
   SIZE-SWATCHES – GRETEL STYLE (NUR DUNKLE SEITE)
   ============================================================ */

.elementor-location-single.product_cat-dark #infos .lm-size::before{
  background:
    linear-gradient(
      to bottom,
      rgba(255,120,80,0.0) 0%,
      rgba(255,120,80,0.7) 25%,
      rgba(255,120,80,0.0) 70%
    ) no-repeat,
    linear-gradient(
      to right,
      rgba(120,255,200,0.0) 0%,
      rgba(120,255,200,0.45) 20%,
      rgba(120,255,200,0.45) 70%
    ) no-repeat;

  background-size: .2px 100%, .2px 100%;
}

.elementor-location-single.product_cat-dark #infos .lm-size::after{
  background:
    linear-gradient(
      to bottom,
      rgba(255,140,120,0.0) 0%,
      rgba(255,140,120,0.55) 20%,
      rgba(255,140,120,0.0) 100%
    ) no-repeat,

    repeating-linear-gradient(
      90deg,
      rgba(120,255,200,.06) 0 1px,
      transparent 1px 10px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,64,128,.22) 0 1px,
      transparent 1px 14px
    ),

    repeating-linear-gradient(
      to bottom,
      rgba(120,255,200,.06) 0 1px,
      transparent 1px 6px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,64,128,.16) 0 1px,
      transparent 1px 6px
    ),

    radial-gradient(at 20% 20%, rgba(255,200,200,.30), transparent 40%),
    radial-gradient(at 80% 30%, rgba(255,120,180,.40), transparent 40%),
    radial-gradient(at 25% 90%, rgba(200,120,255,.22), transparent 40%);
}







/* C) Container */
#infos .lm-colors, #infos .lm-sizes{
  display:flex !important; flex-wrap:wrap !important; gap:var(--lmC-gap) !important;
  overflow:visible !important;
  contain: paint;
}

/* Hover-Overlay auf Farben */
#infos .lm-color::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; background:var(--lmC-hover-overlay);
}
@media (hover:hover){
  #infos .lm-color::after{ transition:opacity .15s ease; }
  #infos .lm-color:hover::after,
  #infos .lm-color > *:hover::after{ opacity:1; }
}






#infos .lm-color{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 21px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: rgba(105,105,105,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  box-shadow: none !important;   /* ?? bewusst leer */
  overflow: hidden !important;
}

#infos .lm-color::before{
  content:"";
  position:absolute;
  inset:2.5px;
  border-radius: inherit;
  background: currentColor;
}

#infos .lm-color > span[data-fallback]{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:.7rem;
  font-weight:600;
  color:#9ad7ba !important;
  mix-blend-mode:normal;
}



#infos .lm-color{
  box-shadow: var(--lm-color-shadow) !important;
}

#infos .lm-color.is-selected,
#infos .lm-color > *.selected,
#infos .lm-color > *[aria-pressed="true"]{
  box-shadow:
    var(--lm-color-shadow),
    0 0 0 var(--lm-ring-size) var(--lm-ring-color) !important;
}













/* 1. EINFRIEREN =========== Original WooCommerce-Button komplett unsichtbar, aber funktionsfähig */
.lm-swatch-panel form.cart .single_add_to_cart_button {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}























/* ============================================================
   HINTERGRUND & KATEGORIEN – BEREINIGT (ohne Kategorie-Zuweisungen)
   ============================================================ 
 -> struktur von chatgbt 90px....background-image: url("https://lademeister.co/wp-content/uploads/2026/03/goldpattern-chat2-1.svg"https://lademeister.co/wp-content/uploads/2025/12/g15.png);
*/

/* Standard: helle Einzelproduktseite mit Gold-Struktur */
body.single-product {
  background-color: #ffffff;
  background-image: url("https://lademeister.co/wp-content/uploads/2026/03/Hintergrundstruktur_hell.svg");
  background-repeat: repeat;
  background-size: 200px auto;
  background-position: top left;
}

/* Elementor-Sektionen transparent lassen */
body.single-product .elementor-section {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* ------------------------------------------------------------
   1) SEITENHINTERGRUND + GRUNDLAYOUT
------------------------------------------------------------ */
.elementor-location-single.product_cat-dark {
  background-color: #002827 !important;
  background-image: url("https://lademeister.co/wp-content/uploads/2026/03/Hintergrundstruktur_dunkel.svg") !important;
  background-repeat: repeat !important;
  background-size: 100px auto !important;
  background-position: top left !important;
}













/* ===============================
   CTA CORE – STABIL & SKALIERBAR
   =============================== */


.lm-imperial-wrapper{
  position: relative;
  display: inline-block;
  overflow: visible;
}
/*.lm-imperial-wrapper{
  position: relative;
  display: inline-flex;   /* ? wichtig */
  justify-content: flex-start;
  align-items: flex-start;
  width: fit-content;     /* ? schrumpft auf Inhalt */
  margin-left: 0;         /* ? links */
}*/

.lm-imperial-fake-button{
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,0.06); /* Träger */
  cursor: pointer;
  overflow: visible;
  z-index: 2;
}

/* HELLE VERSION */
.elementor-location-single:not(.product_cat-dark)
.lm-imperial-fake-button{
  width: 320px;
  height: 166px;

  -webkit-mask: url("https://lademeister.co/wp-content/uploads/2026/03/Kristall-Schmetterling_CTA_Shop.svg")
    center / contain no-repeat;
  mask: url("https://lademeister.co/wp-content/uploads/2026/03/Kristall-Schmetterling_CTA_Shop.svg")
    center / contain no-repeat;
}

/* DUNKLE VERSION */
.elementor-location-single.product_cat-dark
.lm-imperial-fake-button{
  width: 280px;
  height: 120px;

  -webkit-mask: url("https://lademeister.co/wp-content/uploads/2026/03/Fluegel_CTA_Shop.svg")
    center / contain no-repeat;
  mask: url("https://lademeister.co/wp-content/uploads/2026/03/Fluegel_CTA_Shop.svg")
    center / contain no-repeat;
}

.lm-cta-text{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(8px); /* optischer Offset */
  pointer-events: none;
  z-index: 3;

  font-family: Inter, sans-serif;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Farben */
.elementor-location-single:not(.product_cat-dark) .lm-cta-text{
  color:#000;
  font-size:1rem;
}
.elementor-location-single.product_cat-dark .lm-cta-text{
  color:#98ccb1;
  font-size:.95rem;
  transform: translate(-50%, -50%) translateY(6px);
}
.lm-imperial-fake-button::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;

  opacity:.45;
  mix-blend-mode: screen;

  background:
    linear-gradient(to bottom,
      rgba(0,255,0,0) 0%,
      rgba(0,255,0,.45) 55%,
      rgba(0,255,0,0) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0,255,0,.08) 0 1px,
      transparent 1px 10px
    );

  animation:
    holoShift 18s ease-in-out infinite,
    flickerGlitch 1.6s steps(6) infinite;
}
/* ===============================
   CTA SHADOW – MASTER
   =============================== */

.lm-imperial-wrapper::before{
  content:"";
  position:absolute;
  inset:-40% -60%;           /* RELATIV zur CTA-Größe */
  pointer-events:none;
  z-index:1;

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  opacity:var(--cta-shadow-opacity);
  transform:
    translateY(var(--cta-shadow-y))
    scale(var(--cta-shadow-scale));
}

/* HELLE SEITE */
.elementor-location-single:not(.product_cat-dark){
  --cta-shadow-img: url("https://lademeister.co/wp-content/uploads/2026/03/Schatten_Kristall-Schmetterling_CTA_Shop.png");
  --cta-shadow-y: 20px;
  --cta-shadow-scale: 1;
  --cta-shadow-opacity: .85;
}
.elementor-location-single:not(.product_cat-dark)
.lm-imperial-wrapper::before{
  background-image: var(--cta-shadow-img);
}

/* DUNKLE SEITE */
.elementor-location-single.product_cat-dark{
  --cta-shadow-img: url("https://lademeister.co/wp-content/uploads/2026/03/Schatten_Fluegel_CTA_Shop.png");
  --cta-shadow-y: 28px;
  --cta-shadow-scale: 1.05;
  --cta-shadow-opacity: .95;
}
.elementor-location-single.product_cat-dark
.lm-imperial-wrapper::before{
  background-image: var(--cta-shadow-img);
}
@media (hover:hover){
  .lm-imperial-wrapper{
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
  }
  .lm-imperial-wrapper:hover{
    transform: translateY(-6px);
  }
}
/* HELLE VERSION */
.elementor-location-single:not(.product_cat-dark)
.lm-imperial-fake-button{
  width: 280px;   /* ? hier größer */
  height: 190px;
}
/* ===============================
   CTA SHADOW – KONTROLLIERT
   =============================== */

.lm-imperial-wrapper::before{
  content:"";
  position:absolute;

  /* ?? Feste Schattenbox */
  width: 420px;
  height: 260px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%)
    translateY(var(--cta-shadow-y))
    scale(var(--cta-shadow-scale));

  pointer-events:none;
  z-index:1;

  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  opacity: var(--cta-shadow-opacity);
}
/* HELLE SEITE */
.elementor-location-single:not(.product_cat-dark){
  --cta-shadow-y: 2px;        /* tiefer */
  --cta-shadow-scale: 0.75;   /* kleiner */
  --cta-shadow-opacity: .85;
}

.elementor-location-single:not(.product_cat-dark)
.lm-imperial-wrapper::before{
  background-image:
    url("https://lademeister.co/wp-content/uploads/2026/03/Schatten_Kristall-Schmetterling_CTA_Shop.png");
}

/* DUNKLE SEITE */
.elementor-location-single.product_cat-dark{
  --cta-shadow-y: 3px;
  --cta-shadow-scale: 0.69;
  --cta-shadow-opacity: .95;
}

.elementor-location-single.product_cat-dark
.lm-imperial-wrapper::before{
  background-image:
    url("https://lademeister.co/wp-content/uploads/2026/03/Schatten_Fluegel_CTA_Shop.png");
}



/* kontroll für mobile*/
/*@media (max-width: 768px){
  .elementor-location-single:not(.product_cat-dark)
  .lm-imperial-fake-button{
    width: 300px;
    height: 160px;
  }*/

/*  .lm-imperial-wrapper::before{
    width: 340px;
    height: 220px;
    transform:
      translate(-50%, -50%)
      translateY(4px)
      scale(0.85);
  }
}
*/

/* ============================================================
   CTA HOLO – HELLE & DUNKLE SEITE (komplett überarbeitet)
   ============================================================ */

/* Keyframes (einmalig, falls noch nicht vorhanden) */
@keyframes moveStripe1 { 0%{background-position:16px 0,160px 0} 100%{background-position:176px 0,320px 0} }
@keyframes moveStripe2 { 0%{background-position:0 0} 100%{background-position:100px 0} }
@keyframes holoShift { 0%{background-position:0% 0%} 50%{background-position:30% 70%} 100%{background-position:0% 0%} }
@keyframes flickerGlitch { 0%{opacity:.5} 5%{opacity:.6} 15%{opacity:.1} 25%{opacity:.35} 40%{opacity:.88} 55%{opacity:.9} 70%{opacity:1} 90%{opacity:.95} 100%{opacity:.6} }
@keyframes flashStripe3 { 0%,100%{opacity:0.4} 50%{opacity:0.8} }

/* HELLE SEITE – Holo exakt wie Size-Swatches hell */
.elementor-location-single:not(.product_cat-dark) .lm-imperial-fake-button::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .40;
  mix-blend-mode: screen;
  background:
    linear-gradient(to bottom, rgba(0,255,0,0) 0%, rgba(0,255,0,.8) 50%, rgba(0,255,0,0) 100%) no-repeat,
    linear-gradient(to right, rgba(0,255,0,0) 0%, rgba(0,255,0,.5) 50%, rgba(0,255,0,.5) 100%) no-repeat;
  background-size: .2px 100%, .2px 100%;
  background-position: 16px 0, 160px 0;
  animation: moveStripe1 24s ease-in-out infinite, flashStripe3 60s ease-in-out infinite;
}

.elementor-location-single:not(.product_cat-dark) .lm-imperial-fake-button::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .95;
  mix-blend-mode: screen;
  background:
    linear-gradient(to bottom, rgba(0,255,0,0) 0%, rgba(0,255,0,.5) 60%, rgba(0,255,0,0) 100%) no-repeat,
    repeating-linear-gradient(90deg, rgba(0,255,0,.10) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(255,0,64,.06) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, rgba(0,255,0,.07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(to bottom, rgba(255,0,64,.04) 0 1px, transparent 1px 6px),
    radial-gradient(at 20% 20%, rgba(255,255,200,.25), transparent 60%),
    radial-gradient(at 80% 30%, rgba(128,255,192,.30), transparent 80%),
    radial-gradient(at 25% 90%, rgba(200,128,255,.18), transparent 70%);
  background-size: 1px 100%, auto, auto, auto, auto, auto, auto, auto;
  animation: moveStripe2 30s ease-in-out infinite, holoShift 18s ease-in-out infinite, flickerGlitch 1.4s steps(6) infinite;
}

/* DUNKLE SEITE – Dein gewünschter warmer Holo-Overlay */

.elementor-location-single.product_cat-dark 
.lm-imperial-fake-button::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(to bottom, rgba(255,115,95,0.00) 100%, rgba(255,90,125,0.86) 58%, rgba(255,85,120,0.82) 75%, rgba(255,115,95,0.00) 90%),
    linear-gradient(to bottom, rgba(255,110,95,0.00) 42%, rgba(255,115,100,0.20) 56%, rgba(255,110,95,0.00) 72%),
    linear-gradient(to right, rgba(120,255,210,0.00) 0%, rgba(120,250,205,0.22) 10%, rgba(120,255,210,0.00) 50%),
    repeating-linear-gradient(90deg, rgba(160,255,220,0.1) 0 1.5px, transparent 0.5px 7px),
    repeating-linear-gradient(to bottom, rgba(160,255,220,0.08) 0 1px, transparent 0.5px 7px);
  mix-blend-mode: screen;
  opacity: .35;
}




.lm-imperial-fake-button{
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  accent-color: transparent;
}



.lm-imperial-fake-button:hover,
.lm-imperial-fake-button:active,
.lm-imperial-fake-button:focus,
.lm-imperial-fake-button:focus-visible{
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}



/* ============================================================
   CTA HOVER – STABIL & FARBE (FIXED)
   ============================================================ */

@media (hover:hover){

  .lm-imperial-wrapper,
  .lm-imperial-wrapper:hover{
    transform: none !important;
  }

  .lm-imperial-fake-button{
    transition: filter .35s ease;
  }

  .elementor-location-single.product_cat-dark
  .lm-imperial-wrapper:hover
  .lm-imperial-fake-button{
    filter: brightness(1.10) saturate(1.06);
  }

  .elementor-location-single.product_cat-dark
  .lm-imperial-fake-button:hover .lm-cta-text{
    text-shadow:
      0 0 6px rgba(180,230,210,.55),
      0 0 14px rgba(180,230,210,.28);
  }

  .elementor-location-single:not(.product_cat-dark)
  .lm-imperial-fake-button:hover .lm-cta-text{
    color: #2f5f4e;
    text-shadow:
      0 0 4px rgba(60,120,95,.25),
      0 0 10px rgba(60,120,95,.18);
  }

}

















/* ============================================================
   LM AKKORDEON – BASISDESIGN (HELL)
   ============================================================ */

/* Header */
.lm-akkordeon .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
  margin: 0;
  background: transparent !important;
  border: none !important;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111111;
}

.lm-akkordeon .e-n-accordion-item-title-text {
  letter-spacing: 0.18em;
  text-transform: inherit;
}

.lm-akkordeon .e-n-accordion-item-title::before,
.lm-akkordeon .e-n-accordion-item-title::after {
  content: none !important;
}

.lm-akkordeon .e-n-accordion-item-title-icon svg {
  fill: #111111;
}

/* Card / Body */
.lm-akkordeon .e-n-accordion-item,
.lm-akkordeon .e-n-accordion-item[open],
.lm-akkordeon .e-n-accordion-item > [role="region"] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.lm-akkordeon .e-n-accordion-item > .elementor-element.e-con,
.lm-akkordeon .e-n-accordion-item [role="region"] > .elementor-element.e-con,
.lm-akkordeon .e-n-accordion-item [role="region"] .elementor-element.e-con:first-child {
  max-width: 40rem;
  margin: 0.7rem auto 1.1rem;
  padding: 1.5rem 2.2rem;
  border-radius: 0.9rem;
  background: var(--lm-soft-bg, #f3f5f8);
  box-shadow:
    inset 3px 3px 7px var(--lm-soft-dark, rgba(0,0,0,0.12)),
    inset -3px -3px 7px var(--lm-soft-light, rgba(255,255,255,0.98));
  border: none;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #222222;
}

/* Textabstände */
.lm-akkordeon .elementor-widget-text-editor,
.lm-akkordeon .elementor-widget-text-editor .elementor-widget-container {
  padding: 0;
  margin: 0;
}

.lm-akkordeon .elementor-widget-text-editor p {
  margin: 0 0 0.6rem 0;
}

.lm-akkordeon .elementor-widget-text-editor p:first-child {
  margin-top: 0.2rem !important;
}

.lm-akkordeon .elementor-widget-text-editor p:last-child {
  margin-bottom: 0.5rem !important;
}

/* Inhaltseinzug */
.lm-akkordeon .e-n-accordion-item > .elementor-element.e-con,
.lm-akkordeon .e-n-accordion-item [role="region"] > .elementor-element.e-con {
  padding-top: 0.4rem !important;
  padding-bottom: 1.1rem !important;
  padding-left: 2rem !important;
}

/* Mobil */
@media (max-width: 767px) {
  .lm-akkordeon {
    padding-inline: 1rem;
  }
  .lm-akkordeon .e-n-accordion-item > .elementor-element.e-con,
  .lm-akkordeon .e-n-accordion-item [role="region"] > .elementor-element.e-con {
    padding-left: 1.6rem !important;
    padding-right: 1.6rem !important;
  }
}





/* ------------------------------------------------------------
   4) AKKORDEON – DARK
------------------------------------------------------------ */
.elementor-location-single.product_cat-dark
.lm-akkordeon .e-n-accordion-item-title,
.elementor-location-single.product_cat-dark
.lm-akkordeon .e-n-accordion-item-title-text {
  color: #b5ccbe !important;
}

.elementor-location-single.product_cat-dark
.lm-akkordeon .e-n-accordion-item-title-icon svg {
  fill: #b5ccbe !important;
}

.elementor-location-single.product_cat-dark
.lm-akkordeon .e-n-accordion-item > .elementor-element.e-con,
.elementor-location-single.product_cat-dark
.lm-akkordeon .e-n-accordion-item [role="region"] > .elementor-element.e-con {
  background: rgba(2, 40, 42, 0.94);
  box-shadow:
    inset 3px 3px 7px rgba(0,0,0,0.55),
    inset -3px -3px 7px rgba(181,204,190,0.95);
  color: #e7f3ed;
}



















/* ============================================================
   WooCommerce Kleinkram: Reset, Preis, Layout
   ============================================================ */

/* "Zurücksetzen" ausblenden */
#infos .reset_variations {
  display: none !important;
}

/* Preis + Lagerbestand schwarz (Standard) */
.single-product #infos .price,
.single-product #infos .price * {
  color: #000 !important;
}
.single-product #infos .stock {
  color: #000 !important;
}

/* ============================================================
   Variationstabellen: Reihenfolge & Layout
   ============================================================ */

/* Variationen als Spaltenstack */
.single-product #infos table.variations {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-collapse: separate !important;
}

/* Reihenfolge tauschen: 2. Zeile nach oben */
.single-product #infos table.variations tr {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.single-product #infos table.variations tr:nth-child(1) { order: 2; }
.single-product #infos table.variations tr:nth-child(2) { order: 1; }

.single-product #infos table.variations td.label,
.single-product #infos table.variations td.value {
  display: inline-block;
  vertical-align: top;
}

/* ============================================================
   Tabs / Panels „nackt“ machen (Elementor Woo Tabs)
   ============================================================ */

/* Haupt-Panel-Reset */
#infos .woocommerce-Tabs .panel,
#infos .woocommerce-Tabs .panel * {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Elementor Tab Widget reset */
#infos .elementor-widget-woocommerce-product-data-tabs,
#infos .elementor-widget-woocommerce-product-data-tabs * {
  border: none !important;
  box-shadow: none !important;
}




/* ============================================================
   WooCommerce Preis & Lager – Hell / Dunkel sauber getrennt
   ============================================================ */

/* HELLE SEITE */
.elementor-location-single:not(.product_cat-dark) #infos .price,
.elementor-location-single:not(.product_cat-dark) #infos .price * {
  color: #000000 !important;
}

.elementor-location-single:not(.product_cat-dark) #infos .stock {
  color: #000000 !important;
}

/* DUNKLE SEITE */
.elementor-location-single.product_cat-dark #infos .price,
.elementor-location-single.product_cat-dark #infos .price * {
  color: #b5ccbe !important;
}

.elementor-location-single.product_cat-dark #infos .stock {
  color: #b5ccbe !important;
}





/* ============================================================
   SWATCH-FREEZE – GESAMT-PAKET
   ============================================================ */

/* 1) Swatches einfrieren: keine Stripe-/Glitch-Animation mehr */
#infos .lm-size::before,
#infos .lm-size::after{
  animation: none !important;
}

#infos .lm-color{
  animation: none !important;  /* Puls aus */
}










/* ============================================================
   MENGE + CTA – Layout
   ============================================================ */

/* Gesamtes Woo-Formular im Infos-Block */
.einzel > .infos form.cart {
  display: block !important;
}

/* CTA + Menge – jetzt übereinander, nicht nebeneinander */
.einzel > .infos form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-direction: column !important;   /* STACK: Menge über CTA */
  align-items: flex-start !important;   /* ALLES LINKS */
  gap: 0.5rem;                          /* kleiner Abstand (neutral) */
  margin-top: 0.5rem;
}

/* Menge oben */
.einzel > .infos form.cart .woocommerce-variation-add-to-cart .quantity {
  order: 1 !important;
  margin-left: 0 !important;
}

/* CTA unten */
.einzel > .infos form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.einzel > .infos form.cart .woocommerce-variation-add-to-cart .lm-imperial-wrapper {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  align-self: flex-start !important;    /* NICHT MITTEN, LINKS! */
}

/* ============================================================
   MENGE – Darstellung (unverändert!)
   ============================================================ */

.einzel > .infos form.cart .quantity {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin: 0.5rem 0 0.4rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Screenreader-Label */
.einzel > .infos form.cart .quantity label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}

/* Zahl (Qty) */
.einzel > .infos form.cart .quantity .qty {
  width: 30px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: center !important;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111 !important;
  outline: none !important;
}

/* Browser-Spinner ausblenden */
.einzel > .infos form.cart .quantity .qty::-webkit-inner-spin-button,
.einzel > .infos form.cart .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.einzel > .infos form.cart .quantity .qty[type="number"] {
  -moz-appearance: textfield;
}

/* Plus/Minus Buttons */
.einzel > .infos form.cart .lm-q-minus,
.einzel > .infos form.cart .lm-q-plus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px;
  color: #111 !important;
  font-size: 18px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
  transition: color 0.15s ease !important;
}

/* Hover */
@media (hover:hover) {
  .einzel > .infos form.cart .lm-q-minus:hover,
  .einzel > .infos form.cart .lm-q-plus:hover {
    color: #6affcb !important;
  }
}









/* TEXT IM WING-CTA OPTISCH ZENTRIEREN >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>muss evtl raus*/


/* TEXT IM WING-CTA OPTISCH ZENTRIEREN */
.lm-imperial-fake-button {
    padding-left: 0.55rem !important;  /* Verschiebt Text leicht nach rechts */
    text-align: center !important;
}

/* WING-CTA – Text minimal kleiner & dicker */
.lm-imperial-fake-button {
    font-size: 0.9rem !important;      /* vorher 1.1rem ? minimal kleiner */
    font-weight: 600 !important;       /* vorher 600 ? etwas kräftiger */
    letter-spacing: 0.22em !important; /* beibehalten für den Look */
}
.lm-imperial-fake-button {
 translateY(-14px)  /* subtil */
}
/* Text im Wing-CTA leicht nach unten verschieben */
.lm-imperial-fake-button {
    padding-top: 1rem !important; /* Wert anpassen: 0.2–0.6 möglich */
}





/* ============================================================
   SINGLE PRODUCT – BASISLAYOUT (Swatches, Infos, Mobile)
   Zweck: saubere linke Ausrichtung + kontrollierte Mobile-Ränder
   ============================================================ */

/* ------------------------------------------------------------
   Swatches (Farben & Größen)
   - Erzwingt linke Ausrichtung
   - Verhindert zentrierte Swatch-Reihen durch Theme / Woo
   ------------------------------------------------------------ */
.single-product #infos .lm-colors,
.single-product #infos .lm-sizes {
  justify-content: flex-start; /* Start links statt Mitte */
  max-width: 100%;             /* Kein Überlaufen / kein künstliches Zentrieren */
}

/* ------------------------------------------------------------
   Mobile: Swatches dürfen umbrechen
   - Verhindert horizontales Verschieben des CTAs
   - Wichtig bei vielen Farben / Größen
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .single-product #infos .lm-colors,
  .single-product #infos .lm-sizes {
    flex-wrap: wrap !important; /* Erzwingt Zeilenumbruch auf kleinen Screens */
  }
}

/* ------------------------------------------------------------
   Mobile Layout – Bildbereich
   - Entfernt alle Innen- & Außenabstände
   - Bild geht randlos bis zur Kartenkante
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  body.single-product .einzel > .bilder {
    padding: 0 !important; /* Kein Innenabstand */
    margin: 0 !important;  /* Kein Außenabstand */
  }

  /* ----------------------------------------------------------
     Mobile Layout – Infos (Text, Swatches, CTA)
     - Definiert den bewussten linken/rechten Einzug
     - DAS ist die maßgebliche linke Kante für den CTA
     ---------------------------------------------------------- */
  body.single-product .einzel > .infos {
    padding-left: 1.4rem !important;  /* kontrollierter linker Abstand */
    padding-right: 1.4rem !important; /* symmetrisch rechts */
  }

  /* ----------------------------------------------------------
     Abstand zwischen Bildbereich und Infos
     - rein vertikal
     - kein Einfluss auf horizontale Ausrichtung
     ---------------------------------------------------------- */
  #infos {
    margin-top: 2rem !important;
  }
}

















/* ============================================================
   CTA & Swatches – Bereinigt & stabil
   ============================================================ */

/* CTA – Basis */
.lm-imperial-fake-button {
  position: relative;
  z-index: 5;
  cursor: pointer;
}

/* Hover-Bewegung: Wrapper + Schatten gemeinsam */
@media (hover:hover){
  .lm-imperial-wrapper{
    transition: transform .2s ease-out;
  }
  .lm-imperial-wrapper:hover{
    transform: translateY(-6px);
  }
}

/* Größen-Swatches – Hover */
@media (hover:hover){
  #infos .lm-size:hover:not(.is-disabled){
    background: rgba(255,255,255,0.16) !important;
    box-shadow:
      0 4px 10px rgba(0,0,0,0.26),
      0 16px 32px rgba(0,0,0,0.24) !important;
  }
  #infos .lm-size:hover:not(.is-disabled)::after{
    opacity: 1 !important;
  }
}

/* Desktop – Abstand unter CTA */
@media (min-width: 1024px){
  .lm-imperial-wrapper{
    margin-bottom: 2.5rem;
  }
}



/* Ähnliche Produkte – Versandinfo ausblenden */
body.single-product section.related.products
  ul.products li.product .wc-gzd-additional-info{
  display: none !important;
}

/* Mobile – Abstand zu Related Products */
@media (max-width: 767.98px){
  body.single-product section.related.products{
    margin-top: 3.5rem;
  }
}








/* ============================================================
   LIMITED BADGE – BASIS (GLOBAL + PRODUKT)
   ============================================================ */

/* Platzhalter am Produkt (relativ für ::after) */
.lm-limited-badge-placeholder {
  position: relative !important;
}

/* Produktgebundenes Badge */
.lm-limited-badge-placeholder::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -300px;
  width: 120px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 30;
}

/* Global schwebendes Badge */
.lm-limited-global {
  position: fixed;
  top: 280px;
  right: 60px;
  width: 140px;
  height: 110px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 99999;
}

/* ============================================================
   LIMITED BADGE – STANDARD (HELLE SEITEN ? GOLD)
   ============================================================ */

.lm-limited-global,
.lm-limited-badge-placeholder::after {
  background-image: url("https://lademeister.co/wp-content/uploads/2026/03/Limted-flaechig_Export.svg") !important;
  filter: none !important;
}

/* ============================================================
   LIMITED BADGE – DUNKLE SEITE (POST 14466 ? KUPFER)
   ============================================================ */

body.single-product.postid-14466 .lm-limited-global,
body.single-product.postid-14466 .lm-limited-badge-placeholder::after {
  background-image: url("https://lademeister.co/wp-content/uploads/2026/03/Kupfer_Limited-_Exportl.svg") !important;
  filter: none !important;
}

/* ============================================================
   ANGEBOTSPREISE – GOLD (GLOBAL)
   ============================================================ */

.price ins .woocommerce-Price-amount.amount,
span.price ins .woocommerce-Price-amount.amount {
  background-image: url("https://lademeister.co/wp-content/uploads/2026/03/AngebotsSchild_Gold.webp");
  background-size: cover;
  background-position: center;
  padding: 0.15em 0.45em;
  color: #111 !important;
  font-weight: 700;
  display: inline-block !important;
  border-radius: 0;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.55),
    0 6px 14px rgba(0,0,0,0.05);
}

/* ============================================================
   ANGEBOTSPREISE – KUPFER (POST 14466)
   ============================================================ */

.post-14466 .price ins .woocommerce-Price-amount.amount,
.post-14466 span.price ins .woocommerce-Price-amount.amount {
  background-image: url("https://lademeister.co/wp-content/uploads/2026/03/Angebotsschild_Kupfer.webp") !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35) !important;
}

/* Text zwingend weiß */
.post-14466 .price ins .woocommerce-Price-amount.amount bdi,
.post-14466 span.price ins .woocommerce-Price-amount.amount bdi {
  color: #fff !important;
}

/* ============================================================
   PREIS-DETAILS – RUHIG
   ============================================================ */

/* Alter Preis */
body.single-product .price del .woocommerce-Price-amount {
  opacity: 0.45;
}

/* MwSt.-Hinweis */
body.single-product .price .woocommerce-price-suffix {
  opacity: 0.45;
  font-size: 0.85em;
}
























/* ========== Abstand zwischen Einzelprodukt & Ähnliche Produkte========== */

.single-product .related.products {
  margin-top: clamp(6rem, 10vw, 12rem);
  padding-top: 9rem; /* optional */
}
/* Grundzustand */
.lm-dark {
  --lm-bg: #0e0e0e;
  --lm-text: #f2f2f2;
  --lm-muted: #b7b7b7;
}





/* ============================================================
   CTA – LAYER-GRUNDLAGE (FINAL)
   ============================================================ */

.lm-imperial-wrapper {
  position: relative;
}

.lm-imperial-fake-button {
  position: relative;
  z-index: 2;
}






/* ------------------------------------------------------------
   INFOS / TYPO / PREIS (dark)
------------------------------------------------------------ */
.elementor-location-single.product_cat-dark #infos,
.elementor-location-single.product_cat-dark #infos h1,
.elementor-location-single.product_cat-dark #infos h2,
.elementor-location-single.product_cat-dark #infos h3,
.elementor-location-single.product_cat-dark #infos p,
.elementor-location-single.product_cat-dark #infos .stock {
  color: #dcece4 !important;
}

/* Preis heller */
.elementor-location-single.product_cat-dark #infos .price,
.elementor-location-single.product_cat-dark #infos .price *,
.elementor-location-single.product_cat-dark #infos .woocommerce-Price-amount,
.elementor-location-single.product_cat-dark #infos .woocommerce-Price-amount bdi,
.elementor-location-single.product_cat-dark #infos .woocommerce-Price-currencySymbol {
  color: #f5fff9 !important;
}


/* ------------------------------------------------------------
   MENGE (Qty + Plus/Minus) – dark
------------------------------------------------------------ */
.elementor-location-single.product_cat-dark
.einzel > .infos form.cart .quantity .qty,
.elementor-location-single.product_cat-dark
.einzel > .infos form.cart .lm-q-minus,
.elementor-location-single.product_cat-dark
.einzel > .infos form.cart .lm-q-plus {
  color: #e7f3ed !important;
}

@media (hover:hover) {
  .elementor-location-single.product_cat-dark
  .einzel > .infos form.cart .lm-q-minus:hover,
  .elementor-location-single.product_cat-dark
  .einzel > .infos form.cart .lm-q-plus:hover {
    color: #6affcb !important;
  }
}


/* ------------------------------------------------------------
   RELATED PRODUCTS – dark
------------------------------------------------------------ */
.elementor-location-single.product_cat-dark section.related.products h2,
.elementor-location-single.product_cat-dark section.related.products ul.products li.product
.woocommerce-loop-product__title,
.elementor-location-single.product_cat-dark section.related.products ul.products li.product
.price,
.elementor-location-single.product_cat-dark section.related.products ul.products li.product
.wc-gzd-additional-info,
.elementor-location-single.product_cat-dark section.related.products ul.products li.product
.wc-gzd-additional-info a {
  color: #e7f3ed !important;
}


/* ------------------------------------------------------------
   LIMITED BADGE – KUPFER (dark)
------------------------------------------------------------ */
.elementor-location-single.product_cat-dark .lm-limited-global,
.elementor-location-single.product_cat-dark .lm-limited-badge-placeholder::after {
  background-image: url("https://lademeister.co/wp-content/uploads/2026/03/Kupfer_Limited-_Exportl.svg") !important;
  filter: none !important;
}


/* ------------------------------------------------------------
   SALE-PREISE – KUPFER (dark)
------------------------------------------------------------ */
.elementor-location-single.product_cat-dark
.price ins .woocommerce-Price-amount.amount,
.elementor-location-single.product_cat-dark
span.price ins .woocommerce-Price-amount.amount {
  background-image: url('https://lademeister.co/wp-content/uploads/2025/12/kupfer1.webp') !important;
  color: #fff !important;
  box-shadow: 0 4px 2px rgba(0,0,0,0.55) !important;
}







/* ============================================================
   FIX PAKET 3 – WooCommerce Gallery ohne Bildlücken
   ============================================================ */

/* Wrapper selbst */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
/* Jedes Bild */
.single-product .woocommerce-product-gallery__image {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;   /* ?? WICHTIG */
}
.single-product .woocommerce-product-gallery__image a {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single-product .woocommerce-product-gallery__image img {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery .flex-control-thumbs {
  margin: 0 !important;
}






/* ============================================================
   FIX PAKET 2 – Related Products: CTA-Button entfernen
   ============================================================ */

/* Standard Woo Button im Related-Bereich */
.single-product section.related.products
.button,
.single-product section.related.products
.add_to_cart_button {
  display: none !important;
}
/* Zusätzliche CTA-Wrapper im Related-Loop */
.single-product section.related.products
.woocommerce-loop-product__link.button,
.single-product section.related.products
a.button {
  display: none !important;
}
/* Sicherstellen, dass Produktkarte selbst klickbar bleibt */
.single-product section.related.products
li.product a:not(.button) {
  pointer-events: auto;
}




/* ======================================================
   IKS MENU – FIXED DARK GREEN
   ====================================================== */

.menu-holo,
.menu-holo a,
.menu-holo span,
.menu-holo li,
.menu-holo svg,
.menu-holo i{
  color: #1f3a1f !important;   /* dein dunkles Grün */
  fill: #1f3a1f !important;
}

/* Hover bleibt minimal heller */
.menu-holo a:hover{
  color: #2f5f4e !important;
}


/* ============================================================
   PAKET 1 – SWATCHES FINAL FIX
   Einheitliche Ringe (Color + Size)
   Texte ausgeblendet
   Dark: Mint-Schrift
   ============================================================ */

/* ---------- Zentrale Variablen ---------- */
:root{
  --lm-ring-color: #6affcb;   /* Mint */
  --lm-ring-width: 2px;
}

/* ============================================================
   1) SELECTED RING – COLOR + SIZE (IDENTISCH)
   ============================================================ */

#infos .lm-color.is-selected,
#infos .lm-color[aria-selected="true"],
#infos .lm-size.is-selected,
#infos .lm-size[aria-selected="true"]{

  outline: var(--lm-ring-width) solid var(--lm-ring-color) !important;
  outline-offset: 2px !important;

  /* NUR Tiefenschatten – kein Ring per Shadow */
  box-shadow: 0 6px 14px rgba(0,0,0,.35) !important;

  position: relative;
  z-index: 3;
}

/* Hover darf Selected NICHT verändern */
@media (hover:hover){
  #infos .lm-color.is-selected:hover,
  #infos .lm-size.is-selected:hover{
    outline: var(--lm-ring-width) solid var(--lm-ring-color) !important;
  }
}

/* ============================================================
   2) DARK MODE – SIZE Schrift MINT
   ============================================================ */

.elementor-location-single.product_cat-dark #infos .lm-size{
  color: #b9ffe6 !important;
}

/* ============================================================
   3) DARK MODE – Holo-Layer bei Selected abdämpfen
   (verhindert milchige Überlagerung)
   ============================================================ */

.elementor-location-single.product_cat-dark #infos .lm-size.is-selected::before,
.elementor-location-single.product_cat-dark #infos .lm-size[aria-selected="true"]::before{
  opacity: .18 !important;
}

.elementor-location-single.product_cat-dark #infos .lm-size.is-selected::after,
.elementor-location-single.product_cat-dark #infos .lm-size[aria-selected="true"]::after{
  opacity:





/* ================================
   LM FINAL SWATCH FIX
   ================================ */

/* 1?? Woo / Elementor Labels komplett ausblenden */
#infos .elementor-widget-woocommerce-product-add-to-cart
table.variations th.label,
#infos .elementor-widget-woocommerce-product-add-to-cart
table.variations .label,
#infos .elementor-widget-woocommerce-product-add-to-cart
table.variations label {
  display: none !important;
}

/* 2?? Table-Zellen neutralisieren */
#infos .elementor-widget-woocommerce-product-add-to-cart
table.variations td.value {
  padding: 0 !important;
}

/* 3?? Swatch-Container als echtes Raster */
#infos .lm-sizes,
#infos .lm-colors {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
  gap: 18px !important;          /* ? HIER ist der Abstand */
  margin: 0 !important;
  padding: 0 !important;
}

/* 4?? Swatches selbst neutral */
#infos .lm-size,
#infos .lm-color {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}





/* ================================
   ABSTAND ZWISCHEN SWATCHES
   ================================ */
#infos .lm-sizes,
#infos .lm-colors {
  gap: 26px !important;   /* ? HIER größer / kleiner machen */
}

/* ================================
   WOOCOMMERCE OPTIONSTEXT KOMPLETT AUS
   ================================ */
#infos table.variations th.label,
#infos table.variations label,
#infos .woocommerce-variation-description,
#infos .reset_variations {
  display: none !important;
}


/* Woo-Selects technisch vorhanden lassen */
.variations select {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}









/* =========================
   TEXTUR HINTERGRUND -- Startseite
   ========================= */

/* Alle normalen Seiten (Impressum, AGB, Datenschutz, Kontakt, etc.) */
body.page {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
}


body.home,
body.post-type-archive-product {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
}


/*body.home,*/
/*body.post-type-archive-product {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
  background-size: 19px 19px; /* ?? hier spielen */
}*/

/*body.home,
body.post-type-archive-product {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
}*/


body.post-type-archive-product #lademeister-main,
body.tax-product_cat #lademeister-main {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
}

/* Lademeister Seitenboden – stabil */
#lademeister-page {
  background-color: #f3f6f4 !important;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png") !important;
  background-size: 19px 19px !important;
  background-repeat: repeat !important;
  min-height: 100vh;
}







/* Slogan-Sektion */
.lm-section-slogan {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
  background-size: 19px 19px;
}








/* Footer entschlacken */
footer,
.site-footer {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.4;
}

/* Footer-Links */
footer a {
  padding: 4px 8px;
  display: inline-block;
}











/* ================================
   KONTAKTFORMULAR – STABIL
   ================================ */

.kontakt-panel {
  background: #eff6f3;

  /* jetzt klar sichtbar & individuell */
  border-radius: 18px 52px 24px 20px;

  /* NICHT vergrößert */
  padding: 48px 48px 44px;

  /* ruhiger Kassenschatten – nur unten/rechts */
  box-shadow:
    4px 8px 18px rgba(0, 0, 0, 0.18);

  position: relative;
  overflow: hidden;
}

/* Felder-Wrapper – kein Längenwachstum */
.kontakt-panel .elementor-form-fields-wrapper {
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px; /* kompakter als vorher */
}

/* Labels */
.kontakt-panel .elementor-field-label {
  color: #15342b;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

/* Inputs & Textarea */
.kontakt-panel .elementor-field-textual,
.kontakt-panel textarea {
  background: #f6faf8;

  /* WICHTIG: Kontur komplett weg */
  border: none !important;
  outline: none !important;

  /* fast rechtwinklig */
  border-radius: 6px;

  /* niedriger als zuvor */
  padding: 9px 14px;
  font-size: 15px;
  line-height: 1.4;

  color: #15342b;

  /* sehr dezenter Kassenschatten */
  box-shadow:
    1px 2px 6px rgba(0, 0, 0, 0.14);

  transition: box-shadow 0.15s ease;
}

/* Fokus – KEIN Glow */
.kontakt-panel .elementor-field-textual:focus,
.kontakt-panel textarea:focus {
  box-shadow:
    2px 4px 8px rgba(0, 0, 0, 0.18);
}

/* Checkbox */
.kontakt-panel .elementor-field-subgroup label {
  color: #15342b;
  font-size: 13px;
}

.kontakt-panel input[type="checkbox"] {
  accent-color: #15342b;
}

/* ================================
   SENDEN-BUTTON – DEZENT & STABIL
   ================================ */

.kontakt-panel .elementor-button {
  margin-top: 16px;

  background: linear-gradient(#BAD4D4, #a4b9b1);
  color: #eff6f3;

  border-radius: 22px;
  padding: 14px 28px;

  font-weight: 600;
  letter-spacing: 0.08em;

  /* etwas mehr Druck, aber noch trocken */
  box-shadow:
    2px 4px 10px rgba(0, 0, 0, 0.28);

  transition: box-shadow 0.15s ease;
}

.kontakt-panel .elementor-button:hover {
  box-shadow:
    3px 6px 14px rgba(0, 0, 0, 0.32);
}




/* ==================================================
   KONTAKT PANEL – Felder NDIVIDUELLE RUNDUNGEN 
   ================================================== */


/* Innere Elementor-Container – Rundung vererben */
.kontakt-panel > .e-con,
.kontakt-panel .elementor-widget-container,
.kontakt-panel .elementor-form-fields-wrapper {
  border-radius: 0px 0px 0px 15px !important;
  overflow: hidden !important;
  background: transparent !important; /* Hintergrund vom Parent übernehmen */
}

/* Falls Elementor noch ein extra Div macht */
.kontakt-panel * {
  border-radius: inherit !important; 
}

/* ==================================================
   KONTAKT PANEL –  INDIVIDUELLE RUNDUNGEN (FINAL)
   ================================================== */


.kontakt-panel {
  background: #eff6f3 !important;
  border-radius: 19px 19px 90px 0px !important;
  padding: 48px 48px 24px !important;

  /* FLACHER KASSEN-SCHATTEN */
  box-shadow:
    2px 4px 10px rgba(0, 0, 0, 0.20) !important;

  position: relative !important;
  overflow: hidden !important;
}
.kontakt-panel .elementor-button {
  margin-top: 16px;

background: linear-gradient(#15342b, #15342b, #183930);
  color: #eff6f3;


  border-radius: 22px;
  padding: 14px 28px;
  font-weight: 600;
  letter-spacing: 0.08em;

  /* ETWAS DEFINIERTER ALS FELDER */
  box-shadow:
    2px 4px 5px rgba(0, 0, 0, 0.26);

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kontakt-panel .elementor-button:hover {
  transform: translateY(-1px);
  box-shadow:
    2px 4px 5px rgba(0, 0, 0, 0.26);
}





/* Formular – Typografie vereinheitlichen */
.kontakt-panel,
.kontakt-panel input,
.kontakt-panel textarea,
.kontakt-panel label,
.kontakt-panel button {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.kontakt-panel {
  font-size: 15px;
  line-height: 1.6;
}


/* weisser Rand um das Panel */

.kontakt-panel {
 box-shadow:
    inset 0 0 0 1px #ffffff,   /* klarer weißer Rand */
    2px 4px 10px rgba(0,0,0,0.28);}

/* Link Farbe Kontakt */
.kontakt-panel .elementor-field-subgroup a {
  color: #15342b !important;
  text-decoration: underline;
}

.kontakt-panel .elementor-field-subgroup a:hover {
  color: #0a2a21 !important;
}





/* =========================================================
   SAFARI LANDSCAPE – STABILES, NAHTLOSES PANORAMA-GRID
   (FEINGRANULAR, OHNE TRANSLATE)
   ========================================================= */

@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {

    /* ================================
       1?? GRID – FEINE GRANULARITÄT
       ================================ */

    .pano-row .elementor-loop-container {
      display: grid !important;
      grid-template-columns: repeat(100, 1fr) !important; /* ?? FEIN */
      gap: 0 !important;
      width: 100% !important;
      align-items: stretch !important;
    }

    /* ================================
       2?? LOOP ITEMS – SAFARI FIX
       ================================ */

    .pano-row .e-loop-item {
      grid-column: span var(--span, 50) !important; /* Default = 50 % */
      min-height: 0 !important; /* ?? Safari Killer */
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }

    /* ================================
       3?? MEDIA – STABIL, KEIN FLEX
       ================================ */

    .pano-row .pano-media {
      height: 80vh !important;
      display: block !important;
      overflow: hidden !important;
      min-height: 0 !important; /* ?? Safari Killer */
      margin: 0 !important;
      padding: 0 !important;
    }

    /* ================================
       4?? BILD – FÜLLT KACHEL
       ================================ */

    .pano-row .pano-media img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
    }

    /* ================================
       5?? SAFARI SUBPIXEL FIX
       ================================ */

    .pano-row {
      transform: translateZ(0);
    }

  }
}

/* =========================================================
   

PANORAMA PUZZLE SYSTEM
BREITEN PRO ROW (FEIN JUSTIERBAR) 

Funktionsweise:
- Container benötigt Klassen: pano-row pano-row-X
- pano-row aktiviert das 100-Spalten Grid
- pano-row-X definiert die Reihe

Bildbreiten werden über --span gesteuert.

Beispiel:
.pano-row-1 .post-17786 { --span: 62; }

Regel:
Summe aller --span Werte pro Reihe = 100

Einzelkachel:
--span:100

Post-ID erhält man über Browser Inspector (post-XXXXX).
========================================================= */

/* PULLOVER */
/* ROW 1 - Mais */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-1 .post-17786 { --span: 62; }
    .pano-row-1 .post-17789 { --span: 38; }
  }
}

/* ROW 2 - Autobahn 1 (Maschine 83 -Kennung / Fahrtzustand / Feldversuch) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-2 .post-16940 { --span: 50; }
    .pano-row-2 .post-16941 { --span: 25; }
    .pano-row-2 .post-16942 { --span: 25; }
  }
}

/* ROW 3 - Feld 1 */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-3 .post-17616 { --span: 23; }
    .pano-row-3 .post-17621 { --span: 37; }
    .pano-row-3 .post-17622 { --span: 23; }
    .pano-row-3 .post-17623 { --span: 17; }
  }
}


/* ROW 4 - MaTRIX 03 – eine Kachel volle Breite */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-4 .post-27835 {--span: 100;}
  }
}



/* ROW 5 - Sprengkapsel Steinbruch 1 (Schwärzung 00 / Ich bin Deutschland 89) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {      
   .pano-row-5 .post-27915 {--span: 44;}
   .pano-row-5 .post-27913 {--span: 56;}
  }
}


/* ROW 6 - Obstwiese 1 (Saat° 01 / Trieb^9) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
   .pano-row-6 .post-28027 {--span: 25;}
   .pano-row-6 .post-28028 {--span: 75;}
  }
}


/* ROW 7 Blauer See 1 (Quelle )2(   /   Baum )1(  */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {      
   .pano-row-7 .post-28058 {--span: 37;}
   .pano-row-7 .post-28049 {--span: 63;} 
  }
}



/* ROW 8 - Talblick 1 (R-Zug 01 / Einzelfall I) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) { 
   .pano-row-8 .post-28131 {--span: 42;}
   .pano-row-8 .post-28132 {--span: 58;}    
  }
}



/* ROW 9 - Heiligendamm Treppe 1 - (Delta-Schmiss) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-9 .post-27552 {--span: 75;}
    .pano-row-9 .post-28246 {--span: 25;}
  }
}



/* ROW 10 -Ich weiche nicht - (Ich weiche nicht / ) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-10 .post-28222 {--span: 37;}
    .pano-row-10 .post-28218 {--span: 63;}
  }
}

/* ROW 11 - Diskus - (Momentum 01, 02, 03) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-11 .post-28232 {--span: 44;}
    .pano-row-11 .post-28237 {--span: 31;}
    .pano-row-11 .post-28238 {--span: 25;}
  }
}



/* ROW 12 - Meerblick 1 - (Antrieb 01-03) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-12 .post-28311 {--span: 25;}
    .pano-row-12 .post-28312 {--span: 50;}
    .pano-row-12 .post-28314 {--span: 25;}
  }
}


/* ROW 13 - Ast1 (Brand I-IV) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-13 .post-28372 { --span: 53; }
    .pano-row-13 .post-28378 { --span: 47; }   
  }
}

/* ROW 14 - Strand-Feuerspiel (Spiegel Nr11/Wald Nr11) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-14 .post-28379 { --span: 64; }
    .pano-row-14 .post-28380 { --span: 36; }   
  }
}


/* ROW 15 - Windmühlen - /ACKR1 – eine Kachel volle Breite) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-15 .post-8467 {--span: 100;}
  }
}


/* ROW 16 - Gelber Turm - (KRL1, Kmmit1, KRL2) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-16 .post-28805 {--span: 35;}
    .pano-row-16 .post-28807 {--span: 49;}
    .pano-row-16 .post-28808{--span: 16;}
  }
}



/* ROW 17 - Waldlinie (Krl Pervers I schwarz) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-17 .post-28713 { --span: 27; }
    .pano-row-17 .post-28715 { --span: 73; }   
  }
}

/* ROW 18 - Autobahn Ferne (Antrieb 04) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-18 .post-28758 { --span: 100; }    
  }
}


/* ROW 19 - Blumenstreifen Wegrand (Winter geht) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-19 .post-28775 { --span: 100; }    
  }
}


/* ROW 20 - Hohes Gras (Krl3) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-20 .post-28812 { --span: 100; }    
  }
}



/* ROW 21 - Blütenstängel (Bluten1/2) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-21 .post-28834 { --span: 29; }   
 .pano-row-21 .post-28837 { --span: 71; }    
 
  }
}


/* ROW 22 - Schnitt und Kragen */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-22 .post-28842 { --span: 100; }    
  }
}



/* ROW 22 - Vorbeifahrt (Autobahn01/VWerk01) */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) {
    .pano-row-22 .post-28858 { --span: 48; }   
 .pano-row-22 .post-29054 { --span: 52; }     
  }
}


/* ============================================================
   LM UI PACK — Laser + Drawer + Overlay (SINGLE SOURCE)
   Basis: dein letzter "korrekt" Look, nur bereinigt/geordnet
   ============================================================ */

:root{
  --lm-draw-text: #000;

  /* Drawer */
  --lm-draw-border: rgba(255,255,255,.18);
  --lm-draw-shadow:
    0 14px 28px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 0 26px rgba(140,255,220,.14);

  /* Grid + Glows */
  --lm-grid-a: rgba(0,255,0,.055);
  --lm-grid-b: rgba(0,255,0,.045);

  /* Buttons */
  --lm-btn-bg: rgba(255,255,255,.22);
  --lm-btn-bg-hover: rgba(255,255,255,.46);
  --lm-btn-border: rgba(255,255,255,.22);

  --lm-btn-font: 600;
  --lm-btn-size: 16px;
  --lm-btn-h: 56px;
}

/* Standard: dunkle Produktseite */
.lm-laser {
  position: fixed;
  width: 0;
  height: 2px;
  background: linear-gradient(to right,
    rgba(0,255,200,0) 0%,
    rgba(0,255,200,0.3) 25%,
    rgba(0,255,220,0.8) 50%,
    rgba(120,255,200,0.3) 75%,
    rgba(0,255,200,0) 100%
  );
  border-radius: 2px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transform-origin: left center;
  filter: drop-shadow(0 0 8px rgba(0,255,200,0.55));
}
/* Laser für helle Seiten */
body:not(.postid-14466) .lm-laser {
  background: linear-gradient(to right,
    rgba(0, 70, 50, 0) 0%,
    rgba(0, 70, 50, 0.35) 25%,
    rgba(0,255,200,0.9) 50%,
    rgba(0, 70, 50, 0.35) 75%,
    rgba(0, 70, 50, 0) 100%
  );
  filter: drop-shadow(0 0 7px rgba(0, 150, 120, 0.8));
}



/* Laser für helle Seiten – leichter, weniger schwarz */
body:not(.postid-14466) .lm-laser {
  background: linear-gradient(to right,
    rgba(0, 140, 110, 0.15) 0%,
    rgba(0, 255, 200, 0.30) 25%,
    rgba(0, 255, 200, 0.80) 50%,
    rgba(0, 255, 200, 0.30) 75%,
    rgba(0, 140, 110, 0.15) 100%
  );
  filter: drop-shadow(0 0 7px rgba(0,255,200,0.55));
}

/* dunkler laser auf hell>>>>>>>>>> auskommentiert*/
/*body:not(.postid-14466) .lm-laser {
  background: linear-gradient(to right,
    rgba(0, 120, 90, 0.30) 0%,
    rgba(0, 255, 200, 0.35) 25%,
    rgba(0, 255, 200, 0.85) 50%,
    rgba(0, 255, 200, 0.35) 75%,
    rgba(0, 120, 90, 0.30) 100%
  );
  filter: drop-shadow(0 0 9px rgba(0,255,200,0.60));
}*/

/* ==============================
   2) OVERLAY (Default: Blur, ohne Abdunkeln)
   Variante B schaltet Blur per CSS aus.
   ============================== */
.lm-drawer-overlay{
  position: fixed;
  inset: 0;

  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity .25s ease, visibility 0s linear .25s;
  z-index: 999998;
}
.lm-drawer-overlay.lm-show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s ease;
}

/* ==============================
   3) DRAWER (Funktion)
   ============================== */
.lm-holo-drawer{
  position: fixed;
  top: 120px;
  right: 32px;

  width: 340px;
  padding: 26px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateX(48px);
  transition: transform .32s ease, opacity .32s ease, visibility 0s linear .32s;

  z-index: 999999;
}
.lm-holo-drawer.lm-show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateX(0);
  transition: transform .32s ease, opacity .32s ease;
}

/* Mobile */
@media (max-width: 767px){
  .lm-holo-drawer{
    left: 12px;
    right: 12px;
    width: auto;
    top: calc(12px + var(--adminbar-h, 0px));
  }
}

/* ==============================
   4) DRAWER (Skin) — exakt dein Look
   ============================== */
.lm-holo-drawer{
  border-radius: 26px 26px 0 80px;

  background: rgba(105,105,105,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1px solid var(--lm-draw-border);
  box-shadow: var(--lm-draw-shadow);

  background-image:
    /* GRID */
    repeating-linear-gradient(90deg, var(--lm-grid-a) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, var(--lm-grid-b) 0 1px, transparent 1px 8px),

    /* HOLO FARBGLOWS (wie Menü – subtil, aber sichtbar) */
    radial-gradient(at 18% 22%, rgba(0,255,200,.14), transparent 62%),
    radial-gradient(at 86% 18%, rgba(90,180,255,.12), transparent 68%),
    radial-gradient(at 26% 82%, rgba(255,120,200,.08), transparent 72%),

    /* WEIßES BACKLIGHT */
    radial-gradient(ellipse at 22% 70%,
      rgba(255,255,255,.12),
      rgba(255,255,255,.05) 42%,
      transparent 74%
    );

  background-blend-mode: screen;

  color: var(--lm-draw-text);
}

/* Close Button */
.lm-holo-drawer__close{
  position: absolute;
  top: 14px;
  right: 16px;

  width: 42px;
  height: 42px;
  border-radius: 0;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #000;

  font-size: 22px;
  cursor: pointer;

  box-shadow: none;
}
.lm-holo-drawer__close:focus,
.lm-holo-drawer__close:focus-visible{
  outline: 2px solid rgba(255,255,255,.28);
  outline-offset: 2px;
}

/* ==============================
   5) CONTENT — Bild oben, Text darunter
   ============================== */
.lm-holo-drawer__product{
  display: block;
  margin-top: 14px;
}

.lm-holo-drawer__img{
  width: 96px;
  height: 128px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.lm-holo-drawer__name{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.15;
}

.lm-holo-drawer__meta{
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.2;
}

.lm-holo-drawer__price{
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
}

/* Buttons */
.lm-holo-drawer__actions{
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.lm-holo-btn{
  height: var(--lm-btn-h);
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  border-radius: 0;

  background: var(--lm-btn-bg);
  border: 1px solid var(--lm-btn-border);

  color: #000;
  font-size: var(--lm-btn-size);
  font-weight: var(--lm-btn-font);

  box-shadow: none;
  transition: background-color .22s ease, border-color .22s ease;
}

.lm-holo-btn:hover{
  background: var(--lm-btn-bg-hover);
  border-color: rgba(255,255,255,.34);
}

/* Dark Hero Lesbarkeit (du nutzt body.in-hero) */
body.in-hero .lm-holo-drawer{
  color: rgba(245,245,245,.92);
}
body.in-hero .lm-holo-drawer *{
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* ============================================================
   VARIANTE B: kurz, ohne Buttons, ohne Blur, kürzer
   Aktivieren: body.lm-drawer-b
   ============================================================ */
body.lm-drawer-b .lm-drawer-overlay{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.lm-drawer-b .lm-holo-drawer__actions{
  display: none;
}
/* kürzer: weniger Padding + kleineres Bild */
body.lm-drawer-b .lm-holo-drawer{
  padding: 20px;
}
body.lm-drawer-b .lm-holo-drawer__img{
  width: 84px;
  height: 112px;
}

/* ============================================================
   VARIANTE C: Drawer komplett aus (Laser only)
   Aktivieren: body.lm-drawer-off
   ============================================================ */
body.lm-drawer-off .lm-holo-drawer,
body.lm-drawer-off .lm-drawer-overlay{
  display: none !important;
}






/* ?? Theme-Focus / Error vollständig neutralisieren */
.lm-holo-drawer__close,
.lm-holo-drawer__close:hover,
.lm-holo-drawer__close:focus,
.lm-holo-drawer__close:focus-visible,
.lm-holo-drawer__close:active{
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.14) !important;
  color: #000 !important;
}

/* Falls Theme rote Error-States auf Container legt */
.lm-holo-drawer,
.lm-holo-drawer *{
  outline-color: rgba(255,255,255,.28) !important;
}










/* ===============================
   LASER – CLEAN & LEICHT
   =============================== */
.lm-laser{
  position: fixed;
  height: 3px;
  width: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 999999;
  transform-origin: left center;

  background: linear-gradient(
    90deg,
    rgba(0,255,200,0) 0%,
    rgba(0,255,200,.35) 25%,
    rgba(0,255,220,.9) 50%,
    rgba(0,255,200,.35) 75%,
    rgba(0,255,200,0) 100%
  );

  filter:
    drop-shadow(0 0 6px rgba(0,255,200,.5))
    drop-shadow(0 0 14px rgba(0,255,200,.3));
}

/* ===============================
   CART VIBE – SVG ONLY (FIX)
   =============================== */
#lm-cart,
.lm-bag{
  transform: translateZ(0);
}

#lm-cart.lm-cart-vibe .lm-ico,
.lm-bag.lm-cart-vibe .lm-ico{
  animation: lm-cart-wiggle 420ms cubic-bezier(.36,.07,.19,.97);
}

@keyframes lm-cart-wiggle{
  0%{transform:translateX(0)}
  20%{transform:translateX(-2px)}
  40%{transform:translateX(3px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}







/* ==================================================
   LADEMEISTER – CHECKOUT / WARENKORB STEPPER (FINAL)
   ================================================== */

/* -------------------------
   Stepper Container
   ------------------------- */
.lm-checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  margin: 64px auto 48px;
  padding: 0;

  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: inherit;

  color: rgba(15,59,46,0.45);
  position: relative;
}

/* Unterlinie */
.lm-checkout-steps::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(15,59,46,0.35),
    rgba(15,59,46,0.15),
    rgba(15,59,46,0.05)
  );
}

/* -------------------------
   Steps
   ------------------------- */
.lm-checkout-steps .step {
  opacity: 0.45;
  padding: 6px 8px;
  white-space: nowrap;
}

/* Aktiver Step */
.lm-checkout-steps .step.active {
  color: #0f3b2e;
  opacity: 1;
  font-weight: 700;
}

/* Erledigter Step */
.lm-checkout-steps .step.done {
  color: rgba(15,59,46,0.6);
  opacity: 0.9;
}

/* Deaktivierter Step */
.lm-checkout-steps .step.disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* Klickbare Steps */
.lm-checkout-steps a.step {
  cursor: pointer;
  text-decoration: none;
}

.lm-checkout-steps a.step:hover {
  color: #0f3b2e;
  opacity: 1;
}

/* Trennpunkte */
.lm-checkout-steps .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
}

/* -------------------------
   Mobile
   ------------------------- */
@media (max-width: 767px) {
  .lm-checkout-steps {
    margin-top: 96px;   /* Platz unter Burger */
    margin-bottom: 32px;
    font-size: 0.6rem;
  }
}

/* -------------------------
   Standard Woo Titel AUS
   ------------------------- */
body.woocommerce-cart h1,
body.woocommerce-checkout h1,
body.woocommerce-order-received h1 {
  display: none !important;
}

/* -------------------------
   Inhalt-Abstände (fein)
   ------------------------- */

/* Warenkorb: war zu hoch ? leicht nach unten */
body.woocommerce-cart form.woocommerce-cart-form {
  margin-top: 40px;
}

/* Kasse: war zu tief ? etwas enger */
body.woocommerce-checkout form.checkout {
  margin-top: 24px;
}


@media (max-width: 767px) {
  .woocommerce-page .woocommerce {
    padding-left: 0;­­­
  }
}











/* =========================================================
   0) BODY NEUTRAL – KEINE GLOBALEN HINTERGRÜNDE
   ========================================================= */
body {
  background: none;
}



/* =========================================================
   1) STANDARD-SEITEN MIT DOTS
   (Home, Rechtstexte, Kontakt, normale Pages)
   ========================================================= */

body.home,
body.page:not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout),
body.post-type-archive-product {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
  background-repeat: repeat;
  background-size: 18px 18px;
}




/* =========================================================
   2) PUZZLE-BÄNDER – KEINE EIGENEN BACKGROUNDS
   ========================================================= */

.pano-row,
.pano-row .elementor-loop-container,
.pano-row .e-loop-item {
  background: transparent !important;
}



/* =========================================================
   3) EINZELPRODUKT – HELLE VERSION
   ========================================================= */

body.single-product:not(.product_cat-dark) {
  background-color: #ffffff;
  background-image: url("https://lademeister.co/wp-content/uploads/2026/03/Hintergrundstruktur_hell2.svg");
  background-repeat: repeat;
  background-size: 200px auto;
  background-position: top left;
}





/* =========================================================
   5) ELEMENTOR – DURCHLÄSSIG, ABER KONTROLLIERT
   ========================================================= */

body.single-product .elementor-section,
body.home .elementor-section {
  background-color: transparent;
  box-shadow: none;
}



/* =========================================================
   PRODUCT ARCHIVE – DOTS (ELEMENTOR-SICHER)
   ========================================================= */

body.post-type-archive-product .lademeister-puzzle-wrapper,
body.tax-product_cat .lademeister-puzzle-wrapper {
  background-color: #f3f6f4;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png");
  background-repeat: repeat;
  background-size: 18px 18px;
}




/* =========================================================
   Bezahlt ansicht
   ========================================================= */


.woocommerce-order-received h1 {
  font-size: 3rem;
  letter-spacing: 0.05em;
}

.woocommerce-order-overview {
  background: rgba(0,0,0,0.03);
  padding: 2rem;
  border-radius: 12px;
}














/* =========================================
   test
   ========================================= */




/* =========================================
   PREIS + LIEFERINFO KOMPAKT
   ========================================= */

.price {
  margin-bottom: 4px !important;
}

.wc-gzd-additional-info,
.delivery-time-info,
.legal-price-info {
  margin: 1px 0 !important;
  padding: 0 !important;
}


/* =========================================
   ABSTAND ZU VARIATIONEN / SWATCHES
   ========================================= */

.variations {
  margin-top: 20px !important;
}


/* Fallback für Swatch-Plugins */
.variable-items-wrapper {
  margin-top: 20px !important;
}



/* 1?? Elementor-Weiß auf morph-karaoke killen */
.morph-karaoke {
  background: transparent !important;
}

/* 2?? Textur sauber neu setzen */
.morph-karaoke {
  background-color: #f3f6f4 !important;
  background-image: url("https://www.transparenttextures.com/patterns/subtle-dots.png") !important;
  background-size: 19px 19px;
}

/* 3?? Sicherheit: Kinder dürfen nichts übermalen */
.morph-karaoke > *,
.morph-karaoke .elementor-widget-container {
  background: transparent !important;
}



/* BÖGEN BEI WER IST LADEMEISTER WIEDER AKTIVIEREN!!! <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/* Hero Divider temporär deaktiviert */
.lm-hero-divider {
  display: none;
}

/* Bottom Divider temporär deaktiviert */
.lm-bottom-divider {
  display: none;
}




/*DISCLAIMER-Hinweis EIgenen Verantwortung ! <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
.organic-text .disclaimer {
  font-size: 13px !important;
  line-height: 1.4;
  opacity: 0.6;
}













/* ================================================= */
/* THANK YOU SEITE – KOMPLETT & STABIL */
/* ================================================= */


/* Menü ausblenden */
body.woocommerce-order-received .menu-holo {
    display: none !important;
}

/* Checkout Steps entfernen */
body.woocommerce-order-received .lm-checkout-steps {
    display: none !important;
}


/* ================================================= */
/* OBERER BEREICH – BESTELLDETAILS */
/* ================================================= */

body.woocommerce-order-received .woocommerce-order-details {

    background: #F4FFFB;
    padding: 40px;
    margin: 40px auto;
    max-width: 900px;

    border-radius: 18px 0px 58px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Tabelle innen */
body.woocommerce-order-received 
.woocommerce-table--order-details {

    background: #F4FFFB !important;
    border-radius: 14px;
}

/* Tabellenzellen */
body.woocommerce-order-received 
.woocommerce-table th,
body.woocommerce-order-received 
.woocommerce-table td {

    background: transparent !important;
}


/* ================================================= */
/* UNTERER BEREICH – KUNDENDETAILS */
/* ================================================= */

body.woocommerce-order-received .woocommerce-customer-details {

    background: #15342b;
    padding: 50px;
    margin: 60px auto;
    max-width: 1000px;

    border-radius: 20px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.35);
}

/* Überschriften */
body.woocommerce-order-received 
.woocommerce-customer-details h2 {

    color: 
}

/* Address Karten (leichter Kontrast!) */
body.woocommerce-order-received 
.woocommerce-cust#eff6f3;omer-details address {

    background: rgba(255,255,255,0.005); /* ganz leichter Kontrast */
    color: #eff6f3;

    padding: 30px;
    border-radius: 16px;
    border: none;

   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Links */
body.woocommerce-order-received 
.woocommerce-customer-details a {

    color: #eff6f3;
}

/* ============================= */
/* Checkout Steps entfernen */
/* ============================= */

body.woocommerce-order-received .lm-checkout-steps {
    display: none !important;
}













/* Text auf mintem Hintergrund */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-order-details th,
body.woocommerce-order-received .woocommerce-order-details td {

    color: #15342b;   /* dein dunkles Grün */
}



/* Text auf dunkelgrünem Hintergrund */
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .woocommerce-customer-details h2,
body.woocommerce-order-received .woocommerce-customer-details address {

    color: #cfe6dd;   /* dein Mintton */
}




body.woocommerce-order-received .woocommerce-notice,
body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-overview li {
    color: #15342b;
}



body.woocommerce-order-received 
.woocommerce-order-details table td,
body.woocommerce-order-received 
.woocommerce-order-details table th {
    font-size: 0.9rem;
}


body.woocommerce-order-received 
.woocommerce-order-details table tr td:first-child {
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #15342b;
}


body.woocommerce-order-received 
.wc-gzd-cart-info p {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}


body.woocommerce-order-received 
.wc-item-meta-label {
    font-weight: 600 !important;
}


/* Produktname kupfer */
body.woocommerce-order-received .product-name,
body.woocommerce-order-received .woocommerce-table__product-name a {

    color: #15342b !important;   /* dein Kupfer */
}



/* Aupassen bei dem block */
body.woocommerce-order-received #content {
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 1100px;
}
body.woocommerce-order-received .site-content {
    padding-left: 0 !important;
}





/* Thank You Seite exakt zentrieren */
body.woocommerce-order-received #content {
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 1100px;
}
body.woocommerce-order-received .site-content {
    padding-left: 0 !important;
}






/* ========================================= */
/* WARENKORB NOTICES – STABIL */
/* ========================================= */

body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {

    font-family: 'Inter', sans-serif;
    background: #f4fffb;
    color: #15342b;
    border: none;
    padding: 20px 30px;
    border-radius: 16px;
    text-align: center;
}

/* Entfernt WooCommerce Icon / Linie */
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before {
    display: none;
}


body.woocommerce-cart .return-to-shop a.button {
    background: #15342b;
    color: #f4fffb;
    font-family: 'Inter', sans-serif;
    padding: 14px 30px;
    border-radius: 12px;
    border: none;
    transition: 0.3s ease;
}


/* Hover */
body.woocommerce-cart .return-to-shop a.button:hover {

    background: #0e503c;
    color: #ecfcf7;
}



/* Gesamte Cart-Widget-Spalte mittig */
body.woocommerce-cart .elementor-widget-woocommerce-cart .elementor-widget-container {

    display: flex;
    justify-content: center;
}

/* Leerer Warenkorb Layout sauber */
@media (min-width: 1024px) {

    body.woocommerce-cart .cart-empty,
    body.woocommerce-cart .return-to-shop,
    body.woocommerce-cart .woocommerce-message {

        max-width: 700px;
        margin-left: 280px;
        margin-right: auto;
    }
}







/* Rechnung / Bestellung abschicken Button ?????*/
body.woocommerce-checkout #place_order {

    background: #15342b;
    color: #eff6f3;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;

    border: none;
    border-radius: 14px;
    padding: 16px 28px;
    transition: 0.3s ease;
}

/* Hover */
body.woocommerce-checkout #place_order:hover {

    background: #0e503c;
    color: #ffffff;
}





body.woocommerce-checkout label[for*="payment_method"] {

    text-transform: uppercase;
    font-weight: 600;
}




/* Rechnung Button komplett isolieren */
body.woocommerce-order-received 
a.woocommerce-button.button.invoice.order-actions-button {

    background: #15342b !important;
    color: #eff6f3 !important;

    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;

    padding: 14px 28px !important;

    /* deine organischen Ecken */
    border-radius: 8px 0px 23px 8px !important;

    border: none !important;

    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;

    box-shadow: none !important;
}

/* Hover */
body.woocommerce-order-received 
a.woocommerce-button.button.invoice.order-actions-button:hover {

    background: #115a42 !important;
    color: #ffffff !important;
}




body.woocommerce-order-received 
.woocommerce-customer-details ul.order_details {
    background: rgba(255, 255, 255, 0.06);
    padding: 25px 35px;
    border-radius: 12px;
    margin: 0;
    position: relative;
    z-index: 1;
}


body.woocommerce-order-received 
.woocommerce-customer-details {
    background: #15342b;
    padding: 50px;
    margin: 60px auto;
    max-width: 1000px;
    border-radius: 19px 0px 18px 60px;
    overflow: hidden;
    position: relative;
    z-index: 0;
}







/* Cart Button */
body.woocommerce-cart .return-to-shop a.button {

    background: #15342b;
    color: #eff6f3;
    font-family: 'Inter', sans-serif;
    font-weight: 600;

    padding: 16px 34px;
    border: none;
    border-radius: 0px 8px 8px 25px;

    transition: all 0.3s ease;
}

/* Checkout Hauptbutton */
body.woocommerce-checkout #place_order {

    background: #15342b;
    color: #eff6f3;
    font-family: 'Inter', sans-serif;
    font-weight: 600;

    padding: 16px 34px;
    border: none;
    border-radius: 0px 8px 8px 25px;

    transition: all 0.3s ease;
}

/* Hover */
body.woocommerce-cart .return-to-shop a.button:hover,
body.woocommerce-checkout #place_order:hover {

    background: #0d5a43;
    transform: translateY(-2px);
}






/* Versand Label im Warenkorb */
body.woocommerce-cart 
.elementor-widget-woocommerce-cart 
#shipping_method li label {

    color: #eff6f3 !important;
}

/* === Versand Zeile im rechten Summenblock zwie vershciedene grüntöne..aber gleiche ansicht im warenkorb=== */



/* Versandkosten Text im Summenblock */
body.woocommerce-cart 
.elementor-widget-woocommerce-cart 
.cart_totals 
#shipping_method li label {

    color: #F4FFFB !important;
    font-weight: 500 !important;
}

/* Versand Preis */
body.woocommerce-cart 
.elementor-widget-woocommerce-cart 
.cart_totals 
#shipping_method li label 
.woocommerce-Price-amount {

    color: #bbf5e4f !important;
    font-weight: 500 !important;
}




/* Produktname */
.woocommerce-checkout-review-order-table .product-name > a,
.woocommerce-checkout-review-order-table .product-name {
    color: #15342b!important;
    font-weight: 500 !important;
}

/* Meta-Infos (Farbe, Größe, x1 etc.) */
.woocommerce-checkout-review-order-table .wc-item-meta,
.woocommerce-checkout-review-order-table .wc-item-meta *,
.woocommerce-checkout-review-order-table .product-quantity {
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    color: #15342b !important;
}

/* Einzelpreise neben Produkten */
.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table .amount {
    font-weight: 500 !important;
    color: #15342b !important;
}



/* Gesamtsumme */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-weight: 600 !important;
    font-size: 1.1rem;
    color: #15342b !important;
}

body.woocommerce-checkout .wc-gzd-cart-info,
body.woocommerce-checkout .wc-gzd-additional-info,
body.woocommerce-checkout .wc-gzd-item-info {
    display: none !important;
}
body.woocommerce-cart .wc-gzd-cart-info,
body.woocommerce-cart .wc-gzd-additional-info,
body.woocommerce-cart .wc-gzd-item-info {
    display: none !important;
}

/* Gesamtsumme Betrag wirklich fett */
.woocommerce-checkout-review-order-table .order-total td .amount {
    font-weight: 700 !important;
}


/* Zwischensumme Betrag */
.woocommerce-checkout-review-order-table .cart-subtotal td .amount {
    font-weight: 600 !important;
}



/* MwSt Betrag (alle Varianten absichern) */
.woocommerce-checkout-review-order-table .tax-total td .amount,
.woocommerce-checkout-review-order-table .includes_tax .amount,
.woocommerce-checkout-review-order-table tr[class*="tax"] td .amount {
    font-weight: 600 !important;
}



.hero-band {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 4vw, 80px);
}

.hero-band img {
  height: clamp(140px, 22vh, 420px);
  width: auto;
}selector img {
  width: 120%;
  max-width: none;
}






/* Entfernt PayPal Pay Later Hinweis auf Produktseite */
.single-product .ppcp-messages,
.single-product .ppcp-messages-container {
    display: none !important;
}

/* Entfernt Pay Later im Warenkorb */
.woocommerce-cart .ppcp-messages,
.woocommerce-cart .ppcp-messages-container {
    display: none !important;
}


/* Verschiebt Kacheln auf MObil - WICHTIF <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */
@media (orientation: portrait), (max-aspect-ratio: 1000/1001) {
  .pano-puzzle.pano-bleed .pano-piece > .pano-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    object-position:
      var(--pos-x, var(--pos-x-p, 50%))
      var(--pos-y, var(--pos-y-p, 50%));
  }
}
.pano-piece {
  --pos-x-p: var(--pos-x, 50%);
}

/* Werte um die in MObile verschoben wir in Meta unsichtbar machen */
.pano-meta .pos-mobile-value {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}





/*  NUR HINWEIS! ------------>   Der Dot Hintergrund für Kasse und warenkorb in der Seite im Container -Erweitert!!!! <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */



/* NUR HINWEIS!
   Der Dot Hintergrund für Kasse und Warenkorb in der Seite im Container - Erweitert
*/









/* =====================================================
   WOOCOMMERCE CART & CHECKOUT – ORIGINAL WIRKUNG
   (nur strukturell repariert – Werte unverändert)
===================================================== */

@media (min-width:1025px){

  /* Elementor Begrenzung neutralisieren */
  body.woocommerce-cart .elementor-container{
    max-width:none !important;
  }

  body.woocommerce-cart .elementor-widget-woocommerce-cart{
    max-width:none !important;
    width:100%;
    margin:0;
  }

  /* CART */
  body.woocommerce-cart .woocommerce{
    margin-left:100px;
    margin-right:45px;
  }

  /* CHECKOUT */
  body.woocommerce-checkout .woocommerce{
    margin-left:80px;
    margin-right:45px;
  }

  /* Float deaktivieren */
  body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .cart-collaterals{
    float:none !important;
    width:auto !important;
  }

  /* Flex Verhältnis */
  body.woocommerce-cart .woocommerce-cart-form{
    flex:2.3;
    min-width:0;
  }

  body.woocommerce-cart .cart-collaterals{
    flex:1;
    min-width:245px;
  }

}



/* =====================================================
   CART – STACKED Übergang
===================================================== */

@media (max-width:1400px){

  body.woocommerce-cart .woocommerce{
    flex-direction:column;
    margin-left:120px;
  }

}



/* =====================================================
   MOBILE CART
===================================================== */

@media (max-width:1024px){

  body.woocommerce-cart .woocommerce{
    margin-left:0;
    margin-right:0;
    flex-direction:column;
  }

  body.woocommerce-cart .elementor-widget-woocommerce-cart{
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
  }

}



/* =====================================================
   CHECKOUT STEPPER
===================================================== */

@media (min-width:1025px){

  body.woocommerce-cart .woocommerce-checkout-steps,
  body.woocommerce-checkout .woocommerce-checkout-steps,
  body.woocommerce-cart .cart-stepper,
  body.woocommerce-checkout .cart-stepper{
    margin-left:100px;
    margin-right:40px;
  }

}


/* =====================================================
   MOBILE/TABLET – Abstand unter Hamburger
===================================================== */

@media (max-width:1099px){

  body.page:not(.home):not(.woocommerce):not(.single-product)
  .site-main{
    padding-top:80px;
  }

}



/* =====================================================
   DESKTOP CONTENT OFFSET (ab 1100px)
   460px Menü-Logik bleibt erhalten
===================================================== */

@media (min-width:1100px){

  body.page:not(.home):not(.woocommerce):not(.woocommerce-page):not(.single-product)
  .site-main > .elementor{
    padding-left:460px;
    padding-top:10px;
  }

  body.page:not(.home):not(.woocommerce):not(.woocommerce-page):not(.single-product)
  .site-main .elementor-section{
    max-width:100%;
  }

}








/* =========================================
   iPad Air Landscape Fix – Launch Safe
========================================= */

@media (min-width: 1100px) and (max-width: 1199px){

  body.woocommerce-cart .woocommerce{
    margin-left: 20px;   /* statt 120 */
    margin-right: 10px;  /* etwas kompakter */
  }

  body.woocommerce-cart .woocommerce-cart-form,
  body.woocommerce-cart .cart-collaterals{
    min-width: 10;
  }

}






/* =====================================================
   LEGAL PAGES – sauber isoliert
===================================================== */

@media (max-width:1024px){

  .legal-page{
    overflow-x:hidden;
  }

  .legal-page,
  .legal-page .e-con{
    max-width:100% !important;
  }

  .legal-page p,
  .legal-page li,
  .legal-page a{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

}




/* ===============================
   LAD HERO – Transform System

1. Desktop
> 1400px

2. Large Tablet Landscape (Menü links sichtbar)
1025 – 1400px  | landscape

3. Tablet Landscape
921 – 1024px   | landscape

4. Large Phone Landscape
768 – 920px    | landscape

5. Tablet Portrait
768 – 1024px   | portrait

6. Phone Landscape
= 767px        | landscape

7. Phone Portrait
= 767px        | portrait


   =============================== */

/* Stage */
.lad-hero-svg{
 width:100%;
 height:100vh;
 display:block;
}

/* MODEL 1 */
.lad-hero-svg #model1{
 transform-box:fill-box;
 transform-origin:center;
 transform:translate(var(--m1-x,0px),var(--m1-y,0px)) scale(var(--m1-s,1));
}

/* MODEL 2 */
.lad-hero-svg #model2{
 transform-box:fill-box;
 transform-origin:center;
 transform:translate(var(--m2-x,0px),var(--m2-y,0px)) scale(var(--m2-s,1));
}

/* BACKGROUND */
.lad-hero-svg #bg-group{
 transform-box:view-box;
 transform-origin:center;
 transform:translate(var(--bg-x,0px),var(--bg-y,0px)) scale(var(--bg-s,1));
}

/* LOGO POSITION */
.lad-hero-svg .lademeister-logo-pos{
 transform-box:fill-box;
 transform-origin:center;
 transform:translate(var(--lg-x,0px),var(--lg-y,0px));
}

/* LOGO SCALE */
.lad-hero-svg .lademeister-logo{
 transform-box:fill-box;
 transform-origin:center;
 transform:scale(var(--lg-s,1));
}

:root{

--m1-x:600px;
--m1-y:10px;
--m1-s:3.5;

--m2-x:90px;
--m2-y:0px;
--m2-s:3;

--lg-x:20px;
--lg-y:-57px;
--lg-s:1.55;

--bg-x:0px;
--bg-y:0px;
--bg-s:1;
}



/* ===== Large Tablet / Small Laptop (Menu still open) ===== */

@media (max-width:1400px) and (min-width:1025px){

:root{

/* Model links */
--m1-x:40px;
--m1-y:20px;
--m1-s:3.6;

/* Model rechts */
--m2-x:40px;
--m2-y:0px;
--m2-s:2.7;

/* Logo */
--lg-x:-33px;
--lg-y:-77px;
--lg-s:1.8;

/* Background */
--bg-x:0px;
--bg-y:0px;
--bg-s:1.1;

}

}




@media (max-width:1024px) and (orientation:landscape){

:root{

--m1-x:0px;
--m1-y:-90px;
--m1-s:5;

--m2-x:-40px;
--m2-y:-99px;
--m2-s:3.4;

--lg-x:-8px;
--lg-y:-130px;
--lg-s:2.2;

--bg-x:0px;
--bg-y:0px;
--bg-s:1.52;
}
}



@media (max-width:1024px) and (orientation:portrait){

:root{

--m1-x:370px;
--m1-y:30px;
--m1-s:3.95;

--m2-x:50px;
--m2-y:40px;
--m2-s:.98;

--lg-x:-253px;
--lg-y:-70px;
--lg-s:1.8;

--bg-x:-202px;
--bg-y:7px;
--bg-s:1.06;
}
}


/* ===== Foldable / Square Screens ===== */

@media (max-width:900px) 
and (min-width:700px) 
and (max-aspect-ratio:4/3)
and (orientation:landscape){

:root{

--m1-x:90px;
--m1-y:20px;
--m1-s:2.9;

--m2-x:-200px;
--m2-y:0px;
--m2-s:2.6;

--lg-x:-300px;
--lg-y:0px;
--lg-s:1.3;

--bg-x:-400px;
--bg-y:0px;
--bg-s:1.1;

}

}


/* ===== Large Phone Landscape ===== */

@media (max-width:935px) and (min-width:768px) and (orientation:landscape){

:root{

/* Model links */
--m1-x:40px;
--m1-y:0px;
--m1-s:3.6;

/* Model rechts */
--m2-x:10px;
--m2-y:0px;
--m2-s:2.0;

/* Logo */
--lg-x:0px;
--lg-y:-83px;
--lg-s:1.8;

/* Background */
--bg-x:0px;
--bg-y:0px;
--bg-s:1.18;

}

}


@media (max-width:767px) and (orientation:landscape){

:root{

--m1-x:-26px;
--m1-y:6px;
--m1-s:3.92;

--m2-x:28px;
--m2-y:6px;
--m2-s:2.92;

--lg-x:-40px;
--lg-y:-77px;
--lg-s:1.8;

--bg-x:0px;
--bg-y:0px;
--bg-s:1.08;
}
}


/* =====================================================
   Farbe Schild Lademeiste r. wer is t lademeister
===================================================== */


.lm-color path{
  fill:#ceffc2 !important;
 
  stroke:none !important;
}









.tripod-text{
  position:fixed;
  left:43%;
  top:32.5%;
  transform:translate(-50%,-50%);

  display:flex;
  flex-direction:column;
  align-items:center;

  font-family:"Inter", sans-serif;
  font-weight:500;
  font-size:18px;
  letter-spacing:0.16em;

  color:#ceffc2;
  text-align:center;

  pointer-events:none;
  opacity:0;

  z-index:10;
}

.tripod-text .line{
  opacity:0;
  transform:translateY(8px);

  text-shadow:
    0 0 6px #ceffc2,
    0 0 12px #ceffc2,
    0 0 22px #74ff9a;
}

body.page-id-9873 .section-full-stage {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}