/* ==========================================================
   Craft2Click – Header + Footer + Shop Hover + Preloader
   ========================================================== */

/* ========= GLOBAL ========= */
html, body {
  background: #f9f9e6 !important;
  margin: 0;
  padding: 0;
}

#page, .site, #content, .site-content {
  background: transparent !important;
}

/* Theme-Footer ausblenden (Softme/Softica) */
#dt_footer{
  display: none !important;
}

/* ========= HEADER (fixed + scroll effect) ========= */
.c2c-header{
  position: fixed;              /* bleibt beim Scrollen oben */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  background: rgba(249, 249, 230, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: background 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
}

body.admin-bar .c2c-header { top: 32px; }
@media (max-width: 782px){
  body.admin-bar .c2c-header { top: 46px; }
}

/* beim Scrollen */
.c2c-header.c2c-scrolled{
  background: rgba(249, 249, 230, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Abstand für Content (wird per JS dynamisch gesetzt) */
body{
  padding-top: var(--c2c-header-offset, 0px);
}

.c2c-header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px 14px;
  text-align: center;
}

/* Logo */
.c2c-logo img{
  display: block;
  margin: 0 auto 10px;
  max-height: 110px;
  width: auto;
}

/* Nav + Icons */
.c2c-navgroup{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.c2c-menu{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c2c-menu li{ margin: 0; }

.c2c-menu a{
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: #222;
  text-decoration: none;
  position: relative;
  padding-bottom: 6px;
}

.c2c-menu a:hover,
.c2c-menu .current-menu-item > a{
  color: #ff9800;
}

.c2c-menu .current-menu-item > a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3px;
  background:#ff9800;
}

/* Icons */
.c2c-icons{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.c2c-icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #222;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  position: relative;
}

.c2c-icon:hover{
  background: #ff9800;
  color: #fff;
}

/* Warenkorb Badge */
.c2c-cart-count{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff9800;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* Mobile */
@media (max-width: 768px){
  .c2c-header-inner{
    padding: 14px 16px 10px;
  }
  .c2c-logo img{
    max-height: 95px;
  }
  .c2c-navgroup{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .c2c-menu{
    flex-wrap: wrap;
    gap: 18px;
  }
}

/* ========= FOOTER ========= */
.c2c-site-footer{
  background: #f9f9e6;
  padding: 70px 20px 50px;
  position: relative;
  border-top: 6px solid #ff9800;
}

.c2c-footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.c2c-footer-links{
  list-style: none;
  padding: 0;
  margin: 0 0 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
}

.c2c-footer-links a{
  color: #222;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  padding-bottom: 6px;
  position: relative;
}

.c2c-footer-links a:hover{
  color: #ff9800;
}

.c2c-footer-note{
  margin: 0 0 18px;
  color: #222;
  font-size: 14px;
}

.c2c-footer-copy{
  margin: 0 0 10px;
  color: #222;
  font-weight: 700;
}

.c2c-footer-address{
  margin: 0 0 36px;
  color: #222;
}

.c2c-footer-odr{
  background: rgba(255,152,0,0.12);
  border-radius: 10px;
  padding: 18px 18px;
  color: #222;
  font-size: 14px;
  max-width: 980px;
  margin: 0 auto;
}

.c2c-footer-odr a{
  color: #222;
  text-decoration: underline;
}
.c2c-footer-odr a:hover{
  color: #ff9800;
}

@media (max-width: 768px){
  .c2c-site-footer{ padding: 50px 16px 40px; }
  .c2c-footer-links{ gap: 16px; }
  .c2c-footer-links a{ font-size: 13px; }
}

/* ==========================================================
   PRELOADER (Loading Screen)
   ========================================================== */
#c2c-preloader{
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .35s ease, visibility .35s ease;
}

#c2c-preloader.c2c-hide{
  opacity: 0;
  visibility: hidden;
}

.c2c-preloader-inner{
  text-align: center;
  padding: 20px;
}

.c2c-preloader-spinner{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid rgba(0,0,0,.10);
  border-top-color: rgba(30,30,30,.8);
  margin: 0 auto 34px;
  animation: c2cSpin 1s linear infinite;
}

@keyframes c2cSpin{
  to { transform: rotate(360deg); }
}

.c2c-preloader-brand{
  font-size: 56px;
  font-weight: 800;
  margin: 0;
  line-height: 1.05;
  color: #2a2a2a;
}

.c2c-preloader-brand span{
  color: #ff9800;
}

.c2c-preloader-sub{
  margin-top: 12px;
  letter-spacing: 6px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,.55);
}

#c2c-preloader-close{
  position: absolute;
  top: 22px;
  right: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #ff9800;
  color: #fff;
  font-size: 28px;
  line-height: 52px;
  cursor: pointer;
}

#c2c-preloader-close:hover{
  filter: brightness(0.95);
}

/* ==========================================================
   SHOP – Kategorien Hover (Titel+Count nur bei Hover)
   ========================================================== */



@media (max-width: 992px){
  .woocommerce ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 576px){
  .woocommerce ul.products{
    grid-template-columns: 1fr !important;
  }
}

/* Kategorie-Kachel */
.woocommerce ul.products li.product-category{
  list-style: none !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product-category a{
  display: block !important;
  position: relative !important;
}

.woocommerce ul.products li.product-category a img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 14px !important;
}

/* Titel+Count Overlay: standardmäßig unsichtbar */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  background: rgba(255,255,255,0.78) !important;
  border: 2px solid rgba(255,255,255,0.9) !important;
  padding: 18px 22px !important;
  border-radius: 8px !important;

  margin: 0 !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: #222 !important;

  opacity: 0 !important;
  transition: opacity .25s ease !important;
}

/* Count gelb */
.woocommerce ul.products li.product-category .woocommerce-loop-category__title .count{
  background: #ffeb3b !important;
  color: #000 !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  font-weight: 900 !important;
  margin-left: 6px !important;
}

/* Hover zeigt Titel */
.woocommerce ul.products li.product-category:hover .woocommerce-loop-category__title{
  opacity: 1 !important;
}

