:root{--ink:#173322;--gold:#b1842d;--cream:#f6efdc;--paper:#fbf7eb;--line:#d7c8a2;--card-line:#b8aa86;--shadow:0 12px 40px rgba(30,24,12,.12);--muted:#66695f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#20251f;background:#f5f0e3;font-family:Georgia,"Times New Roman",serif;line-height:1.5}.site-header{position:sticky;top:0;z-index:20;background:rgba(251,247,235,.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.topbar{max-width:1180px;margin:auto;min-height:78px;padding:8px 20px;display:flex;align-items:center;gap:16px}.brand img{width:175px;height:60px;object-fit:contain}.mobile-menu-btn{order:0;border:1px solid var(--line);background:#fffdf7;color:var(--ink);border-radius:6px;padding:9px 12px;font-size:1.25rem;cursor:pointer}.header-cart-btn{margin-left:auto;border:1px solid var(--ink);background:var(--ink);color:#fff;border-radius:999px;padding:10px 16px;cursor:pointer;font-family:inherit;font-size:1rem;white-space:nowrap}.header-cart-btn b{font-weight:bold}.topbar + nav{max-width:1180px;margin:auto;display:none;align-items:center;gap:18px;flex-wrap:wrap;padding:8px 20px 14px;border-top:1px solid var(--line)}body.mobile-nav-open #mainNav{display:flex}.topbar a{color:var(--ink);text-decoration:none;font-weight:bold}#mainNav > a{color:var(--ink);text-decoration:none;font-weight:bold;cursor:pointer;padding:9px 0}.nav-menu-btn{border:0;background:transparent;color:var(--ink);font:inherit;font-weight:bold;cursor:pointer;padding:9px 0}.nav-dropdown{position:relative}.dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:210px;background:#fffdf7;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:8px;z-index:30}.nav-dropdown.products-open .dropdown-menu,.nav-dropdown.legal-open .dropdown-menu{display:flex;flex-direction:column}.dropdown-menu a{display:block;padding:10px 12px;white-space:nowrap;color:var(--ink);text-decoration:none;font-weight:bold}.dropdown-menu a:hover{background:var(--cream);border-radius:5px}.dropdown-menu small{color:#777;font-weight:normal}.hero{position:relative;overflow:hidden;background:#173322;color:#fff;border-bottom:1px solid var(--line)}.hero::after{content:"";position:absolute;inset:0 0 0 46%;background-image:none}.hero-inner{position:relative;z-index:1;max-width:1180px;margin:auto;min-height:620px;padding:85px 20px;display:flex;align-items:center}.hero-copy{width:54%;max-width:650px}.hero .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:#e3c46f;font-weight:bold;margin:0 0 12px}.hero h1{font-size:clamp(4rem,9vw,7rem);line-height:.9;color:#fff;margin:0}.tagline{font-size:1.5rem;letter-spacing:.18em;color:#ddd;margin:20px 0}.hero .lead{font-size:1.18rem;max-width:600px;color:#fff;margin:0 0 28px}.hero .button{font-size:1.08rem;padding:15px 24px;border-radius:7px}.hero-logo{display:none}.benefits{max-width:1180px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper)}.benefit{min-height:105px;padding:8px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-right:1px solid var(--line);color:var(--ink)}.benefit:last-child{border-right:0}.benefit-icon{font-size:1.7rem;line-height:1;margin-bottom:10px}.benefit strong{font-size:1rem;line-height:1.2}.benefit small{margin-top:6px;color:var(--muted);font-size:.86rem}.section{max-width:1180px;margin:auto;padding:70px 20px}.max-width:1180px;margin:auto;padding:70px 20px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:28px}.section h2{font-size:2.6rem;color:var(--ink);margin:0 0 18px}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.filter{border:1px solid var(--gold);background:transparent;border-radius:999px;padding:9px 14px;cursor:pointer;font-family:inherit}.filter.active{background:var(--gold);color:#fff}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{background:#fffdf7;border:1.5px solid var(--card-line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;cursor:pointer;transition:transform .18s,box-shadow .18s}.card:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(30,24,12,.16)}.card:focus{outline:3px solid rgba(177,132,45,.35)}.card-img{height:231px;overflow:hidden;background:var(--cream);position:relative;display:flex;align-items:center;justify-content:center}.image-track{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}.image-track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;object-position:center;scroll-snap-align:start}.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;border:1px solid rgba(255,255,255,.8);background:rgba(23,51,34,.82);color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.8rem;line-height:1;cursor:pointer}.gallery-arrow.left{left:9px}.gallery-arrow.right{right:9px}.card-body{padding:20px;display:flex;flex-direction:column;flex:1}.cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#8a6721;font-weight:bold}.card h3{font-size:1.35rem;margin:5px 0 8px;color:var(--ink)}.card p{margin:0 0 15px}.card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}.price{font-weight:bold;font-size:1.2rem;color:var(--ink)}.add{border:1px solid var(--ink);background:var(--ink);color:white;border-radius:5px;padding:9px 12px;cursor:pointer;font-family:inherit}.paper{max-width:none;background:linear-gradient(135deg,#efe3bf,#fff9e9);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.about{max-width:950px;margin:auto;display:grid;grid-template-columns:1fr 300px;align-items:center;gap:50px}.about img{width:100%}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.info-grid article{background:#fffdf7;padding:25px;border:1px solid var(--line);border-radius:8px}.info-grid h3{color:var(--ink);margin-top:0}.info-grid ul{padding-left:20px}.legal-overview{padding-top:35px}.legal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.legal-grid a{background:#fffdf7;border:1px solid var(--line);border-radius:8px;padding:18px;color:var(--ink);text-decoration:none;font-weight:bold;display:flex;justify-content:space-between}.contact-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:start}.contact-form{background:#fffdf7;border:1px solid var(--line);border-radius:10px;padding:25px}.contact-form label{display:block;font-weight:bold;color:var(--ink);margin-bottom:15px}.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #cfc5aa;border-radius:6px;background:#fff;font:inherit}.contact-form textarea{resize:vertical}.contact-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.form-status{min-height:1.4em}.success-text{color:#1c6638}.error-text{color:#9a2f24}.honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.section-back{margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}.page-section{min-height:40vh}footer{background:var(--ink);color:#eee;padding:28px 20px}.footer-inner{max-width:1180px;margin:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.footer-inner div:first-child{display:flex;gap:15px;align-items:center}.footer-links{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}.footer-links a{color:#fff}.copyright{max-width:1180px;margin:18px auto 0;color:#cdd4ce;font-size:.85rem}.drawer,.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50;opacity:0;pointer-events:none;transition:.2s}.drawer.open,.modal.open{opacity:1;pointer-events:auto}.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(500px,100%);background:#fffdf7;padding:25px;overflow:auto}.drawer-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.drawer-head button,.modal-close{border:0;background:transparent;font-size:1.4rem;cursor:pointer}.cart-row{display:grid;grid-template-columns:65px 1fr auto;gap:12px;padding:15px 0;border-bottom:1px solid #ddd}.cart-row img{width:65px;height:65px;object-fit:cover}.qty{display:flex;gap:5px;margin-top:8px}.qty button{border:1px solid #bbb;background:white;border-radius:4px;padding:4px 8px}.qty .link-danger{border:0;background:transparent;color:#8b3b2e}.cart-total{display:flex;justify-content:space-between;font-size:1.2rem;padding:22px 0}.full{width:100%}.small{font-size:.82rem;color:#666}.modal{display:grid;place-items:center;padding:20px}.modal-box{background:#fffdf7;max-width:900px;width:100%;max-height:92vh;overflow:auto;padding:30px;border-radius:10px;position:relative}.modal-close{position:absolute;right:18px;top:15px}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:30px}.detail-gallery{height:420px;background:var(--cream);overflow:hidden;position:relative}.detail-gallery .image-track img{object-fit:contain}.product-detail h2{font-size:2.2rem;color:var(--ink)}.detail-list{padding-left:20px}.modal-actions{margin-top:25px;padding-top:15px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}.notice{background:#f1ead8;border-left:4px solid var(--gold);padding:14px 16px;margin:20px 0}.checkout-box{max-width:900px}.checkout-head{display:flex;justify-content:space-between;align-items:start}.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0 30px}.step{font-size:.85rem;color:#777;border-bottom:3px solid #ddd;padding-bottom:10px}.step b{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#ddd;color:#555;margin-right:7px}.step.active,.step.done{color:var(--ink);border-color:var(--gold)}.step.active b,.step.done b{background:var(--ink);color:#fff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label{font-weight:bold;color:var(--ink)}.form-grid .wide{grid-column:1/-1}.form-grid input,.form-grid select{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #cfc5aa;border-radius:6px;background:white;font:inherit}.check{display:flex;gap:9px;align-items:flex-start;margin:20px 0}.check input{margin-top:5px}.checkout-actions{display:flex;justify-content:space-between;gap:12px;margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}.option-list{margin:15px 0}.option-list h3{color:var(--ink)}.option{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);background:#fff;padding:15px;margin:10px 0;border-radius:8px;cursor:pointer}.option span{display:flex;flex-direction:column}.option small{color:#666}.summary-mini,.totals{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}.review-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:35px}.review-grid h3{color:var(--ink)}.review-items>div{display:grid;grid-template-columns:55px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #ddd}.review-items img{width:55px;height:55px;object-fit:cover}.review-items span{display:flex;flex-direction:column}.review-items small{color:#666}.totals{margin-top:20px}.totals strong{font-size:1.15rem}.legal-check a{color:var(--ink);font-weight:bold}.confirmation{text-align:center;padding:25px 10px}.success{width:70px;height:70px;margin:0 auto 20px;border-radius:50%;background:var(--ink);color:#fff;font-size:3rem;line-height:70px}.confirm-box{max-width:480px;margin:25px auto;background:#f2ebd8;border:1px solid var(--line);padding:20px;display:grid;grid-template-columns:1fr auto;gap:10px;text-align:left}.server-error{max-width:1180px;margin:15px auto;padding:14px 20px;background:#f7d9d4;border:1px solid #c98c82;color:#7d241b}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero-inner,.about,.product-detail,.review-grid,.contact-wrap{grid-template-columns:1fr}.info-grid,.legal-grid{grid-template-columns:1fr}.hero-logo{max-width:230px}.stepper{grid-template-columns:repeat(2,1fr)}.topbar{padding:8px 12px}.topbar + nav{padding-left:12px;padding-right:12px;flex-direction:column;align-items:stretch;gap:0}.topbar + nav > a,.topbar + nav > .nav-dropdown{width:100%;margin:0;padding:0}.topbar + nav > a,.topbar + nav > .nav-dropdown > .nav-menu-btn{display:block;text-align:left;width:100%;padding:12px 0;margin:0}.nav-dropdown .dropdown-menu{position:static;width:100%;box-shadow:none;border:0;border-radius:0;padding:0 0 4px 0;margin:0}.nav-dropdown .dropdown-menu a{padding:10px 0}.nav-dropdown.products-open .dropdown-menu,.nav-dropdown.legal-open .dropdown-menu{display:flex}}@media(max-width:560px){.grid{grid-template-columns:1fr}.section{padding:45px 15px}.hero-inner{padding:45px 15px}.section-head{align-items:flex-start;flex-direction:column}.topbar{min-height:70px;gap:8px}.brand img{width:130px;height:55px}.header-cart-btn{padding:9px 12px;font-size:.95rem}.header-cart-btn span{display:none}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.checkout-actions{flex-direction:column-reverse}.stepper{grid-template-columns:1fr}.footer-links{margin-left:0}.card-img{height:250px}.detail-gallery{height:330px}.contact-actions{align-items:stretch;flex-direction:column}.contact-actions .button{width:100%}}img{-webkit-user-drag:none;user-select:none}.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#173322;color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;z-index:2000;box-shadow:0 -4px 12px rgba(0,0,0,.15)}.cookie-banner a{color:#e2ded4;text-decoration:underline}
/* Kompakte Bestellbestätigung */
.compact-confirmation{max-width:560px;margin:0 auto;padding:10px 5px 5px}
.compact-confirmation .success{width:58px;height:58px;line-height:58px;font-size:2.3rem;margin-bottom:12px}
.compact-confirmation h2{margin:5px 0 8px;font-size:2rem}
.compact-confirmation .confirm-box{margin:16px auto;padding:14px 16px;gap:6px;max-width:430px}
.compact-confirmation .button{margin-top:8px}

/* Bestellübersicht: AGB-/Datenschutz-Zustimmung auf kleinen Bildschirmen sauber umbrechen */
.legal-check{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;overflow-wrap:anywhere;}
.legal-check input{margin-top:5px;}
.legal-check .legal-text{min-width:0;display:block;}
.legal-check a{overflow-wrap:anywhere;word-break:break-word;}

/* KilicFlies – Produktsuche */
.product-section-head{align-items:flex-end}
.product-tools{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:min(100%,430px)}
.product-search{display:flex;align-items:center;gap:8px;width:min(100%,430px);background:#fffdf7;border:1px solid var(--line);border-radius:999px;padding:0 14px;color:var(--muted)}
.product-search span{font-family:Arial,sans-serif;font-size:1.35rem;line-height:1}
.product-search-input{width:100%;border:0;outline:0;background:transparent;padding:11px 2px;font:inherit;color:var(--ink);min-width:0}
.product-search-input::placeholder{color:#888}
.search-empty{grid-column:1/-1;padding:35px 20px;text-align:center;background:#fffdf7;border:1px dashed var(--line);border-radius:10px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.search-empty strong{color:var(--ink);font-size:1.1rem}
@media(max-width:900px){.product-section-head{align-items:flex-start}.product-tools{width:100%;align-items:stretch}.product-search{width:100%}}

/* Startseite V12.1 – hero nach dem freigegebenen Mobil-Entwurf */
.brand{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;z-index:2}
.brand img{width:205px;height:68px;object-fit:contain}
.topbar{position:relative}
/* Startseite V12.2 – mobile Hero sauber im Seitenfluss */
.hero .button:link,
.hero .button:visited,
.hero .button:hover,
.hero .button:active{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  background:var(--ink);
  color:#fff !important;
  text-decoration:none !important;
  border:1px solid var(--ink);
  box-shadow:none;
}
.hero .button:hover{filter:brightness(1.08);}
@media(max-width:900px){
  .hero::after{inset:0;background-image:none}
  .hero-inner{min-height:540px;padding:55px 24px}
  .hero-copy{width:100%;max-width:620px}
  .hero h1{font-size:clamp(3.7rem,15vw,6rem)}
  .hero .lead{font-size:1.08rem;max-width:520px}
  .hero .button{margin-top:2px}
  .benefits{grid-template-columns:repeat(2,1fr);padding:18px 12px}
  .benefit{min-height:120px;padding:10px 12px;border-right:1px solid var(--line)}
  .benefit:nth-child(2){border-right:0}
  .benefit:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:560px){
  .topbar{min-height:76px;padding:8px 12px}
  .brand img{width:180px;height:62px}
  .mobile-menu-btn{padding:12px 15px;font-size:1.35rem}
  .header-cart-btn{padding:10px 14px}
  .hero{overflow:hidden}
  .hero-inner{min-height:500px;padding:48px 22px}
  .hero-copy{max-width:none}
  .hero .eyebrow{font-size:.68rem;letter-spacing:.13em;line-height:1.45;margin-bottom:10px}
  .hero h1{font-size:clamp(3.25rem,15vw,5rem);line-height:.92}
  .tagline{font-size:1.15rem;margin:14px 0}
  .hero .lead{font-size:1rem;line-height:1.48;margin-bottom:22px}
  .hero .button{font-size:1rem;padding:14px 19px;border-radius:7px}
}

/* V12.3 – mobile Startseite kompakter: Hero kleiner, vier Kacheln nebeneinander */
@media (max-width:900px){
  .hero-inner{min-height:455px;padding:42px 22px;}
  .hero-copy{max-width:580px;}
  .benefits{
    grid-template-columns:repeat(4,1fr) !important;
    padding:14px 6px !important;
  }
  .benefit{
    min-height:105px !important;
    padding:8px 5px !important;
    border-right:1px solid var(--line) !important;
    border-bottom:0 !important;
  }
  .benefit:last-child{border-right:0 !important;}
  .benefit-icon{font-size:1.25rem !important;margin-bottom:6px !important;}
  .benefit strong{font-size:.72rem !important;line-height:1.15 !important;}
  .benefit small{font-size:.62rem !important;line-height:1.2 !important;margin-top:4px !important;}
}
@media (max-width:560px){
  .hero-inner{min-height:355px !important;padding:34px 18px !important;}
  .hero .eyebrow{font-size:.61rem !important;letter-spacing:.11em !important;margin-bottom:7px !important;}
  .hero h1{font-size:clamp(3rem,14vw,4.2rem) !important;}
  .hero .tagline{font-size:1rem !important;margin:10px 0 !important;}
  .hero .lead{font-size:.9rem !important;line-height:1.4 !important;margin-bottom:16px !important;max-width:95% !important;}
  .hero .button{font-size:.92rem !important;padding:11px 16px !important;}
  .benefits{padding:12px 3px !important;}
  .benefit{min-height:92px !important;padding:6px 3px !important;}
  .benefit-icon{font-size:1.1rem !important;margin-bottom:4px !important;}
  .benefit strong{font-size:.65rem !important;}
  .benefit small{font-size:.55rem !important;}
}


/* HERO-BILD – auf Mobilgeräten proportional kleiner darstellen */
@media (max-width: 900px){
  .hero::after{
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-color: var(--ink) !important;
  }
}

@media (max-width: 560px){
  .hero::after{
    background-size: contain !important;
    background-position: right center !important;
  }
}


/* V12.4 – Navigation auf den separaten Rechtsseiten auch am Desktop öffnen */
@media (min-width: 901px){
  body:has(#legalMainNav.legal-nav-open) #legalMainNav{
    display:flex;
  }
  body:has(#legalMainNav.legal-nav-open) #legalMainNav > a,
  body:has(#legalMainNav.legal-nav-open) #legalMainNav > .nav-dropdown{
    display:block;
  }
}
/* Fallback für Browser ohne :has() */
#legalMainNav.legal-nav-open{display:flex;}

/* V12.4 – mobile Startseite etwas niedriger, damit das Hero-Bild besser passt */
.hero-copy > p:has(br:only-child){display:none;}
@media (max-width:900px){
  .hero-inner{min-height:410px !important;padding:34px 22px !important;}
}
@media (max-width:560px){
  .hero-inner{min-height:320px !important;padding:27px 18px !important;}
  .hero h1{font-size:clamp(2.8rem,13vw,4rem) !important;}
  .hero .tagline{margin:8px 0 !important;}
  .hero .lead{margin-bottom:14px !important;}
}


/* FINAL – kompakter Mobile-Hero und normales Hintergrundbild */
@media (max-width: 560px){
  .hero::after{
    inset:0 !important;
    background-image:none !important;
  }
  .hero-inner{
    min-height:0 !important;
    height:430px !important;
    padding:30px 18px !important;
    align-items:flex-start !important;
  }
  .hero-copy{width:100% !important;max-width:100% !important;}
  .hero .eyebrow{font-size:.62rem !important;line-height:1.25 !important;margin:0 0 8px !important;}
  .hero h1{font-size:clamp(3rem,13vw,4rem) !important;line-height:.9 !important;}
  .hero .tagline{font-size:1rem !important;margin:12px 0 !important;}
  .hero .lead{font-size:.95rem !important;line-height:1.38 !important;margin:0 0 16px !important;}
  .hero .button{font-size:.95rem !important;padding:12px 18px !important;}
}
@media (min-width:561px) and (max-width:900px){
  .hero-inner{min-height:0 !important;height:480px !important;padding:38px 24px !important;}
}


/* HERO: echtes IMG statt CSS-Hintergrund */
.hero{position:relative;overflow:hidden;}
.hero-image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center center;z-index:0;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,51,34,.96) 0%,rgba(23,51,34,.72) 42%,rgba(23,51,34,.20) 72%,rgba(23,51,34,.08) 100%);z-index:1;pointer-events:none;}
.hero-inner{position:relative;z-index:2;}
@media(max-width:900px){
  .hero-image{object-position:center center;}
}
@media(max-width:560px){
  .hero-image{object-position:center center;}
}


/* FINAL REPAIR – Hero image must remain visible on every viewport */
.hero{position:relative;overflow:hidden;background:var(--ink);isolation:isolate;}
.hero-image{position:absolute!important;inset:0!important;display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center center!important;z-index:0!important;}
.hero::after{content:""!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(23,51,34,.74) 0%,rgba(23,51,34,.50) 43%,rgba(23,51,34,.16) 72%,rgba(23,51,34,.06) 100%)!important;}
.hero-inner{position:relative!important;z-index:2!important;}
.hero .button,.hero .button:link,.hero .button:visited,.hero .button:hover,.hero .button:active{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff!important;text-decoration:none!important;border:1px solid var(--ink);}
@media(max-width:900px){.hero-image{display:block!important;visibility:visible!important;opacity:1!important;object-fit:cover!important;object-position:center center!important;}.hero::after{background:linear-gradient(90deg,rgba(23,51,34,.70) 0%,rgba(23,51,34,.44) 50%,rgba(23,51,34,.10) 100%)!important;}}
@media(max-width:560px){.hero-image{display:block!important;visibility:visible!important;opacity:1!important;object-fit:cover!important;object-position:95% center!important;}.hero::after{background:linear-gradient(90deg,rgba(23,51,34,.68) 0%,rgba(23,51,34,.38) 55%,rgba(23,51,34,.08) 100%)!important;}}


/* FINAL MOBILE HERO – kleinere quadratische Bildvariante, damit die Fliege sichtbar bleibt */
.hero-picture{position:absolute;inset:0;display:block;z-index:0;}
.hero-picture .hero-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;}
@media (max-width:560px){
  .hero-picture{position:absolute!important;inset:0!important;overflow:hidden!important;}
  /*
   * Das Hero-Foto ist deutlich breiter als hoch (Panorama), die Fliege
   * sitzt darin rechts. Auf schmalen Handy-Bildschirmen wird das Bild
   * per object-fit:cover in der Breite stark beschnitten – daher hier
   * rechtsbündig zuschneiden, statt zentriert, sonst verschwindet die
   * Fliege aus dem sichtbaren Ausschnitt.
   */
  .hero-picture .hero-image{object-fit:cover!important;object-position:95% center!important;}
}

