/*
Theme Name: MOLEKUEL
Theme URI: https://4-pro-met.shop
Description: 4-Pro-MET Shop — Visual-Scaffold aus HALLUCINARIUM-Vorlage (Aufbau von oben nach unten). Inhalte werden vor Launch ersetzt.
Version: 0.1
Author: MOLEKÜL
*/

/* ===== BASE (aus Vorlage) ===== */
html,body{overflow-x:clip;}
body{margin:0;background:#1B0A33;font-family:'Space Grotesk',sans-serif;color:#FFF3E6;}
a{color:#B6FF3C;text-decoration:none;}
a:hover{color:#8FE010;}

/* ===== KEYFRAMES (aus Vorlage) ===== */
@keyframes hFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes hWave{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes hMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes hSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hSpinR{from{transform:rotate(360deg)}to{transform:rotate(0)}}
@keyframes hDrift{from{background-position:0 0}to{background-position:120px 0}}
@keyframes hBlink{0%,80%,100%{opacity:0}86%,94%{opacity:1}}
@keyframes hTrace{0%{transform:translateX(-70px)}50%{transform:translateX(70px)}100%{transform:translateX(-70px)}}
@keyframes hLid{0%,88%,100%{height:0}92%,96%{height:100%}}
@keyframes hStep{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes hTwinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.5)}}
@keyframes hFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-18px) rotate(5deg)}}
@keyframes hMorph{0%,100%{border-radius:46% 54% 52% 48% / 50% 46% 54% 50%}25%{border-radius:60% 40% 30% 70% / 40% 60% 70% 30%}50%{border-radius:30% 70% 60% 40% / 70% 30% 40% 60%}75%{border-radius:55% 45% 65% 35% / 35% 65% 45% 55%}}
@keyframes hHue{0%,100%{color:#FF2E9A}25%{color:#B6FF3C}50%{color:#33E0FF}75%{color:#FFB800}}

/* ===== NAV (Kopf) ===== */
.h-nav{position:sticky;top:0;z-index:50;background:#1B0A33;border-bottom:2px solid #3A2159;display:flex;align-items:center;justify-content:space-between;padding:16px 40px;}
.h-word{font-family:'Bungee';font-size:18px;color:#FFF3E6;}
.h-navlinks{display:flex;gap:26px;font-weight:700;font-size:15px;}
.h-navlinks a{color:#FFF3E6;}
.h-navlinks a:hover{color:#FF2E9A;}
.h-free{font-family:'Bungee';font-size:13px;background:#B6FF3C;color:#1B0A33;border:2px solid #1B0A33;border-radius:4px;padding:10px 18px;box-shadow:4px 4px 0 #FF2E9A;display:inline-block;}
.h-free:hover{background:#8FE010;color:#1B0A33;}
.h-free:active{box-shadow:0 0 0 #FF2E9A;transform:translate(4px,4px);}

/* ===== HERO ===== */
.h-letter{display:inline-block;font-family:'Monoton';font-weight:400;font-size:74px;animation:hWave var(--wave-dur,3.2s) ease-in-out var(--d,0s) infinite;}
.h-pupil-core{width:var(--pupil-size,24px);height:var(--pupil-size,24px);background:#1B0A33;border-radius:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:width .35s,height .35s;}

/* Cursor-Trail */
.h-trail-dot{position:fixed;border-radius:50%;pointer-events:none;z-index:99;transition:left .18s ease-out,top .18s ease-out;}

/* ===== MARQUEE ===== */
.h-marq-track{display:flex;width:max-content;animation:hMarquee var(--marquee-dur,36s) linear infinite;}

/* ===== ABOUT (2-Spalten-Grids) ===== */
.h-grid{display:grid;gap:60px;align-items:center;}
.h-grid.a{grid-template-columns:1.1fr 1fr;margin-bottom:100px;}
.h-grid.b{grid-template-columns:1fr 1.1fr;}
.h-grid.s{grid-template-columns:1fr 1.1fr;}
.h-btn-dark:hover{background:#12061F;color:#B6FF3C;}
.h-btn-dark:active{box-shadow:0 0 0 #FF2E9A;transform:translate(5px,5px);}

/* Guestbook / Shop */
.h-note{transition:transform .15s ease;}
.h-note:hover{transform:rotate(0deg) scale(1.03) !important;}
.h-card{transition:transform .12s ease,box-shadow .12s ease;}
.h-card.pink:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 #FF2E9A;}
.h-card.cyan:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 #33E0FF;}
.h-card.lime:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 #B6FF3C;}
.h-bag{cursor:pointer;transition:transform .08s,box-shadow .08s,background .12s;}
.h-bag.pink:hover{background:#E01A82;} .h-bag.cyan:hover{background:#0FC5EE;} .h-bag.lime:hover{background:#8FE010;}
.h-bag:active{box-shadow:0 0 0 #1B0A33 !important;transform:translate(4px,4px);}
.h-shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:left;}
@media (max-width:820px){ .h-shopgrid{grid-template-columns:1fr;} }

/* Accordions (How / FAQ) */
.h-acc{display:flex;flex-direction:column;gap:14px;}
.h-acc-item .h-acc-body{display:none;}
.h-acc-item.open .h-acc-body{display:block;}
.h-chev{transition:transform .2s;}
.h-acc-item.open .h-chev{transform:rotate(180deg);}

/* Chamber button */
.h-btn-pink{cursor:pointer;transition:transform .08s,box-shadow .08s,background .12s;}
.h-btn-pink:hover{background:#E01A82;}
.h-btn-pink:active{box-shadow:0 0 0 #B6FF3C !important;transform:translate(5px,5px);}

/* Warenkorb im Nav */
.h-cart{color:#FFF3E6;font-weight:700;font-size:15px;white-space:nowrap;}
.h-cart:hover{color:#FF2E9A;}
.h-cart-n{background:#FF2E9A;color:#1B0A33;border-radius:20px;padding:1px 8px;font-family:'Bungee';font-size:12px;margin-left:2px;}
/* Mobile-Burger + Menü (Desktop: aus) */
.h-burger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-direction:column;gap:5px;align-items:center;}
.h-burger span{display:block;width:26px;height:3px;background:#FFF3E6;border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
.h-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.h-burger.open span:nth-child(2){opacity:0;}
.h-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.h-mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#1B0A33;border-bottom:3px solid #FF2E9A;flex-direction:column;padding:10px 20px 20px;z-index:49;box-shadow:0 16px 26px rgba(0,0,0,.5);}
.h-mobile-menu.open{display:flex;}
.h-mobile-menu a{color:#FFF3E6;font-weight:700;font-size:17px;padding:14px 2px;border-bottom:1px dashed #3A2159;}
.h-mobile-menu a:hover{color:#FF2E9A;}
.h-mm-buy{margin-top:14px;font-family:'Bungee';font-size:14px;background:#B6FF3C;color:#1B0A33 !important;border:2px solid #1B0A33;border-radius:4px;padding:15px !important;text-align:center;box-shadow:4px 4px 0 #FF2E9A;border-bottom:2px solid #1B0A33 !important;}
.h-mm-buy:hover{color:#1B0A33 !important;background:#8FE010;}
.h-bag{display:inline-block;text-decoration:none;}

/* ===== WooCommerce-Seiten (Shop / Produkt / Warenkorb / Kasse) ===== */
.wc-page{padding:50px 0 90px;background:#1B0A33;}
.wc-wrap{background:#FFF3E6;color:#1B0A33;border:3px solid #000;border-radius:16px;box-shadow:10px 10px 0 #FF2E9A;padding:36px 32px;}
.wc-page-title{font-family:'Bungee';font-size:clamp(26px,4vw,40px);color:#1B0A33;margin:0 0 24px;}
.wc-wrap h1,.wc-wrap h2,.wc-wrap h3{font-family:'Bungee';color:#1B0A33;}
.wc-wrap a{color:#B4008C;}
.wc-wrap a:hover{color:#FF2E9A;}
.wc-wrap .price,.wc-wrap .amount,.wc-wrap .woocommerce-Price-amount{font-family:'Bungee';color:#1B0A33;}
.wc-wrap .button,.wc-wrap button,.wc-wrap [type="submit"]{font-family:'Bungee';font-size:14px;background:#B6FF3C;color:#0c0a16;border:3px solid #000;border-radius:8px;box-shadow:5px 5px 0 #000;padding:12px 22px;cursor:pointer;transition:transform .08s,box-shadow .08s;}
.wc-wrap .button:hover,.wc-wrap button:hover,.wc-wrap [type="submit"]:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #000;background:#8FE010;}
.wc-wrap .added_to_cart{margin-left:10px;}
.wc-wrap ul.products{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.wc-wrap ul.products li.product{background:#fff;border:3px solid #000;border-radius:12px;padding:18px;box-shadow:6px 6px 0 #33E0FF;text-align:center;}
.wc-wrap ul.products li.product img{border:2px solid #000;border-radius:8px;}
.wc-wrap .woocommerce-message,.wc-wrap .woocommerce-info,.wc-wrap .woocommerce-error{border-top-color:#FF2E9A;background:#FFF;color:#1B0A33;}
@media (max-width:820px){ .wc-wrap ul.products{grid-template-columns:1fr;} }

/* ===== PDP (Produktseite im Vorlagen-Design) ===== */
.pdp{background:#FFF3E6;color:#1B0A33;}
.pdp a{color:#FF2E9A;} .pdp a:hover{color:#E01A82;}
.pdp-grid{max-width:1140px;margin:0 auto;padding:30px 24px 80px;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;}
.pdp-qty{display:flex;align-items:center;border:2px solid #1B0A33;border-radius:4px;overflow:hidden;}
.pdp-qty button{font-family:'Bungee';font-size:15px;background:#FFF3E6;border:none;padding:12px 16px;cursor:pointer;color:#1B0A33;}
.pdp-qty button:hover{background:#FFE9B8;}
.pdp-q{font-family:'Bungee';font-size:15px;width:44px;text-align:center;border:none;background:#FFF3E6;color:#1B0A33;-moz-appearance:textfield;}
.pdp-q::-webkit-outer-spin-button,.pdp-q::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pdp-add{font-family:'Bungee';font-size:14px;background:#B6FF3C;color:#1B0A33;border:2px solid #1B0A33;border-radius:4px;padding:16px 20px;box-shadow:5px 5px 0 #1B0A33;cursor:pointer;transition:transform .08s,box-shadow .08s,background .12s;}
.pdp-add:hover{background:#8FE010;}
.pdp-add:active{box-shadow:0 0 0 #1B0A33;transform:translate(5px,5px);}
.pdp-tab{font-family:'Bungee';font-size:12px;background:#FFF3E6;color:#1B0A33;border:2px solid #1B0A33;border-bottom:none;border-radius:8px 8px 0 0;padding:13px 22px;cursor:pointer;}
.pdp-tab.on{background:#1B0A33;color:#B6FF3C;}
.pdp-panel{display:none;} .pdp-panel.on{display:block;}
.pdp-also{background:#FFF3E6;color:#1B0A33;border:2px solid #1B0A33;border-radius:8px;padding:14px 14px 20px;transition:transform .1s,box-shadow .1s;display:block;}
.pdp-also:hover{transform:translate(-3px,-3px);}
@media (max-width:860px){ .pdp-grid{grid-template-columns:1fr;gap:34px;} }

/* Variationen-Formular (variable Produkte) */
.pdp-varform table.variations{border:none;margin:0 0 8px;}
.pdp-varform table.variations td{padding:0 0 12px;border:none;}
.pdp-varform table.variations label{font-weight:700;font-size:14px;margin-right:12px;}
.pdp-varform select{border:2px solid #1B0A33;border-radius:6px;padding:12px 14px;font-family:'Bungee';font-size:14px;background:#FFF3E6;color:#1B0A33;min-width:240px;cursor:pointer;}
.pdp-varform .woocommerce-variation-price{margin:14px 0;}
.pdp-varform .woocommerce-variation-price .price{font-family:'Bungee';font-size:30px;color:#FF2E9A;}
.pdp-varform .woocommerce-variation-price del{color:#8A6FB8;font-size:18px;margin-right:10px;}
.pdp-varform .woocommerce-variation-price ins{text-decoration:none;}
.pdp-varform .woocommerce-variation-availability{font-weight:700;font-size:13px;color:#1B8F5A;}
.pdp-varform .quantity input.qty{width:70px;border:2px solid #1B0A33;border-radius:6px;padding:12px;font-family:'Bungee';font-size:14px;text-align:center;background:#FFF3E6;margin-right:12px;}
.pdp-varform .single_add_to_cart_button{font-family:'Bungee' !important;font-size:14px !important;background:#B6FF3C !important;color:#1B0A33 !important;border:2px solid #1B0A33 !important;border-radius:4px !important;padding:15px 26px !important;box-shadow:5px 5px 0 #1B0A33 !important;cursor:pointer;transition:transform .08s,box-shadow .08s;}
.pdp-varform .single_add_to_cart_button:hover{background:#8FE010;}
.pdp-varform .single_add_to_cart_button:active{box-shadow:0 0 0 #1B0A33;transform:translate(5px,5px);}
.pdp-varform .reset_variations{display:none !important;}
.pdp-varform .woocommerce-variation-add-to-cart{display:flex;align-items:center;margin-top:6px;}

/* ===== WooCommerce Cart / Checkout Formulare ===== */
.wc-wrap table.shop_table,.wc-wrap table.cart{width:100%;border-collapse:collapse;border:2px solid #1B0A33;border-radius:10px;overflow:hidden;background:#fff;margin-bottom:20px;}
.wc-wrap table.shop_table th{background:#1B0A33;color:#B6FF3C;font-family:'Bungee';font-size:12px;text-align:left;padding:14px 16px;}
.wc-wrap table.shop_table td{padding:14px 16px;border-top:1px solid #E4D7C4;color:#1B0A33;vertical-align:middle;}
.wc-wrap table.shop_table img{width:56px;height:auto;border:2px solid #1B0A33;border-radius:6px;}
.wc-wrap .cart_totals h2,.wc-wrap #order_review_heading{font-family:'Bungee';font-size:20px;margin:0 0 14px;}
.wc-wrap .order-total .amount,.wc-wrap .cart-subtotal .amount{font-family:'Bungee';color:#FF2E9A;}
.wc-wrap input[type=text],.wc-wrap input[type=email],.wc-wrap input[type=tel],.wc-wrap input[type=number],.wc-wrap input[type=password],.wc-wrap textarea,.wc-wrap select,.wc-wrap .select2-selection{border:2px solid #1B0A33 !important;border-radius:6px !important;padding:10px 12px !important;font-family:'Space Grotesk' !important;font-size:15px !important;background:#fff !important;color:#1B0A33 !important;min-height:44px;}
.wc-wrap label{font-weight:600;color:#1B0A33;}
.wc-wrap .woocommerce-billing-fields h3,.wc-wrap h3{font-family:'Bungee';font-size:18px;}
.wc-wrap #payment{background:#FFF;border:2px solid #1B0A33;border-radius:10px;padding:16px 18px;}
.wc-wrap #payment ul.payment_methods{list-style:none;margin:0 0 10px;padding:0;border-bottom:2px dashed #E4D7C4;}
.wc-wrap #payment label{font-weight:700;}
.wc-wrap .molekuel-consent{background:#FFF3E6;border:2px dashed #FF2E9A;border-radius:8px;padding:14px 16px;margin:12px 0;font-size:14px;display:flex;gap:10px;align-items:flex-start;}
.wc-wrap .molekuel-consent input{margin-top:3px;width:18px;height:18px;}
.wc-wrap .quantity input.qty{width:64px;text-align:center;}
.wc-wrap .coupon input{max-width:200px;}
.wc-wrap .woocommerce-message,.wc-wrap .woocommerce-info{border-top:3px solid #B6FF3C;}
.wc-wrap .woocommerce-error{border-top:3px solid #FF2E9A;}
.wc-wrap a.remove{color:#FF2E9A !important;border:2px solid #1B0A33;background:#fff !important;}
.wc-wrap .checkout-button,.wc-wrap #place_order{width:100%;font-size:16px !important;padding:16px !important;}
.wc-wrap .button.alt,.wc-wrap a.checkout-button,.wc-wrap #place_order{background:#B6FF3C !important;color:#1B0A33 !important;border:3px solid #000 !important;box-shadow:5px 5px 0 #000 !important;}
.wc-wrap .button.alt:hover,.wc-wrap a.checkout-button:hover,.wc-wrap #place_order:hover{background:#8FE010 !important;transform:translate(2px,2px);box-shadow:3px 3px 0 #000 !important;}
@media (max-width:600px){ .wc-wrap{padding:22px 16px;} .wc-wrap table.shop_table td,.wc-wrap table.shop_table th{padding:10px 8px;font-size:13px;} }

/* ===== Wissens-Artikel (single.php Typografie) ===== */
.art-body{font-size:16px;line-height:1.75;color:#3A2C55;}
.art-body p{margin:0 0 18px;}
.art-body h2{font-family:'Bungee';font-size:24px;line-height:1.2;color:#1B0A33;margin:38px 0 16px;padding-bottom:8px;border-bottom:3px solid #FF2E9A;}
.art-body h3{font-family:'Bungee';font-size:17px;color:#1B0A33;margin:28px 0 12px;}
.art-body a{color:#B4008C;font-weight:700;text-decoration:underline;text-decoration-color:#FFB6DE;}
.art-body a:hover{color:#FF2E9A;}
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:24px;}
.art-body li{margin-bottom:8px;}
.art-body table{width:100%;border-collapse:collapse;border:2px solid #1B0A33;border-radius:8px;overflow:hidden;margin:0 0 22px;font-size:14px;}
.art-body th{background:#1B0A33;color:#B6FF3C;font-family:'Bungee';font-size:11px;text-align:left;padding:11px 14px;}
.art-body td{padding:11px 14px;border-top:1px solid #E8DCC8;vertical-align:top;}
.art-body tr:nth-child(even) td{background:#FAF4EC;}
.art-body blockquote{margin:0 0 18px;padding:14px 20px;background:#FFF3E6;border-left:4px solid #33E0FF;border-radius:6px;font-size:15px;color:#5A4A78;}
.art-body code{font-family:'JetBrains Mono',monospace;font-size:13px;background:#FFF3E6;border:1px solid #E8DCC8;border-radius:4px;padding:1px 6px;}
.art-body .infokasten{background:#EDE3FF;border:2px solid #1B0A33;border-radius:8px;padding:16px 20px;margin:0 0 22px;font-size:14px;}
@media (max-width:900px){ .art-grid{grid-template-columns:1fr !important;} .wissen-grid{grid-template-columns:1fr !important;} aside{position:static !important;} }
.h-prep{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 4px;border-bottom:2px solid #3A2159;color:#FFF3E6;font-weight:700;font-size:17px;}
.h-prep:hover{color:#B6FF3C;}

@media (max-width:820px){
  .h-navlinks{display:none;}
  .h-burger{display:inline-flex;}
  .h-free{display:none;}   /* KAUFEN-Button im Balken aus — liegt im Mobil-Menü */
  .h-nav{padding:14px 20px;}
  .h-letter{font-size:44px;}
  .h-grid{grid-template-columns:1fr !important;gap:40px;margin-bottom:60px;}
  .h-hero-decor{display:none;}   /* dekorative Kreise/Blume raus, damit sie Text nicht überlappen */
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
}