/* ==========================================================
   SHOP – Produkte: Button nur bei Hover (Titel/Preis bleiben normal)
   ========================================================== */

.woocommerce ul.products li.product{
  list-style: none !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 14px 38px rgba(0,0,0,0.08) !important;
  padding: 18px !important;
  margin: 0 !important;
  position: relative !important;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display: block !important;
}

.woocommerce ul.products li.product a img{
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  margin: 0 0 14px 0 !important;
}

/* Add to cart: erst bei Hover sichtbar */
.woocommerce ul.products li.product .button{
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity .2s ease, transform .2s ease !important;
  margin-top: 12px !important;
}

.woocommerce ul.products li.product:hover .button{
  opacity: 1 !important;
  transform: translateY(0) !important;
}











/* =====================================
   INTERAKTIVER HERO (NEU)
===================================== */

.c2c-hero{
  position: relative;
  width: 100%;
  min-height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  color:#fff;
}

.c2c-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.05);
  transition:transform .4s ease;
  z-index:0;
}

.c2c-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(0,0,0,.65),
    rgba(0,0,0,.45)
  );
  z-index:1;
}

/* Mouse Light Effekt */
.c2c-hero-light {
  position: absolute;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle,
              rgba(255,255,255,0.55) 0%,
              rgba(255,255,255,0.25) 35%,
              rgba(255,255,255,0.08) 60%,
              rgba(255,255,255,0) 75%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.c2c-hero-content{
  position:relative;
  z-index:3;
  max-width:1200px;
  padding:120px 20px 100px;
}

.c2c-hero h1{
  font-size:64px;
  font-weight:800;
  margin:0;
}

@media (max-width:768px){
  .c2c-hero{
    min-height:300px;
  }
  .c2c-hero h1{
    font-size:38px;
  }
}

/* ================= SHAPES ================= */

.c2c-shape{
  position:absolute;
  width:120px;
  opacity:.9;
  z-index:2;
  animation:float 6s ease-in-out infinite;
}

.c2c-shape-left{
  left:40px;
  top:40%;
}

.c2c-shape-right{
  right:60px;
  top:30%;
}

@keyframes float{
  0%{ transform:translateY(0px);}
  50%{ transform:translateY(-15px);}
  100%{ transform:translateY(0px);}
}













/* ===============================
   HERO FIX – Hintergrund aktivieren
================================= */

.c2c-pagetitle {
  position: relative;
  width: 100%;
  min-height: 420px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background-image: var(--c2c-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;
}

.c2c-pagetitle__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.45)
  );
  z-index: 1;
}

.c2c-pagetitle__inner {
  position: relative;
  z-index: 2;
  padding: 120px 20px 100px;
  max-width: 1200px;
  width: 100%;
}

.c2c-pagetitle__title {
  margin: 0;
  font-size: 64px;
  font-weight: 800;
  color: #fff;
}








/* ===============================
   INTERACTIVE HERO
================================= */

.c2c-hero-interactive {
  position: relative;
  overflow: hidden;
}

/* Spotlight */
.c2c-hero-light {
  position: absolute;
  width: 500px;
  height: 500px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.15) 30%,
    rgba(255,255,255,0.05) 50%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: opacity .2s ease;
}

/* Shapes */
.c2c-hero-shape {
  position: absolute;
  width: 180px;
  opacity: 0.12;
  z-index: 2;
  transition: transform .2s ease;
  pointer-events: none;
}

.c2c-hero-left {
  left: 5%;
  top: 20%;
}

.c2c-hero-right {
  right: 5%;
  bottom: 20%;
}

/* Overlay bleibt unter Shapes */
.c2c-pagetitle__overlay {
  z-index: 1;
}





/* ==========================================================
   Craft2Click – FINAL CLEAN VERSION
   ========================================================== */

/* ========= GLOBAL ========= */

html, body{
  background:#f9f9e6;
  margin:0;
  padding:0;
}

#dt_footer{
  display:none !important;
}

/* ==========================================================
   HEADER
   ========================================================== */

.c2c-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
  background:rgba(249,249,230,.95);
  backdrop-filter:blur(8px);
}

body{
  padding-top:var(--c2c-header-offset,0px);
}

.c2c-header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:18px 20px 14px;
  text-align:center;
}

.c2c-logo img{
  max-height:110px;
  margin-bottom:10px;
}

.c2c-menu{
  display:flex;
  justify-content:center;
  gap:36px;
  list-style:none;
  margin:0;
  padding:0;
}

.c2c-menu a{
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  color:#000;
  text-decoration:none;
  transition:.2s ease;
}

.c2c-menu a:hover,
.c2c-menu .current-menu-item > a{
  color:#ff9800;
}

/* ==========================================================
   FOOTER
   ========================================================== */

.c2c-site-footer{
  background:#f9f9e6;
  padding:70px 20px 50px;
  border-top:6px solid #ff9800;
  text-align:center;
}

.c2c-footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:36px;
  list-style:none;
  padding:0;
  margin:0 0 34px;
}

.c2c-footer-links a{
  color:#000;
  font-weight:700;
  text-transform:uppercase;
  font-size:14px;
  text-decoration:none;
  transition:.2s ease;
}

.c2c-footer-links a:hover{
  color:#ff9800;
}

/* ==========================================================
   SHOP GRID (EIN LAYOUT – FLEX)
   ========================================================== */

.woocommerce ul.products{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:40px !important;
  margin:0 !important;
  padding:0 !important;
}

/* PRODUKTKARTEN */

.woocommerce ul.products li.product{
  flex:0 1 380px !important;
  max-width:380px !important;
  background:#fff !important;
  border-radius:18px !important;
  padding:30px 25px !important;
  box-shadow:0 15px 40px rgba(0,0,0,.08) !important;
  text-align:center !important;
  transition:.25s ease;
}

.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(0,0,0,.15) !important;
}

/* Produktbild */

.woocommerce ul.products li.product img{
  width:100% !important;
  border-radius:12px !important;
  margin-bottom:18px !important;
}