/* Vorteile: zusätzlich auf der Seite „Fliegen“, nicht auf anderen Unterseiten */
.benefits-in-section{max-width:none;margin:0 0 35px;padding-left:0;padding-right:0;}
@media(max-width:900px){.benefits-in-section{grid-template-columns:repeat(4,1fr)!important;padding:14px 6px!important;}}
@media(max-width:560px){.benefits-in-section{padding:12px 3px!important;}}

/* Account + language controls */
.header-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.account-header-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fffdf7;color:var(--ink);border-radius:999px;padding:9px 12px;text-decoration:none;font-weight:bold;white-space:nowrap}
.account-header-btn:hover{background:var(--cream)}
.lang-switcher{position:relative}
.lang-switcher-btn{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fffdf7;border-radius:999px;padding:7px 11px;color:var(--ink);font:inherit;font-weight:bold;cursor:pointer}
.lang-switcher-btn:hover{background:var(--cream)}
.lang-switcher-btn:focus-visible{outline:3px solid rgba(177,132,45,.35);outline-offset:2px}
.lang-flag{width:19px;height:13px;border-radius:2px;flex-shrink:0;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lang-code{font-size:.92rem}
.lang-caret{font-size:.7rem;opacity:.7}
.lang-switcher-list{position:absolute;top:100%;right:0;margin-top:6px;min-width:170px;background:#fffdf7;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;list-style:none;z-index:40}
.lang-switcher-list[hidden]{display:none}
.lang-switcher-list li{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;cursor:pointer;font-weight:bold;color:var(--ink)}
.lang-switcher-list li:hover,.lang-switcher-list li:focus,.lang-switcher-list li.active{background:var(--cream);outline:none}
@media(max-width:560px){
 .header-tools{gap:4px}
 .account-header-btn{padding:9px 10px;font-size:.9rem}
 .account-header-btn span{display:none}
 .lang-switcher-btn{padding:6px 8px}
 .lang-code{display:none}
}


/* MOBILE HEADER – ausgewogene Abstände zwischen Menü, Logo, Sprache und Warenkorb */
@media (max-width:560px){
  .topbar{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    column-gap:10px !important;
    min-height:76px !important;
    padding:8px 10px !important;
  }
  .mobile-menu-btn{
    grid-column:1;
    margin:0 !important;
    flex:none !important;
    padding:11px 13px !important;
  }
  .brand{
    position:static !important;
    transform:none !important;
    grid-column:2;
    justify-self:start !important;
    min-width:0 !important;
    width:auto !important;
  }
  .brand img{
    width:132px !important;
    height:56px !important;
    object-fit:contain !important;
  }
  .header-tools{
    grid-column:3;
    margin-left:0 !important;
    gap:8px !important;
    min-width:0 !important;
    justify-content:flex-end !important;
  }
  .account-header-btn{padding:8px 8px !important;}
  .lang-switcher-btn{padding:6px 8px !important;}
  .header-cart-btn{padding:9px 11px !important;}
}

/* =========================================================
   GLOBALES BUTTON-SYSTEM (site-wide, ersetzt seitenlokale
   Button-Styles in account.html / product.html)
   ========================================================= */
a.button,button.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;box-sizing:border-box;padding:12px 20px;border:1px solid var(--ink);border-radius:8px;background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;font:inherit;font-weight:700;font-size:.95rem;line-height:1.2;white-space:nowrap}
a.button:link,a.button:visited{color:#fff;text-decoration:none}
a.button:hover,button.button:hover{filter:brightness(1.1);color:#fff;text-decoration:none}
a.button:focus-visible,button.button:focus-visible{outline:3px solid rgba(177,132,45,.35);outline-offset:2px}
button.button:disabled{opacity:.6;cursor:not-allowed;filter:none}
a.button.secondary,button.button.secondary{background:transparent;color:var(--ink);border:1px solid var(--ink)}
a.button.secondary:hover,button.button.secondary:hover{background:rgba(23,51,34,.08);color:var(--ink)}
a.button.danger,button.button.danger{background:#9b1c1c;border-color:#9b1c1c;color:#fff}
a.button.danger:hover,button.button.danger:hover{background:#7d1616;border-color:#7d1616}
a.button.full,button.button.full{width:100%}
@media(max-width:560px){
  a.button,button.button{padding:11px 16px;font-size:.92rem}
}

/* =========================================================
   EINHEITLICHE FEHLER-MARKIERUNG BEI FEHLENDER/UNGÜLTIGER
   EINGABE (site-wide, z. B. Checkout und "Meine Daten").
   Zuvor unterschiedlich: mal roter Rahmen (eigene Markierung),
   mal schwarzer Standard-Rahmen des Browsers (native
   Validierung ohne eigenes Styling). Jetzt überall rot.
   ========================================================= */
.field-error{outline:3px solid #c0392b !important;outline-offset:2px;border-color:#c0392b !important}

/*
 * Bei Feldern nah am Seitenanfang (z. B. Vorname/Nachname/E-Mail bei
 * "Konto erstellen") kann nicht mehr weit genug hochgescrollt werden,
 * um sie mittig zu platzieren – dadurch landen sie sonst genau unter
 * dem fest stehenden (sticky) Kopfbereich und sind halb verdeckt. Der
 * scroll-margin-top lässt beim Scrollen zum Feld immer Platz für den
 * Kopfbereich, egal wie weit oben im Formular das Feld steht.
 */
.account-form input,
.account-form select,
.account-form textarea,
.form-grid input,
.form-grid select,
.form-grid textarea,
.account-message{scroll-margin-top:110px}
@media(max-width:560px){
  .account-form input,
  .account-form select,
  .account-form textarea,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  .account-message{scroll-margin-top:95px}
}

/*
 * Eigene Sprechblase für Feldfehler (ersetzt die native
 * Browser-Validierungsblase, die sich als unzuverlässig herausgestellt
 * hat – siehe showFieldBubble in account.html bzw. checkout.js).
 * position:fixed, damit sie unabhängig vom restlichen Seiten-Layout
 * (z. B. über dem festen Kopfbereich) frei positioniert werden kann.
 */
.field-error-bubble{position:fixed;z-index:1000;max-width:280px;background:#fff;color:#7d241b;border:1px solid #c0392b;border-radius:6px;padding:9px 13px;font-size:.85rem;line-height:1.35;box-shadow:0 6px 18px rgba(30,24,12,.2)}
.field-error-bubble::before{content:"";position:absolute;left:16px;width:11px;height:11px;background:#fff;border:1px solid #c0392b;transform:rotate(45deg)}
.field-error-bubble.arrow-top::before{top:-6px;border-right:0;border-bottom:0}
.field-error-bubble.arrow-bottom::before{bottom:-6px;border-left:0;border-top:0}

/*
 * Land-/Sprach-Bestätigungsbanner (oberhalb des Kopfbereichs): zeigt
 * beim ersten Besuch das per IP erkannte Land/die Versandkosten-Stufe
 * an und lässt Land + Sprache bestätigen/ändern.
 */
.region-banner{background:#173322;color:#fff;padding:14px 20px}
.region-banner-inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.region-banner p{margin:0;flex:1 1 340px;line-height:1.5;font-size:.9rem;white-space:pre-line}
.region-banner-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.region-banner-controls label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;font-weight:bold;color:#e2ded4;text-transform:uppercase;letter-spacing:.04em}
.region-banner-controls select{padding:8px 10px;border-radius:6px;border:1px solid var(--line);font:inherit;font-size:.9rem;background:#fff;color:#20251f}
.region-banner-close{border:0;background:transparent;color:#fff;font-size:1.25rem;cursor:pointer;padding:2px 6px;line-height:1;align-self:center}
@media(max-width:700px){
  .region-banner-inner{flex-direction:column;align-items:stretch}
  .region-banner-controls{justify-content:space-between}
}

/*
 * Markierung für deaktivierte Produkte – nur für eingeloggte Admins
 * überhaupt sichtbar (siehe products.php: "active":false wird nur an
 * Admins ausgeliefert), damit vor der Veröffentlichung live getestet
 * oder z. B. per Newsletter vorab angekündigt werden kann.
 */
.admin-inactive-name{color:#c0392b}
.admin-inactive-badge{display:inline-block;background:#c0392b;color:#fff;font-size:.65rem;font-weight:bold;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;vertical-align:middle;margin-right:2px}

/*
 * Gäste-Newsletter-Anmeldung als eigene Seite/Reiter (#newsletter,
 * eigener Menüpunkt oben im Hauptmenü) – nur E-Mail-Adresse, kein
 * Kundenkonto nötig. Nutzt bewusst denselben Aufbau wie der
 * Kontaktbereich (.contact-wrap/.contact-form), damit der
 * "Abonnieren"-Button (mit .button, nicht .button.secondary) auch
 * gut lesbar/sichtbar ist.
 */
.newsletter-section-wrap{max-width:640px;margin:auto;background:#fffdf7;border:1px solid var(--line);border-radius:10px;padding:30px}
.newsletter-section-form{margin-top:20px}
.newsletter-section-form label{display:block;font-weight:bold;color:var(--ink);margin-bottom:15px}
.newsletter-section-form input[type="email"]{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #cfc5aa;border-radius:6px;background:#fff;font:inherit;box-sizing:border-box}

/*
 * Produktbewertungen (Sterne + Liste) auf der Produktseite.
 */
.product-review-summary{display:flex;align-items:center;gap:8px;margin:4px 0 14px}
.product-review-summary .stars{color:var(--gold);letter-spacing:2px;font-size:1.05rem}
.product-review-summary .review-count{color:#666;font-size:.9rem}
.product-reviews-list{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}
.product-reviews-list h3{color:var(--ink)}
.product-review-item{border-bottom:1px solid #e6ddc4;padding:14px 0}
.product-review-item .stars{color:var(--gold);letter-spacing:2px;display:block;margin-bottom:4px}
.product-review-item .review-author{font-size:.85rem;color:#666;margin:0 0 6px}

/* HERO-KARUSSELL (siehe app.js → initHeroCarousel): zeigt abwechselnd
   Intro-Text, als "featured" markierte Fliegen und Ankündigungen als
   volle Kachel über dem Hintergrundbild – auf JEDER Bildschirmgröße
   (früher nur auf dem Smartphone, der feste linksbündige Hero-Text
   war auf dem PC bis hierhin die einzige "Kachel"). Wischen per
   Finger, Ziehen per Maus, die Pfeil-Buttons und – wenn die
   Kachel-Fläche per Klick/Tab fokussiert ist – die Pfeiltasten
   schalten manuell um; dazwischen läuft ein automatischer Timer mit
   individueller Wartezeit pro Kachel (dataset.durationMs, siehe
   app.js). Das automatische Schwenken des Hintergrundbilds bleibt
   unten bewusst auf das Smartphone beschränkt (dort ein hochformatiger
   Bildausschnitt, der geschwenkt werden muss – am PC deckt das breite
   Bild per object-fit:cover schon alles ab, ein Schwenk wäre unnötig). */
.hero-scrollwrap{position:relative;height:auto;}
.hero-scrollwrap .hero{position:relative;top:auto;overflow:hidden;}
.hero-inner{position:relative;background:transparent;height:auto;padding:0;overflow:hidden;min-height:480px;}
.hero-copy{width:100%;max-width:640px;margin:0 auto;padding:52px 30px;text-align:center;}

/* position:absolute + inset:0 statt relative/100%: das Karussell soll IMMER
   die komplette Fläche von .hero-inner ausfüllen (Rahmen der abgerundeten
   Ecken egal ob innen Padding steckt) – absolut positionierte Kinder werden
   laut CSS-Spec am Padding-Rand des Elternelements ausgerichtet, ignorieren
   also jegliches Padding von .hero-inner. Das ist bewusst so gewählt, weil
   in style.css noch etliche alte .hero-inner{padding:...!important}-Regeln
   aus früheren Sessions/Breakpoints existieren (siehe Kommentare "V12.3"
   etc.) – ohne dieses inset:0 hätten Produkt-/Ankündigungs-Kacheln dort
   eine Lücke gezeigt, durch die (weil .hero-inner transparent ist) das
   Hintergrundfoto der Startkachel sichtbar durchscheint. */
/* touch-action:pan-y ist entscheidend: ohne das darf das Handy horizontale
   Finger-Gesten hier selbst interpretieren (z. B. als "Zurück"-Wischgeste
   des Browsers/Systems, besonders vom linken Rand her) statt sie zuerst
   ganz JS (Wisch-Logik weiter unten in app.js) zu überlassen – das erklärte
   vermutlich, warum sich auf dem Handy nur vorwärts wischen ließ: das
   System hat das Zurück-Wischen abgefangen, bevor es die Kachel überhaupt
   erreichte. pan-y erlaubt weiterhin normales senkrechtes Scrollen der
   Seite, nur waagerecht übernimmt jetzt ausschließlich unser JS. */
.hero-slides{position:absolute;inset:0;outline:none;touch-action:pan-y;}
.hero-slides:focus-visible{box-shadow:inset 0 0 0 3px rgba(225,196,111,.65);}
.hero-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;transform:translateX(100%);transition:transform .9s cubic-bezier(.4,0,.2,1);}
/* Bevor app.js überhaupt läuft (z. B. während Produkte/Ankündigungen noch
   nachgeladen werden), soll NICHT die ganze Hero-Fläche leer aussehen –
   daher startet ausgerechnet die Intro-Kachel sichtbar (translateX(0)),
   alle anderen bleiben bis zum ersten JS-Durchlauf rechts draußen. */
.hero-slide-intro{transform:translateX(0);z-index:2;}
.hero-slide.hero-slide-snap{transition:none!important;}
.hero-slide-product{background:var(--ink);color:#fff;align-items:center;text-align:center;padding:32px 26px;cursor:pointer;}
.hero-slide-product img{max-width:58%;max-height:56%;object-fit:contain;margin:0 auto 18px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));}
.hero-slide-product .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;color:#e3c46f;font-weight:bold;margin:0 0 8px}
.hero-slide-product h2{font-size:2.1rem;color:#fff;margin:0 0 10px;line-height:1.15}
.hero-slide-product .hero-slide-short{font-size:1.02rem;color:#e7e9e4;margin:0 0 12px;max-width:440px}
.hero-slide-product .hero-slide-price{font-size:1.35rem;font-weight:bold;color:#fff}
.hero-slide-product .hero-slide-hint{margin-top:12px;font-size:.9rem;color:#cdd4ce}

/* Ankündigungs-Folie (z. B. Messetermine): Bild oben, darunter frei per
   HTML gestalteter Inhalt aus dem Admin-Bereich – Grundfarben/-abstände
   hier nur als sinnvoller Rahmen, der Admin-Inhalt kann das per eigenem
   Markup/Inline-Style jederzeit überschreiben. */
.hero-slide-announcement{background:var(--ink);color:#fff;align-items:center;text-align:center;padding:32px 26px;}
/* ":not(.hero-slide-hero)" ist hier wichtig: "max-height" schränkt ein
   Bild auch dann ein, wenn eine ANDERE Regel "height" per !important
   setzt (beides sind unterschiedliche Eigenschaften, !important auf der
   einen gewinnt nicht automatisch gegen die andere) – ohne diesen
   Ausschluss würde diese Regel das Vollbild-Hintergrundfoto der
   "Hero"-Ankündigung ungewollt auf einen Bruchteil seiner Höhe
   zusammenstauchen. */
.hero-slide-announcement:not(.hero-slide-hero) img{max-width:100%;max-height:46%;object-fit:contain;margin:0 auto 18px;border-radius:8px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));}
.hero-slide-announcement-content{max-width:440px;}
.hero-slide-announcement-content :first-child{margin-top:0;}
.hero-slide-announcement-content :last-child{margin-bottom:0;}

/*
 * Ankündigung im "Hero"-Layout: sieht aus wie die feste Intro-Kachel
 * (Vollbildfoto als Hintergrund, Text/Button darüber), ist aber komplett
 * über den Ankündigungs-Editor pflegbar. Nutzt für das Hintergrundfoto
 * bewusst dieselben Klassen "hero-picture"/"hero-image" wie die
 * Intro-Kachel (siehe index.html/app.js) – dadurch gelten automatisch
 * ALLE schon vorhandenen Regeln dafür (randloser Zuschnitt am PC, der
 * automatische Foto-Schwenk auf dem Handy inkl. Sicherheitsnetz), ohne
 * sie hier ein zweites Mal pflegen zu müssen.
 */
.hero-slide-announcement.hero-slide-hero{background:transparent;padding:0;align-items:stretch;text-align:left;cursor:default;}
.hero-slide-hero .hero-picture{position:absolute;inset:0;z-index:0;}
.hero-slide-hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(23,51,34,.85) 0%,rgba(23,51,34,.55) 45%,rgba(23,51,34,.15) 100%);}
.hero-slide-hero-copy{position:relative;z-index:2;width:100%;max-width:640px;margin:0 auto;padding:52px 30px;text-align:center;box-sizing:border-box;}
.hero-slide-hero-eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:#e3c46f;font-weight:bold;margin:0 0 12px;}
.hero-slide-hero-title{font-size:clamp(2.6rem,8vw,4.5rem);line-height:.95;color:#fff;margin:0 0 14px;}
.hero-slide-hero-tagline{font-size:1.1rem;letter-spacing:.14em;color:#ddd;margin:0 0 16px;text-transform:uppercase;}
.hero-slide-hero-lead{font-size:1.02rem;line-height:1.5;color:#fff;max-width:480px;margin:0 auto 22px;}
.hero-slide-hero-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:13px 22px;border:1px solid var(--ink);border-radius:7px;background:var(--ink);color:#fff!important;text-decoration:none!important;font-weight:bold;font-size:1rem;transition:filter .15s;}
.hero-slide-hero-button:hover{filter:brightness(1.08);}
.hero-slide-hero .admin-inactive-badge{position:absolute;top:14px;left:14px;z-index:3;}

/* Pfeil-Buttons für Maus/Tastatur (v. a. am PC gedacht): app.js blendet
   sie per JS aus, sobald es nur eine Kachel gibt (nichts zum Umschalten).
   Auf dem Smartphone bewusst ausgeblendet – dort ist Wischen per Finger
   die naheliegendere Bedienung, die Buttons würden dort nur Platz auf
   der kleinen Kachel wegnehmen. */
.hero-nav-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:1px solid rgba(255,255,255,.8);background:rgba(23,51,34,.72);color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.9rem;line-height:1;cursor:pointer;transition:background .15s;}
.hero-nav-arrow:hover{background:rgba(23,51,34,.92);}
.hero-nav-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.hero-nav-arrow.hero-nav-prev{left:16px;}
.hero-nav-arrow.hero-nav-next{right:16px;}

@media(max-width:900px){
  .hero-copy{max-width:520px;padding:44px 26px;}
}

@media(max-width:560px){
  .hero-nav-arrow{display:none;}

  /* Hintergrundbild-Schwenk: nur hier, siehe Erklärung oben. */
  .hero-picture{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;}
  .hero-picture .hero-image{position:absolute!important;top:0!important;left:0!important;height:100%!important;width:auto!important;max-width:none!important;object-fit:unset!important;transition:transform 2.6s ease!important;touch-action:pan-y;}
  /* Höhere Spezifität als die Regel oben, damit sich "kein Übergang"
     beim Zurücksetzen bzw. während des manuellen Ziehens per Finger
     wirklich durchsetzt (eine normale Inline-Zuweisung würde am
     !important oben sonst abprallen). */
  .hero-picture .hero-image.hero-pan-reset{transition:none!important;}
  /* Sicherheitsnetz (siehe measurePan() in app.js): reicht die Breite des
     Fotos (in seinem eigenen Seitenverhältnis, auf die Höhe skaliert)
     nicht aus, um den sichtbaren Bereich randlos zu füllen, würde der
     Schwenk-Effekt oben (width:auto) eine grüne Lücke am Rand zeigen –
     dann lieber ganz normal randlos zuschneiden, ohne Schwenk. */
  .hero-picture .hero-image.hero-image-no-pan{width:100%!important;object-fit:cover!important;transition:none!important;}

  .hero-inner{min-height:420px!important;}
  .hero-copy{max-width:100%!important;padding:34px 22px!important;}

  .hero-slide-product{padding:28px 22px;}
  .hero-slide-product img{max-width:78%;max-height:52%;}
  .hero-slide-product .eyebrow{font-size:.72rem;}
  .hero-slide-product h2{font-size:1.7rem;}
  .hero-slide-product .hero-slide-short{font-size:.9rem;max-width:320px}
  .hero-slide-product .hero-slide-price{font-size:1.15rem;}
  .hero-slide-product .hero-slide-hint{font-size:.82rem;}

  .hero-slide-announcement{padding:28px 22px;}
  .hero-slide-announcement:not(.hero-slide-hero) img{max-width:100%;max-height:50%;}
  .hero-slide-announcement-content{max-width:340px;}

  .hero-slide-hero{padding:0!important;}
  .hero-slide-hero-copy{max-width:100%!important;padding:34px 22px!important;}
  .hero-slide-hero-eyebrow{font-size:.62rem!important;line-height:1.25!important;margin:0 0 8px!important;}
  .hero-slide-hero-title{font-size:clamp(2.2rem,11vw,3.2rem)!important;}
  .hero-slide-hero-tagline{font-size:1rem!important;margin:8px 0!important;}
  .hero-slide-hero-lead{font-size:.9rem!important;line-height:1.4!important;margin:0 auto 16px!important;max-width:95%!important;}
  .hero-slide-hero-button{font-size:.92rem!important;padding:11px 16px!important;}
}