/* Titel */

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:20px !important;
  margin-top:10px !important;
  color:#000 !important;
}

/* Preis */

.woocommerce ul.products li.product .price{
  font-size:18px !important;
  font-weight:700 !important;
  color:#ff9800 !important;
  margin:12px 0 18px !important;
}

/* Add to Cart – Orange */

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button{
  background:#ff9800 !important;
  color:#fff !important;
  border:none !important;
  font-weight:700 !important;
  border-radius:10px !important;
  padding:14px 0 !important;
  width:100% !important;
  text-align:center !important;
  transition:.2s ease;
}

.woocommerce ul.products li.product .button:hover{
  background:#e67600 !important;
}

/* ==========================================================
   KATEGORIEN – HOVER UNTER BILD
   ========================================================== */

.woocommerce ul.products li.product-category{
  text-align:center !important;
}

.woocommerce ul.products li.product-category a{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}

.woocommerce ul.products li.product-category img{
  margin-bottom:18px !important;
  border-radius:14px !important;
}

/* Titel unter Bild – versteckt */

.woocommerce ul.products li.product-category 
.woocommerce-loop-category__title{
  opacity:0 !important;
  transform:translateY(15px);
  transition:opacity .25s ease, transform .25s ease;
  font-size:20px !important;
  font-weight:800 !important;
  color:#000 !important;
  margin-top:10px !important;
}

/* Hover zeigt Titel */

.woocommerce ul.products li.product-category:hover 
.woocommerce-loop-category__title{
  opacity:1 !important;
  transform:translateY(0);
}

/* Count ORANGE */

.woocommerce ul.products li.product-category .count{
  background:#ff9800 !important;
  color:#fff !important;
  padding:4px 8px !important;
  border-radius:4px !important;
  font-weight:700 !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:992px){
  .woocommerce ul.products li.product{
    flex:0 1 calc(50% - 20px) !important;
    max-width:calc(50% - 20px) !important;
  }
}

@media (max-width:576px){
  .woocommerce ul.products li.product{
    flex:0 1 100% !important;
    max-width:100% !important;
  }
}

/* ==========================================================
   HERO BREADCRUMB
   ========================================================== */

.c2c-pagetitle .c2c-breadcrumb{
  font-size:22px !important;
  font-weight:700 !important;
  color:#fff !important;
}

.c2c-pagetitle .c2c-breadcrumb a{
  color:#ff9800 !important;
  text-decoration:none !important;
}

.c2c-pagetitle .c2c-breadcrumb a:hover{
  color:#e67600 !important;
}

.c2c-pagetitle .c2c-breadcrumb__sep{
  margin:0 12px !important;
  color:#fff !important;
  opacity:.8;
}


/* =========================================
   CART – GRÖSSER & ORANGE
========================================= */

/* Produktnamen */
.woocommerce-cart .product-name a{
    color:#ff9800 !important;
    font-size:20px !important;
    font-weight:700 !important;
}

/* Links allgemein */
.woocommerce-cart a{
    color:#ff9800 !important;
    font-size:18px !important;
}

/* Preise größer */
.woocommerce-cart .amount{
    font-size:20px !important;
    font-weight:700 !important;
}

/* Warenkorb-Summe Bereich */
.woocommerce-cart .cart_totals{
    font-size:20px !important;
}

/* Gesamtsumme fett & größer */
.woocommerce-cart .order-total .amount{
    font-size:26px !important;
    font-weight:800 !important;
    color:#000 !important;
}

/* VAT / Steuer */
.woocommerce-cart .tax-rate{
    font-size:18px !important;
}

/* Weiter zur Kasse Button */
.woocommerce-cart .checkout-button{
    background:#ff9800 !important;
    font-size:20px !important;
    padding:16px !important;
    
}









/* =========================================
   KATEGORIE ABSOLUTE RESET (ERZWUNGEN)
========================================= */

.woocommerce ul.products li.product-category 
.woocommerce-loop-category__title{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    background:none !important;
    border:none !important;

    opacity:0 !important;
    margin-top:15px !important;
    font-size:20px !important;
    font-weight:800 !important;
    color:#000 !important;
}

/* Hover zeigt Titel */
.woocommerce ul.products li.product-category:hover 
.woocommerce-loop-category__title{
    opacity:1 !important;
}

/* Count ORANGE */
.woocommerce ul.products li.product-category .count{
    background:#ff9800 !important;
    color:#fff !important;
    padding:4px 8px !important;
    border-radius:4px !important;
}













/* =========================================
   MEIN KONTO – ALLES ORANGE
========================================= */

/* Alle Links im Konto-Bereich */
.woocommerce-account a {
    color: #ff9800 !important;
}

/* Hover */
.woocommerce-account a:hover {
    color: #e67600 !important;
}

/* Aktiver Menüpunkt links */
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
    color: #ff9800 !important;
    font-weight: 700 !important;
}

/* Link-Liste links */
.woocommerce-account .woocommerce-MyAccount-navigation a {
    color: #ff9800 !important;
}

/* Buttons */
.woocommerce-account .button,
.woocommerce-account button,
.woocommerce-account input[type="submit"] {
    background: #ff9800 !important;
    color: #fff !important;
    border: none !important;
}

.woocommerce-account .button:hover {
    background: #e67600 !important;
}

/* Abmelden-Link extra */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #ff9800 !important;
}



/* =========================================
   MEIN KONTO – NAV LINKS LINKS
========================================= */

/* Standard schwarz */
.woocommerce-account .woocommerce-MyAccount-navigation a {
    color: #000000 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* Hover orange */
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    color: #ff9800 !important;
}

/* Aktiver Menüpunkt */
.woocommerce-account 
.woocommerce-MyAccount-navigation-link.is-active a {
    color: #ff9800 !important;
    font-weight: 700 !important;
}


/* =========================================
   HEADER FIX
========================================= */

.c2c-header a,
.c2c-menu a{
    color:#000000 !important;
}

.c2c-header a:hover,
.c2c-menu a:hover{
    color:#ff9800 !important;
}





/* =========================================
   FOOTER FIX
========================================= */

.c2c-site-footer a,
.c2c-footer-links a{
    color:#000000 !important;
}

.c2c-site-footer a:hover,
.c2c-footer-links a:hover{
    color:#ff9800 !important;
}






.single-product div.product{
  display: grid !important;
  grid-template-columns: minmax(320px, 520px) 1fr !important;
  grid-template-areas:
    "gallery summary"
    "gallery tabs"
    "related related" !important;
}



body{ padding-top: 0 !important; }




.woocommerce ul.products{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:40px !important;
  margin:40px auto !important;
  padding:0 !important;
}

.woocommerce ul.products li.product{
  float:none !important;
  clear:none !important;
}




/* Header überlappt Hero nicht mehr */
body{
  padding-top: var(--c2c-header-offset, 190px) !important; /* Fallback 190px */
}

/* Falls dein Hero/Seitentitel eine eigene Klasse hat */
.c2c-pagetitle,
.c2c-hero{
  margin-top: 0 !important;
}

/* Optional: damit der Inhalt im Hero nicht unter den Header rutscht */
.c2c-pagetitle__inner,
.c2c-hero-content{
  padding-top: calc(120px + var(--c2c-header-offset, 190px)) !important;
}


body{ padding-top: var(--c2c-header-offset, 190px) !important; }




/* HERO: Inhalt immer exakt mittig */
.c2c-pagetitle{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.c2c-pagetitle__inner{
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Breadcrumb + Titel wirklich zentrieren */
.c2c-breadcrumb,
.woocommerce-breadcrumb{
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: center !important;
}

.c2c-pagetitle__title{
  width: 100% !important;
  text-align: center !important;
}




/* Hero/Banner kleiner machen */
.c2c-pagetitle,
.c2c-hero{
  min-height: 320px !important; /* vorher war bei dir 420px */
}

/* Innenabstand reduzieren (damit Text nicht so weit unten sitzt) */
.c2c-pagetitle__inner,
.c2c-hero-content{
  padding: 80px 20px 70px !important;
}

/* Mobile noch kleiner */
@media (max-width: 768px){
  .c2c-pagetitle,
  .c2c-hero{
    min-height: 240px !important;
  }
  .c2c-pagetitle__inner,
  .c2c-hero-content{
    padding: 60px 16px 55px !important;
  }
}


















/* ===== Global Background (Beige) ===== */
:root{
  --c2c-beige: #F9F9E6;
}

html, body{
  background-color: var(--c2c-beige) !important;
}

/* WordPress/Theme Wrapper ebenfalls beige, damit nichts „grau/weiß“ durchkommt */
#page,
.site,
#content,
.site-content,
#primary,
.site-main,
.woocommerce,
.woocommerce-page,
.elementor,
.elementor-page,
.elementor-section,
.elementor-container,
.elementor-widget-wrap{
  background-color: transparent !important;
}

/* Falls irgendein Wrapper eine eigene Hintergrundfarbe setzt */
body *{
  background-color: inherit;
}

/* Aber: Bilder/Buttons etc. NICHT überschreiben */
img, svg, video, canvas,
button, input, textarea, select,
a, .button, .wp-block-button__link{
  background-color: initial;
}


















/* Produktseite: Kategorie/Tag Links orange */
.single-product .product_meta a{
  color: #ff9800 !important;
  font-weight: 700;
  text-decoration: none;
}

.single-product .product_meta a:hover{
  color: #e67600 !important;
  text-decoration: underline;
}

/* optional: auch die Labels "Kategorie:" "Schlagwort:" */
.single-product .product_meta{
  color: #222;
}










/* WooCommerce Breadcrumb im Hero: groß + Farben wie bei c2c */
.c2c-pagetitle nav.woocommerce-breadcrumb{
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;

  margin: 0 0 10px !important;

  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-align: center !important;
}

.c2c-pagetitle nav.woocommerce-breadcrumb a{
  color: #ff9800 !important;
  text-decoration: none !important;
}

.c2c-pagetitle nav.woocommerce-breadcrumb a:hover{
  color: #e67600 !important;
  text-decoration: underline !important;
}

/* Slash/Delimiter (Woo gibt oft als Text aus, daher nur Farbe global) */
.c2c-pagetitle nav.woocommerce-breadcrumb{
  opacity: 1 !important;
}


































/* ==========================================================
   C2C Add-On: Cart / Checkout / Account sauber (ohne Re-Design)
   ========================================================== */

/* Allgemeine Box-Optik für Woo-Seiten */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce,
.woocommerce-order .woocommerce{
  max-width: var(--c2c-container, 1200px) !important;
  margin: 0 auto !important;
}

/* Warenkorb: Tabelle + Totals als Card */
.woocommerce-cart form.woocommerce-cart-form,
.woocommerce-cart .cart_totals{
  background: var(--c2c-surface, #fff) !important;
  border: 1px solid var(--c2c-border, rgba(0,0,0,.10)) !important;
  border-radius: var(--c2c-radius, 18px) !important;
  box-shadow: var(--c2c-shadow, 0 14px 40px rgba(0,0,0,.08)) !important;
  padding: 22px !important;
}

.woocommerce-cart .cart_totals{
  margin-top: 18px !important;
}

.woocommerce-cart table.shop_table{
  border: 0 !important;
  background: transparent !important;
}

.woocommerce-cart table.shop_table th{
  background: rgba(0,0,0,.04) !important;
  font-weight: 900 !important;
}

/* Warenkorb Buttons/Links konsistent */
.woocommerce-cart .product-name a{
  color: var(--c2c-accent, #ff9800) !important;
  font-weight: 900 !important;
}
.woocommerce-cart .product-name a:hover{
  color: var(--c2c-accent-dark, #e67600) !important;
}

/* Kasse: linke Spalte + Bestellübersicht als Cards */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .woocommerce-checkout-review-order{
  background: var(--c2c-surface, #fff) !important;
  border: 1px solid var(--c2c-border, rgba(0,0,0,.10)) !important;
  border-radius: var(--c2c-radius, 18px) !important;
  box-shadow: var(--c2c-shadow, 0 14px 40px rgba(0,0,0,.08)) !important;
  padding: 22px !important;
}

/* Zahlungsbox */
.woocommerce-checkout #payment{
  background: rgba(0,0,0,.02) !important;
  border: 1px solid var(--c2c-border, rgba(0,0,0,.10)) !important;
  border-radius: 14px !important;
  padding: 16px !important;
}

/* Bestellbestätigung: alles sauber eingerahmt */
.woocommerce-order{
  background: var(--c2c-surface, #fff) !important;
  border: 1px solid var(--c2c-border, rgba(0,0,0,.10)) !important;
  border-radius: var(--c2c-radius, 18px) !important;
  box-shadow: var(--c2c-shadow, 0 14px 40px rgba(0,0,0,.08)) !important;
  padding: 22px !important;
}

/* Mein Konto: Navigation + Content als Cards */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  background: var(--c2c-surface, #fff) !important;
  border: 1px solid var(--c2c-border, rgba(0,0,0,.10)) !important;
  border-radius: var(--c2c-radius, 18px) !important;
  box-shadow: var(--c2c-shadow, 0 14px 40px rgba(0,0,0,.08)) !important;
  padding: 18px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation a{
  color: #222 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a{
  color: var(--c2c-accent, #ff9800) !important;
}











































/* ==========================================================
   Craft2Click – KEEP ONLY THE GOOD PARTS (aus deinem DROP-IN)
   - Buttons (orange + Shadow)
   - Cards/Boxen (Beschreibung, Kasse, Bestätigung)
   - Forms (Input/Select/Textarea)
   - Tables (Cart/Checkout)
   - dezente Basis (Beige Hintergrund + Links)
   KEIN: Container-Padding, KEIN: Woo Grid, KEIN: global Image-Radius
   ========================================================== */

:root{
  --c2c-bg: #F9F9E6;
  --c2c-surface: #ffffff;
  --c2c-text: #1f1f1f;
  --c2c-muted: rgba(0,0,0,.62);
  --c2c-border: rgba(0,0,0,.10);
  --c2c-accent: #ff9800;
  --c2c-accent-dark: #e67600;
  --c2c-radius: 18px;
  --c2c-shadow: 0 14px 40px rgba(0,0,0,.08);
}

/* Hintergrund + Grundtext (leicht, nicht layout-zerstörend) */
html, body{
  background: var(--c2c-bg) !important;
  color: var(--c2c-text) !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
}

/* Links orange */
a{ color: var(--c2c-accent); text-decoration: none; }
a:hover{ color: var(--c2c-accent-dark); text-decoration: underline; }

/* Buttons (das ist genau der “clean” Effekt auf deinen Bildern) */
button, .button, .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button{
  background: var(--c2c-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
  box-shadow: 0 14px 34px rgba(255,152,0,.22) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration: none !important;
}
button:hover, .button:hover, .wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover{
  background: var(--c2c-accent-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(255,152,0,.30) !important;
}

/* Cards/Boxen (Beschreibung-Box und “Bestellung aufgeben” Bereiche wirken so) */
.c2c-card,
.woocommerce-cart .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-order,
.single-product .woocommerce-tabs .panel,
.single-product .woocommerce-Tabs-panel{
  background: var(--c2c-surface) !important;
  border: 1px solid var(--c2c-border) !important;
  border-radius: var(--c2c-radius) !important;
  box-shadow: var(--c2c-shadow) !important;
  padding: 22px !important;
}

/* Tabs-Texte etwas kräftiger (Produktbeschreibung) */
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-weight: 900 !important;
}

/* Forms (macht Checkout/Account clean) */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
textarea, select,
.woocommerce input.input-text, .woocommerce textarea{
  width: 100% !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  border-radius: 12px !important;
  padding: 12px 12px !important;
  outline: none !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, textarea:focus, select:focus,
.woocommerce input.input-text:focus, .woocommerce textarea:focus{
  border-color: rgba(255,152,0,.65) !important;
  box-shadow: 0 0 0 4px rgba(255,152,0,.18) !important;
}

/* Tables (Cart/Checkout/Bestätigung sauber) */
.woocommerce table.shop_table{
  border: 1px solid var(--c2c-border) !important;
  border-radius: var(--c2c-radius) !important;
  overflow: hidden !important;
  background: var(--c2c-surface) !important;
}
.woocommerce table.shop_table th{
  background: rgba(0,0,0,.04) !important;
  font-weight: 900 !important;
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  border-radius: 14px !important;
  border: 1px solid var(--c2c-border) !important;
}

/* FIX: “WARENKORB-SUMME” nicht riesig */
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cart_totals_title,
.woocommerce-cart .wc-block-cart__totals-title,
.woocommerce-cart .wc-block-components-totals-wrapper h2,
.woocommerce-cart .cart-collaterals h2{
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  text-transform: none !important;
  margin: 0 0 12px !important;
}




.c2c-price-suffix{
  font-size: 0.85em;
  opacity: .75;
  font-weight: 600;
  margin-left: 6px;
  white-space: nowrap;
}










































/* ===============================
   C2C – Professional Layout Core
   (nur für Content-Seiten, nicht Shop)
================================= */

:root{
  --c2c-bg: #F9F9E6;
  --c2c-text: #1f1f1f;
  --c2c-muted: rgba(0,0,0,.65);
  --c2c-border: rgba(0,0,0,.10);
  --c2c-accent: #ff9800;
  --c2c-radius: 18px;
  --c2c-shadow: 0 14px 40px rgba(0,0,0,.08);
  --c2c-container: 1100px; /* etwas schmaler = professioneller */
}

/* Hintergrund überall konsistent */
html, body{
  background: var(--c2c-bg) !important;
  color: var(--c2c-text);
}

/* Content-Breite vereinheitlichen */
.page .site-main,
.single .site-main,
.page main#primary,
.single main#primary{
  max-width: var(--c2c-container) !important;
  margin: 0 auto !important;
  padding: 40px 20px 80px !important;
}

/* Standard-Section Spacing (Elementor + WP Blocks) */
.page .elementor-section,
.page .wp-block-group,
.page .entry-content > *{
  margin-left: auto;
  margin-right: auto;
}

.page .elementor-section{
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

/* Weniger „endlose“ Leerflächen */
.page .elementor-spacer{
  max-height: 32px !important;
}


















/* ===============================
   C2C – Media / Cards
================================= */
.page img{
  border-radius: 14px;
}

/* Elementor Bilder wirken oft „frei schwebend“ -> Card-Frame */
.page .elementor-widget-image img{
  border: 1px solid var(--c2c-border);
  box-shadow: var(--c2c-shadow);
}

























/* ===== Responsive ===== */
@media (max-width: 992px){
  .c2c-service-tabs{
    flex-wrap: wrap !important;
  }
  .c2c-service-tabs .c2c-service-tab{
    flex: 1 1 calc(50% - 18px) !important;  /* 2 pro Reihe */
    max-width: none !important;
  }
}

@media (max-width: 576px){
  .c2c-service-tabs .c2c-service-tab{
    flex: 1 1 100% !important;              /* 1 pro Reihe */
  }
}



















































/* ==========================================================
   C2C – Single Product (Produktseite) Layout + Styling FIX
   ========================================================== */

/* 1) Preis überall sauber orange (inkl. "exkl. USt.") */
.single-product .summary .price,
.single-product .summary .woocommerce-Price-amount,
.single-product .summary .price *{
  color:#ff9800 !important;
  font-weight:900 !important;
}

.single-product .summary .price .woocommerce-price-suffix{
  color:#ff9800 !important;
  font-weight:800 !important;
  font-size: .95em !important;
  opacity: .9;
}

/* 2) Größere Bilder/Gallery links */
.single-product div.product{
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px 20px 60px;
}

/* Woo Standard: Gallery links, Summary rechts */
@media (min-width: 992px){
  .single-product div.product{
    display:grid !important;
    grid-template-columns: minmax(420px, 560px) 1fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
}

/* Gallery größer + weniger "klein gequetscht" */
.single-product .woocommerce-product-gallery{
  width: 100% !important;
}
.single-product .woocommerce-product-gallery__wrapper{
  border-radius: 18px !important;
  overflow: hidden !important;
}
.single-product .woocommerce-product-gallery img{
  width: 100% !important;
  height: auto !important;
  border-radius: 18px !important;
}

/* Thumbnails angenehmer */
.single-product .flex-control-thumbs{
  margin-top: 12px !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
.single-product .flex-control-thumbs img{
  border-radius: 12px !important;
  opacity: .95 !important;
}
.single-product .flex-control-thumbs img:hover{
  opacity: 1 !important;
}

/* 3) Summary/Card rechts professioneller */
.single-product .summary{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 18px !important;
  padding: 22px 22px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.08) !important;
}

.single-product .product_title{
  font-weight: 900 !important;
  line-height: 1.08 !important;
}

/* Button + Menge sauber */
.single-product form.cart{
  margin-top: 14px !important;
}
.single-product .quantity input.qty{
  border-radius: 12px !important;
  padding: 10px 12px !important;
}

/* Meta Links (Kategorie/Schlagwort) orange */
.single-product .product_meta a{
  color:#ff9800 !important;
  font-weight:900 !important;
}
.single-product .product_meta a:hover{
  color:#e67600 !important;
}

/* 4) Beschreibung rechts + "Ähnliche Produkte" darunter nebeneinander
      -> Tabs/Panel volle Breite unter Gallery+Summary */
@media (min-width: 992px){
  .single-product .woocommerce-tabs{
    grid-column: 1 / -1 !important;
    margin-top: 10px !important;
  }
  .single-product .related,
  .single-product .up-sells{
    grid-column: 1 / -1 !important;
    margin-top: 22px !important;
  }
}

/* Tabs optisch wie Box */
.single-product .woocommerce-tabs .panel{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.08) !important;
}

/* Tab-Leiste sauberer */
.single-product .woocommerce-tabs ul.tabs{
  margin: 0 0 12px !important;
}
.single-product .woocommerce-tabs ul.tabs li a{
  font-weight: 900 !important;
}

/* 5) Ähnliche Produkte nebeneinander (nicht untereinander) */
.single-product .related ul.products,
.single-product .up-sells ul.products{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 992px){
  .single-product .related ul.products,
  .single-product .up-sells ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 576px){
  .single-product .related ul.products,
  .single-product .up-sells ul.products{
    grid-template-columns: 1fr !important;
  }
}

/* Karten in "Ähnliche Produkte" wie bei dir */
.single-product .related ul.products li.product,
.single-product .up-sells ul.products li.product{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:18px !important;
  box-shadow:0 14px 40px rgba(0,0,0,.08) !important;
  padding:18px !important;
}

/* 6) Mobile: alles untereinander, Bilder trotzdem groß */
@media (max-width: 991px){
  .single-product .summary{
    margin-top: 16px !important;
  }
  .single-product .flex-control-thumbs{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}














/* C2C – Related Products größer (nur "Ähnliche Produkte") */
.single-product .related ul.products{
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: 30px !important;
}

.single-product .related ul.products li.product{
  padding: 26px !important;
  border-radius: 22px !important;
}

.single-product .related ul.products li.product a img{
  max-width: 92% !important;
  margin: 0 auto 16px !important;
}

/* Titel/Preis etwas größer */
.single-product .related ul.products li.product .woocommerce-loop-product__title{
  font-size: 20px !important;
  line-height: 1.25 !important;
}

.single-product .related ul.products li.product .price{
  font-size: 18px !important;
}

/* Responsive */
@media (max-width: 992px){
  .single-product .related ul.products{
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
}
@media (max-width: 576px){
  .single-product .related ul.products{
    grid-template-columns: 1fr !important;
  }
  .single-product .related ul.products li.product{
    padding: 22px !important;
  }
}




/* ==========================================================
   WooCommerce – Ähnliche Produkte: groß & wie Produkt-Grid
   ========================================================== */

/* Container/Überschrift optional etwas Luft */
.single-product .related{
  margin-top: 40px !important;
}
.single-product .related > h2,
.single-product .related h2{
  margin-bottom: 18px !important;
}

/* Grid: groß, responsiv */
.single-product .related ul.products{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 992px){
  .single-product .related ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 576px){
  .single-product .related ul.products{
    grid-template-columns: 1fr !important;
  }
}

/* Karte: volle Breite, keine schmale Fix-Breite */
.single-product .related ul.products li.product{
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* Bild groß (wie Kategorieseite), sauberer Zuschnitt */
.single-product .related ul.products li.product a img{
  width: 100% !important;
  height: 260px !important;        /* falls dir zu groß/klein: 220–320 testen */
  object-fit: cover !important;
  border-radius: 14px !important;
  margin: 0 0 14px !important;
}

/* Titel/Preis etwas größer für Übersichtlichkeit */
.single-product .related ul.products li.product .woocommerce-loop-product__title{
  font-size: 18px !important;
  line-height: 1.25 !important;
}
.single-product .related ul.products li.product .price{
  font-size: 17px !important;
}


















/* WooCommerce Shop-Seitentitel unter dem Hero ausblenden */
body.post-type-archive-product .woocommerce-products-header__title.page-title,
body.tax-product_cat .woocommerce-products-header__title.page-title,
body.tax-product_tag .woocommerce-products-header__title.page-title{
  display: none !important;
}

/* Falls dein Theme den Titel anders ausgibt */
body.post-type-archive-product h1.page-title,
body.tax-product_cat h1.page-title,
body.tax-product_tag h1.page-title{
  display: none !important;
}






























/* ==========================================================
   NUR Warenkorb (Cart Block) – Schriftgrößen größer
   ========================================================== */
body.woocommerce-cart{
  font-size: 18px !important;
  line-height: 1.65 !important;
}

/* Linke Spalte: Produktliste */
body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-cart-items *{
  font-size: 18px !important;
  line-height: 1.55 !important;
}

/* Produktname */
body.woocommerce-cart .wc-block-cart-item__product a{
  font-size: 20px !important;
  font-weight: 800 !important;
}

/* Preise in der Liste */
body.woocommerce-cart .wc-block-cart-item__prices,
body.woocommerce-cart .wc-block-cart-item__prices *{
  font-size: 18px !important;
}

/* Rechte Box: Warenkorb-Summe */
body.woocommerce-cart .wc-block-components-totals-wrapper,
body.woocommerce-cart .wc-block-components-totals-wrapper *{
  font-size: 18px !important;
  line-height: 1.55 !important;
}

/* Überschrift "Warenkorb-Summe" */
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block,
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block *{
  font-size: 26px !important;
  font-weight: 900 !important;
}

/* Gesamtsumme-Zeile */
body.woocommerce-cart .wc-block-components-totals-item.wc-block-components-totals-footer-item,
body.woocommerce-cart .wc-block-components-totals-item.wc-block-components-totals-footer-item *{
  font-size: 20px !important;
  font-weight: 900 !important;
}

/* Button "Weiter zur Kasse" */
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wc-block-cart__submit-button *{
  font-size: 18px !important;
  font-weight: 900 !important;
}





























































/* ==========================================================
   C2C – Leistungen (page-id-193) als Cards/Shop-Look
   ========================================================== */

.page-id-193 .elementor .e-n-accordion,
.page-id-193 .elementor .elementor-widget-n-accordion {
  max-width: 1200px;
  margin: 0 auto;
}

/* Accordion-Items als Cards */
.page-id-193 .elementor details.e-n-accordion-item{
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.08) !important;
  overflow: hidden;
  margin: 0 0 18px !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

.page-id-193 .elementor details.e-n-accordion-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 55px rgba(0,0,0,.14) !important;
}

/* Header (Titelzeile) */
.page-id-193 .elementor summary.e-n-accordion-item__summary{
  padding: 16px 18px !important;
  background: rgba(255,152,0,.08) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

.page-id-193 .elementor summary.e-n-accordion-item__summary .e-n-accordion-item__title{
  font-weight: 900 !important;
  letter-spacing: .02em;
}

/* Content */
.page-id-193 .elementor .e-n-accordion-item__content{
  padding: 18px 18px 22px !important;
}

/* Button in der Leistung */
.page-id-193 .elementor a.elementor-button,
.page-id-193 .elementor .elementor-button{
  background: #ff9800 !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  padding: 12px 18px !important;
  box-shadow: 0 14px 34px rgba(255,152,0,.22) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.page-id-193 .elementor a.elementor-button:hover,
.page-id-193 .elementor .elementor-button:hover{
  background: #e67600 !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(255,152,0,.30) !important;
}

/* Abstand nach unten zur letzten Card */
.page-id-193 .elementor .elementor-section:last-child{
  padding-bottom: 50px;
}












































/* ==========================================================
   Kontakt (page-id-195) – Bilder hervorheben (Rahmen, Schatten, Hover)
   ========================================================== */

.page-id-195 .elementor img,
.page-id-195 img{
  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.10) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}

/* Hover-Effekt (Desktop) */
@media (hover:hover){
  .page-id-195 .elementor img:hover,
  .page-id-195 img:hover{
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 22px 60px rgba(0,0,0,.18) !important;
    filter: saturate(1.05) contrast(1.02);
  }
}

/* Optional: wenn Bilder in einem Link/Widget stecken */
.page-id-195 .elementor a:has(img){
  display: inline-block;
  border-radius: 18px;
}

























/* ==========================================================
   C2C – Leistungen (page-id-193) MOBILE FIX (sehr klein)
   ========================================================== */
@media (max-width: 480px){

  /* Accordion/Card nicht so „wuchtig“ */
  .page-id-193 .elementor details.e-n-accordion-item{
    border-radius: 14px !important;
    margin: 0 0 12px !important;
  }

  .page-id-193 .elementor summary.e-n-accordion-item__summary{
    padding: 12px 12px !important;
  }

  .page-id-193 .elementor .e-n-accordion-item__content{
    padding: 12px 12px 14px !important;
  }

  /* Text etwas kleiner */
  .page-id-193 .elementor .e-n-accordion-item__content,
  .page-id-193 .elementor .e-n-accordion-item__content p{
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  /* Button kleiner */
  .page-id-193 .elementor a.elementor-button,
  .page-id-193 .elementor .elementor-button{
    padding: 10px 14px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  /* WICHTIG: Bild darf auf klein nicht verzerren */
  .page-id-193 .elementor .elementor-widget-image img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Falls Elementor dem Bild/Wrapper eine Höhe „reindrückt“ */
  .page-id-193 .elementor .elementor-widget-image,
  .page-id-193 .elementor .elementor-widget-image .elementor-widget-container,
  .page-id-193 .elementor .elementor-widget-image figure{
    height: auto !important;
  }
}
















/* ==========================================================
   Leistungen (page-id-193) – Bilder am Handy kleiner
   (IMG + Background-Fälle abgedeckt)
   ========================================================== */
@media (max-width: 520px){

  /* 1) Normale IMG-Fälle (Elementor Image Widget / jedes IMG im Content) */
  .page-id-193 .elementor img,
  .page-id-193 .elementor-widget-image img,
  .page-id-193 .elementor-widget-theme-post-featured-image img{
    width: auto !important;
    max-width: 78% !important;
    height: auto !important;
    max-height: 170px !important;
    display: block !important;
    margin: 0 auto 14px !important;
    object-fit: contain !important;
  }

  /* 2) Falls das Bild als Background gesetzt ist */
  .page-id-193 .elementor [style*="background-image"]{
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* 3) Typischer Elementor-Container mit Background: Höhe deckeln */
  .page-id-193 .elementor .elementor-element[style*="background-image"]{
    min-height: 180px !important;
  }

  /* 4) Accordion-Content kompakter (damit nichts „riesig“ wirkt) */
  .page-id-193 details.e-n-accordion-item .e-n-accordion-item__content{
    padding: 12px 12px 14px !important;
  }
}

























/* ==========================================================
   C2C – Produktseite MOBILE FIX (alles untereinander)
   ========================================================== */

@media (max-width: 768px){

  /* Grid deaktivieren */
  .single-product div.product{
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  /* Gallery */
  .single-product .woocommerce-product-gallery{
    width:100% !important;
    margin-bottom:20px !important;
  }

  /* Produktinfo */
  .single-product .summary{
    width:100% !important;
    margin-top:20px !important;
  }

  /* Beschreibung / Tabs */
  .single-product .woocommerce-tabs{
    width:100% !important;
    display:block !important;
    margin-top:25px !important;
  }

  .single-product .woocommerce-tabs .panel{
    width:100% !important;
  }

  /* Ähnliche Produkte */
  .single-product .related{
    width:100% !important;
    margin-top:30px !important;
  }

}
















/* ==========================================================
   C2C – Ähnliche Produkte MOBILE FIX
   ========================================================== */

@media (max-width:768px){

  .single-product .related ul.products{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .single-product .related ul.products li.product{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
  }

  .single-product .related ul.products li.product img{
    width:100% !important;
    height:auto !important;
    object-fit:cover !important;
  }

}













/* =========================
   Mobile Burger Menu
========================= */

.c2c-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.c2c-burger span {
	display: block;
	width: 26px;
	height: 3px;
	background: #000;
	border-radius: 2px;
	transition: all 0.3s ease;
}

@media (max-width: 768px) {
	.c2c-burger {
		display: flex;
	}

	.c2c-nav {
		position: relative;
	}

	.c2c-nav .c2c-menu {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		width: 180px;
		background: #000;
		padding: 8px 0;
		margin: 8px 0 0 0;
		list-style: none;
		z-index: 9999;
		box-shadow: 0 8px 20px rgba(0,0,0,0.2);
		border-radius: 8px;
	}

	.c2c-nav .c2c-menu li {
		display: block;
		width: 100%;
		margin: 0;
	}

	.c2c-nav .c2c-menu li a {
		display: block;
		width: 100%;
		padding: 10px 16px;
		color: #fff;
		text-decoration: none;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.3;
	}

	.c2c-nav .c2c-menu li a:hover,
	.c2c-nav .c2c-menu li.current-menu-item a {
		background: #f28c28;
		color: #000;
	}

	.c2c-nav.menu-open .c2c-menu {
		display: block;
	}

	.c2c-navgroup {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.c2c-burger.active span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.c2c-burger.active span:nth-child(2) {
		opacity: 0;
	}

	.c2c-burger.active span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
}
























@media (max-width: 768px) {
	.c2c-nav .c2c-menu li a,
	.c2c-nav .c2c-menu li a:visited,
	.c2c-nav .c2c-menu li a:focus,
	.c2c-nav .c2c-menu li a:active,
	.c2c-nav .c2c-menu li.current-menu-item a,
	.c2c-nav .c2c-menu li.current_page_item a,
	.c2c-nav .c2c-menu li.current-menu-ancestor a {
		color: #ffffff !important;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
		text-transform: uppercase;
	}

	.c2c-nav .c2c-menu li a:hover {
		color: #ffffff !important;
	}
}




































@media (max-width: 768px) {
	.c2c-nav .c2c-menu {
		overflow: hidden !important;
	}

	.c2c-nav .c2c-menu li a,
	.c2c-nav .c2c-menu li.current-menu-item a,
	.c2c-nav .c2c-menu li.current_page_item a,
	.c2c-nav .c2c-menu li.current-menu-ancestor a {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}
}



@media (max-width: 768px) {
	html, body {
		overflow-x: hidden !important;
	}

	.c2c-nav {
		position: relative !important;
	}

	.c2c-nav .c2c-menu {
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: auto !important;
		width: 170px !important;
		margin-top: 8px !important;
		z-index: 9999 !important;
	}
}


@media (max-width: 768px) {
	.c2c-nav .c2c-menu {
		right: -20px !important;
		left: auto !important;
	}
}