/*
 Theme Name:   Astra GB Child
 Template:     astra
 Version:      1.0.5
 Text Domain:  astra-gb-child
*/

/* ==== CI Variables ==== */
:root{
  --brand: #8AC33F;   /* CI Green */
  --text:  #333333;   /* CI Dark */
  --white: #FFFFFF;
  --radius: 12px;
  --shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* ==== Base ==== */
body{ color: var(--text); }
a{ color: var(--brand); text-decoration: none; }
a:hover, a:focus{ text-decoration: underline; }

/* Gutenberg button */
.wp-block-button .wp-block-button__link{
  background: var(--brand);
  color: var(--white);
  border-radius: var(--radius);
}
.wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
}

/* ==== Woo Grid: 4/3/2 columns ==== */
.woocommerce ul.products { 
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
@media (min-width: 768px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==== Product Card ==== */
.wc-card {
  list-style: none;
  background: #fff;
  border: 1px solid #e9eef3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wc-card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(0,0,0,.08); }


.wc-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wc-badge {
  position: absolute; top: 10px; left: 10px;
  background: #8AC33F; color: #fff;
  padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Inside: Button sticks to bottom; rating, price above */
.wc-card__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 14px 16px;
  gap: 8px;
}
.wc-card__title { margin: 0; font-size: clamp(15px, 2vw, 18px); line-height: 1.25; }
.wc-card__title a { color: var(--text); text-decoration: none; }
.wc-card__title a:hover { text-decoration: underline; }

.wc-card__rating { order: 1; }
.wc-card__rating .star-rating { transform: scale(.95); transform-origin: left; }

.wc-card__price { 
  order: 2;
  color: var(--text);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 18px);
}
.price del { color: #9aa3ad; font-weight: 400; }

.wc-card__cta { order: 3; margin-top: auto; }

/* ==== CI Button styles (override Woo/Astra) ==== */
.wc-card__cta .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .button,
.woocommerce a.button.add_to_cart_button,
.woocommerce a.button.product_type_simple,
.woocommerce a.button.product_type_variable,
.woocommerce a.added_to_cart {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: filter .15s ease, transform .03s ease;
}
.wc-card__cta .button:hover,
.woocommerce ul.products li.product a.button:hover,
.woocommerce a.added_to_cart:hover { filter: brightness(0.92); }
.wc-card__cta .button:active,
.woocommerce ul.products li.product a.button:active,
.woocommerce a.added_to_cart:active { transform: translateY(1px); }

/* Loading/added states */
.woocommerce a.button.loading,
.woocommerce a.button.added {
  background: var(--brand) !important;
  color: #fff !important;
}

/* ==== Woo Pagination – Pills, CI hover ==== */
.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination { background: transparent; border: 0; }
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers { background: transparent; border: 0; box-shadow: none; }
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce .page-numbers li { background: transparent; border: 0; box-shadow: none; }

.woocommerce .page-numbers li a,
.woocommerce .page-numbers li span,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e9eef3;
  background: #fff;
  color: var(--text);
  font-weight: 600;
  line-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .03s ease;
}
.woocommerce .page-numbers li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: color-mix(in srgb, var(--brand) 10%, #ffffff);
  border-color: var(--brand);
  color: var(--text);
  transform: translateY(1px);
}
.woocommerce .page-numbers li .current,
.woocommerce nav.woocommerce-pagination ul li .current {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}
.woocommerce .page-numbers li .prev,
.woocommerce .page-numbers li .next,
.woocommerce nav.woocommerce-pagination ul li .prev,
.woocommerce nav.woocommerce-pagination ul li .next { padding: 0 14px; }
.woocommerce .page-numbers li .dots,
.woocommerce nav.woocommerce-pagination ul li .dots {
  border: none; background: transparent; color: #9aa3ad; min-width: auto; padding: 0 4px;
}
.woocommerce .page-numbers li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, #ffffff) !important;
}

/* ACCESSIBILITY HELPERS */
.screen-reader-text{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip: rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* Buttons & Pills in CI-Grün */
button,
input[type="submit"],
.button{
  --_brand: var(--brand);
}
.button,
.ast-button,
.woocommerce a.button,
.woocommerce button.button{
  background: var(--brand);
  color: #0b0b0b;
  border-radius: 999px;
  border: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  filter: brightness(.95);
}

/* === CI Header (Flex) === */
.ci-container{ box-sizing:border-box; width:100%; max-width:1200px; padding-inline:clamp(10px,2.5vw,20px); margin-inline:auto; }

/* Visibility helpers */
.ci-only-desktop{ display:none; }
.ci-only-tablet{ display:none; }
.ci-only-mobile{ display:flex; }
@media (min-width:768px){ .ci-only-mobile{ display:none; } .ci-only-tablet{ display:block; } }
@media (min-width:1024px){ .ci-only-tablet{ display:none; } .ci-only-desktop{ display:block; } }

/* Trust bars */
.ci-row-trust{ background:hsl(0 0% 97% / 1); color:var(--text); }
.ci-trustbar{ display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:1rem; padding:.6rem 0; }
.ci-trustbar--sm{ padding:.5rem 0; }
.ci-trustitem--l{ text-align:left; }
.ci-trustitem--c{ text-align:center; }
.ci-trustitem--r{ text-align:right; }
.ci-trustbadge{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color: hsl(var(--foreground, 0 0% 20%)); }
.ci-trustbadge svg{ color: var(--brand); }

/* Main header rows */
.ci-row-main{ background:#fff; color:var(--text); position:sticky; top:0; z-index:40; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08); }
.ci-mainline{ min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:.75rem; position:relative; }
.ci-logo{ display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.ci-logo img{ height:56px; width:auto; display:block; border-radius:5px; } /* FIX: 5px rounding */
.ci-logo__text{ font-weight:800; font-size:1.1rem; }

/* Desktop search */
.ci-searchform{ position:relative; display:flex; align-items:center; width:min(680px,100%); height:44px; margin-inline:auto; }
.ci-searchform__input{
  flex:1 1 auto; height:44px; border-radius:12px; border:2px solid #e5e5e5;
  background:#fff; color:var(--text); padding:0 48px 0 14px;
}
.ci-searchform__input::placeholder{ color:var(--text); opacity:.7; }
/* Search submit: ikonisch, transparent */
.ci-searchform__submit{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border: 0;
  background: transparent;
  color: currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; line-height: 0;
}
.ci-searchform__submit svg{ display:block; width:18px; height:18px; stroke:currentColor; fill:none; pointer-events:none; }
.ci-searchform__submit:hover{ color: var(--brand); }

/* Icons */
.ci-icons{ display:flex; align-items:center; gap:.5rem; }
.ci-iconlink{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; color:var(--text); text-decoration:none; transition:background .2s, color .2s, transform .2s;
}
.ci-iconlink:hover{ background:hsl(0 0% 96% / 1); color:var(--brand); transform: translateY(-1px); }
.ci-cart__badge{
  position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px;
  background: var(--brand); color:#fff; border-radius:999px; font-size:12px; line-height:20px; text-align:center; font-weight:700; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.ci-cart__badge:empty{ display:none; }

/* Banner (gratis Versand) */
.ci-row-banner{ background:linear-gradient(90deg, rgba(138,195,63,.2), rgba(138,195,63,.3), rgba(138,195,63,.2)); border-block:1px solid rgba(138,195,63,.4); }
.ci-banner{ min-height:44px; display:flex; align-items:center; justify-content:center; gap:.6rem; color:#222; font-weight:700; }
.ci-banner .ci-brand{ color:var(--brand); }
.ci-banner p { margin: 0; line-height: 1; display: inline-flex; align-items: center; }
.ci-banner svg { flex: 0 0 auto; vertical-align: middle; }

/* Navigation */
.ci-row-nav{ background: var(--brand); color:#fff; }
.ci-nav{ display:block; }
.ci-nav__menu{ margin:0; padding:.8rem 0; list-style:none; display:flex; align-items:center; justify-content:center; gap:1.25rem; flex-wrap:wrap; }
.ci-nav__menu a{ color:#fff; text-decoration:none; font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:.9rem; opacity:.95; transition:opacity .2s, transform .2s; }
.ci-nav__menu a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* Burger/Search buttons */
.ci-iconbtn{ width:42px; height:42px; border:0; background:transparent; color:#333; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.ci-iconbtn:hover{ background:#f3f3f3; color:var(--brand); }
.ci-burger, .ci-search-toggle{ flex:0 0 42px; }
.ci-iconbtn svg,
.ci-iconlink svg{ display:block; flex-shrink:0; }

/* Toggled rows (defaults) */
header.ci-header .ci-searchbar{ display:none; background:#fff; padding:.8rem 0; border-top:1px solid #eee; }
.ci-iconsbar{ background:#fff; border-top:1px solid #eee; }
.ci-icons--bar{ display:flex; align-items:center; justify-content:space-around; padding:.7rem 0; }
.ci-icons--bar .ci-iconlink{ color:#333; }
.ci-icons--bar .ci-iconlink:hover{ background:#f3f3f3; color:var(--brand); }

/* ========= TABLET (768–1023.98px) ========= */
@media (min-width:768px) and (max-width:1023.98px){
  .ci-row-main{ background:#fff; }
  /* Perfekt zentriertes Logo: 42px | 1fr | 42px */
  .ci-mainline{ display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:.75rem; }
  .ci-burger{ display:inline-flex !important; }
  .ci-search-toggle{ display:inline-flex !important; }
  .ci-searchform{ display:none; }

  /* Icons-Bar als eigene Zeile */
  .ci-mainline .ci-icons{ display:none !important; } /* Desktop-Icons aus */
  .ci-iconsbar{
    display:block !important;
    width:100%;
    clear:both;
    float:none;
    position:relative;
    z-index:5;
    border-top:1px solid #eee;
    background:#fff;
  }
  .ci-iconsbar .ci-icons{ display:flex !important; justify-content:space-evenly; gap:.75rem; padding:.6rem 0; }

  /* Searchbar einklappen */
  .ci-header.search-open .ci-searchbar{ display:block; }
}

/* ========= MOBILE (≤767.98px) ========= */
@media (max-width:767.98px){
  .ci-row-trust{ display:none; }
  .ci-row-banner.ci-only-desktop{ display:none; }

  /* 42px | 1fr | 42px für perfekte Mitte */
  .ci-mainline{ display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:.75rem; }

  .ci-burger{ display:inline-flex !important; }
  .ci-search-toggle{ display:inline-flex !important; }
  .ci-searchform{ display:none; }
  .ci-logo img{ height:40px; }

  /* Icons-Bar als eigene Zeile */
  .ci-mainline .ci-icons{ display:none !important; } /* Desktop-Icons aus */
  .ci-iconsbar{
    display:block !important;
    width:100%;
    clear:both;
    float:none;
    position:relative;
    z-index:5;
    border-top:1px solid #eee;
    background:#fff;
  }
  .ci-iconsbar .ci-icons{ display:flex !important; justify-content:space-evenly; gap:.75rem; padding:.6rem 0; }



  /* Searchbar einklappen */
  .ci-header.search-open .ci-searchbar{ display:block; }
}

/* Overflow guards */
.ci-mainline, .ci-icons--bar, .ci-nav__menu{ min-width:0; }
.ci-logo{ min-width:0; }
.ci-logo img{ max-width:60vw; height:auto; }
html, body{ overflow-x:hidden; }

/* Links/Icons/Nav – CI-Hover unifiziert */
.ci-nav__menu a:hover{ color:#fff; opacity:1; text-decoration: underline; text-underline-offset: 3px; }
.ci-iconlink:hover,
.ci-iconbtn:hover{ color: var(--brand); background: hsl(0 0% 96% / 1); }


/* ==== MERGED: style-fixed.css + header-fixes-v2 (placed at end to override) ==== */

/* === Astra GB Child – Header Fixes v2 === */

/* Variables (keep if not already present) */
:root{
  --brand:#8AC33F;
  --text:#333;
}

/* --- LOGO ROUNDING (force) --- */
.custom-logo,
.custom-logo-link img,
.ci-logo img{
  border-radius:5px !important;   /* force 5px */
  overflow:hidden;                 /* clip rounded corners */
  display:block;
}
/* Hide empty .ci-logo anchor (your markup contains an empty one before the real logo link) */
.ci-logo:empty{ display:none !important; }

/* Reasonable logo sizes on small screens */
@media (max-width:1023.98px){
  .custom-logo-link{ max-width:60vw; justify-self:center; }
  .custom-logo{ height:auto; max-height:42px; width:auto; }
}

/* --- SAFETY: Make sure inline images never break the grid */
.custom-logo-link, .ci-logo{ min-width:0; }
.custom-logo{ max-width:100%; height:auto; }

/* --- ICONS VISIBLE & CLICKABLE --- */
.ci-iconbtn, .ci-iconlink{ line-height:0; }
.ci-iconbtn svg, .ci-iconlink svg{ display:block; flex-shrink:0; }

/* --- MOBILE/TABLET HEADER LAYOUT --- */
/* On small screens, force the row to stack its children (container, searchbar, iconsbar) vertically */
@media (max-width:1023.98px){
  .ci-row.ci-row-main{
    display:block !important;     /* override any flex from theme */
    width:100%;
  }

  /* Mainline: 3 columns (burger | logo | search) with perfect centering */
  .ci-row.ci-row-main .ci-mainline{
    display:grid !important;
    grid-template-columns:42px 1fr 42px;
    align-items:center;
    gap:.75rem;
  }
  .ci-row.ci-row-main .ci-mainline > *{ min-width:0; } /* prevent wrapping */
  .ci-row.ci-row-main .ci-burger{ grid-column:1; justify-self:start; }
  .ci-row.ci-row-main .custom-logo-link{ grid-column:2; justify-self:center; }
  .ci-row.ci-row-main .ci-search-toggle{ grid-column:3; justify-self:end; }

  /* Prevent the search button from dropping to a new line */
  .ci-row.ci-row-main .ci-search-toggle{ white-space:nowrap; }

  /* Desktop icon group inside mainline off on small screens */
  .ci-row.ci-row-main .ci-mainline .ci-icons{ display:none !important; }

  /* Searchbar and Iconsbar each occupy their own full row/line */
  .ci-row.ci-row-main .ci-searchbar,
  .ci-row.ci-row-main .ci-iconsbar{
    display:block !important;
    width:100% !important;
    clear:both;
    float:none;
    position:relative;
    z-index:5;
    background:#fff;
    border-top:1px solid #eee;
  }

  .ci-row.ci-row-main .ci-iconsbar .ci-icons{
    display:flex !important;
    align-items:center;
    justify-content:space-evenly;
    gap:.75rem;
    padding:.6rem 0;
  }

  /* Ensure the outer .ci-container doesn't try to sit next to .ci-iconsbar */
  .ci-row.ci-row-main > .ci-container,
  .ci-row.ci-row-main > .ci-iconsbar,
  .ci-row.ci-row-main > .ci-searchbar{
    display:block !important;
    width:100% !important;
  }

  /* As an additional safety net, allow wrapping if some theme flex slips through */
  .ci-row.ci-row-main{ flex-wrap:wrap !important; }
}

/* --- BADGE COLOR ALWAYS CI --- */
.ci-cart__badge{ background:var(--brand) !important; color:#fff !important; }

/* --- SEARCH BUTTON AS PURE ICON (no border/background) --- */
.ci-searchform__submit{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border:0; background:transparent;
  color:currentColor; display:inline-flex; align-items:center; justify-content:center; line-height:0;
}
.ci-searchform__submit svg{ width:18px; height:18px; stroke:currentColor; fill:none; display:block; }

/* --- BANNER ICON ALIGNMENT --- */
.ci-banner{ display:flex; align-items:center; gap:.6rem; }
.ci-banner p{ margin:0; line-height:1; display:inline-flex; align-items:center; }
.ci-banner svg{ vertical-align:middle; flex:0 0 auto; }



/* ===========================================
   HARD OVERRIDES (Mobile/Tablet) — v2
   Fix: double rows, correct visibility helpers,
   force stacking and logo rounding
   =========================================== */

/* Visibility helpers: show only one variant */
.ci-only-desktop, .ci-only-tablet, .ci-only-mobile{ display:none !important; }
@media (max-width:767.98px){ .ci-only-mobile{ display:block !important; } }
@media (min-width:768px) and (max-width:1023.98px){ .ci-only-tablet{ display:block !important; } }
@media (min-width:1024px){ .ci-only-desktop{ display:block !important; } }

/* Logo rounding (force across common wrappers) */
img.custom-logo,
.custom-logo,
.custom-logo-link img,
.site-logo-img img,
.ci-logo img{ border-radius:5px !important; overflow:hidden; display:block; }
.ci-logo:empty{ display:none !important; } /* remove empty anchor */

/* Mobile/Tablet layout: stack rows and keep mainline 1-row grid */
@media (max-width:1023.98px){
  /* Ensure the row itself does not act as flex from parent theme */
  .ci-row.ci-row-main{
    display:block !important;
    width:100% !important;
    flex:none !important;
    flex-direction:column !important;
  }

  /* Every direct child of the row takes full width and a new line */
  .ci-row.ci-row-main > *{
    display:block !important;
    width:100% !important;
    clear:both;
    float:none;
  }

  /* Mainline = single grid row (burger | logo | search) */
  .ci-row.ci-row-main .ci-mainline{
    display:grid !important;
    grid-template-columns:42px 1fr 42px;
    align-items:center;
    gap:.75rem;
  }
  .ci-row.ci-row-main .ci-mainline > *{ min-width:0; }
  .ci-row.ci-row-main .ci-burger{ grid-column:1; justify-self:start; }
  .ci-row.ci-row-main .custom-logo-link{ grid-column:2; justify-self:center; display:block; max-width:60vw; }
  .ci-row.ci-row-main .custom-logo{ height:auto; max-height:42px; width:auto; }
  .ci-row.ci-row-main .ci-search-toggle{ grid-column:3; justify-self:end; white-space:nowrap; }

  /* Prevent any desktop icon group inside mainline */
  .ci-row.ci-row-main .ci-mainline .ci-icons{ display:none !important; }

  /* Searchbar and Iconsbar each in their own full-width line */
  .ci-row.ci-row-main .ci-searchbar,
  .ci-row.ci-row-main .ci-iconsbar{
    display:block !important;
    width:100% !important;
    clear:both;
    float:none;
    position:relative;
    z-index:5;
    background:#fff;
    border-top:1px solid #eee;
  }

  .ci-row.ci-row-main .ci-iconsbar .ci-icons{
    display:flex !important;
    align-items:center;
    justify-content:space-evenly;
    gap:.75rem;
    padding:.6rem 0;
  }
}

/* Ensure containers themselves don't force inline layout */
.ci-container{ width:100%; }



/* =====================================================
   ULTRA-HARD OVERRIDES v3
   - Exclusive visibility for desktop/tablet/mobile blocks
   - Fix mainline breaking into 2 rows
   - Neutralize flex/grid from theme on row/container
   ===================================================== */

/* Start with all hidden */
.ci-only-desktop, .ci-only-tablet, .ci-only-mobile{ display:none !important; visibility:hidden !important; }
/* Mobile only */
@media (max-width:767.98px){
  .ci-only-mobile{ display:block !important; visibility:visible !important; }
  .ci-only-tablet, .ci-only-desktop{ display:none !important; visibility:hidden !important; }
}
/* Tablet only */
@media (min-width:768px) and (max-width:1023.98px){
  .ci-only-tablet{ display:block !important; visibility:visible !important; }
  .ci-only-mobile, .ci-only-desktop{ display:none !important; visibility:hidden !important; }
}
/* Desktop only */
@media (min-width:1024px){
  .ci-only-desktop{ display:block !important; visibility:visible !important; }
  .ci-only-mobile, .ci-only-tablet{ display:none !important; visibility:hidden !important; }
}

/* Remove empty placeholder anchor that creates an extra grid cell */
.ci-mainline > .ci-logo:empty{ display:none !important; }

/* Enforce non-flex rows & containers on small screens */
@media (max-width:1023.98px){
  .ci-row.ci-row-main{ 
    display:block !important; width:100% !important; 
    flex:none !important; flex-direction:initial !important;
  }
  .ci-row.ci-row-main > .ci-container,
  .ci-row.ci-row-main > .ci-searchbar,
  .ci-row.ci-row-main > .ci-iconsbar{
    display:block !important; width:100% !important;
    clear:both; float:none;
  }
  /* Ensure inner container does not become flex/grid from theme */
  .ci-row.ci-row-main .ci-container{
    display:block !important; width:100% !important;
  }

  /* MAINLINE: single row grid with named areas */
  .ci-row.ci-row-main .ci-mainline{
    display:grid !important;
    grid-template-columns: 42px 1fr 42px;
    grid-template-areas: "burger logo search";
    align-items:center;
    gap:.75rem;
  }
  .ci-row.ci-row-main .ci-mainline > *{ min-width:0; max-width:100%; }
  .ci-row.ci-row-main .ci-burger{ grid-area: burger; justify-self:start; }
  .ci-row.ci-row-main .custom-logo-link{ grid-area: logo; justify-self:center; display:block; max-width:60vw; }
  .ci-row.ci-row-main .ci-search-toggle{ grid-area: search; justify-self:end; white-space:nowrap; overflow:hidden; }

  /* Never show desktop inline icon group inside mainline */
  .ci-row.ci-row-main .ci-mainline .ci-icons{ display:none !important; }

  /* Full-width lines for searchbar & iconsbar */
  .ci-row.ci-row-main .ci-searchbar,
  .ci-row.ci-row-main .ci-iconsbar{
    display:block !important; width:100% !important;
    clear:both; float:none;
    position:relative; z-index:5;
    background:#fff; border-top:1px solid #eee;
  }
  .ci-row.ci-row-main .ci-iconsbar .ci-icons{
    display:flex !important; align-items:center; justify-content:space-evenly;
    gap:.75rem; padding:.6rem 0;
  }
}

/* Force logo rounding no matter what */
img.custom-logo,
.custom-logo,
.custom-logo-link img,
.site-logo-img img,
.ci-logo img{ border-radius:5px !important; overflow:hidden !important; display:block; height:auto; }



/* =====================================================
   VISIBILITY ENFORCER v4 (highest specificity)
   Ensures only one header variant is visible per breakpoint.
   Also prevents any theme flex from forcing visibility.
   ===================================================== */

/* Hide desktop on <1024px */
@media (max-width:1023.98px){
  header.ci-header .ci-only-desktop{
    display:none !important; visibility:hidden !important;
    height:0 !important; overflow:hidden !important;
    padding:0 !important; margin:0 !important; border:0 !important;
  }
}

/* Hide tablet on <768px and >=1024px */
@media (max-width:767.98px){
  header.ci-header .ci-only-tablet{
    display:none !important; visibility:hidden !important;
    height:0 !important; overflow:hidden !important;
    padding:0 !important; margin:0 !important; border:0 !important;
  }
}
@media (min-width:1024px){
  header.ci-header .ci-only-tablet{
    display:none !important; visibility:hidden !important;
    height:0 !important; overflow:hidden !important;
    padding:0 !important; margin:0 !important; border:0 !important;
  }
}

/* Hide mobile on >=768px (aber NICHT, wenn Element auch .ci-only-tablet trägt) */
@media (min-width:768px){
  header.ci-header .ci-only-mobile:not(.ci-only-tablet){
    display:none !important; visibility:hidden !important;
    height:0 !important; overflow:hidden !important;
    padding:0 !important; margin:0 !important; border:0 !important;
  }
}


/* Prevent any header rows from acting like flex on small screens */
@media (max-width:1023.98px){
  header.ci-header .ci-row.ci-row-main{
    display:block !important; width:100% !important;
    flex:none !important; flex-direction:initial !important;
  }
  header.ci-header .ci-row.ci-row-main > *{
    display:block !important; width:100% !important;
    clear:both; float:none;
  }
  header.ci-header .ci-row.ci-row-main .ci-container{ display:block !important; width:100% !important; }

  /* Single-row grid for mainline */
  header.ci-header .ci-row.ci-row-main .ci-mainline{
    display:grid !important;
    grid-template-columns:42px 1fr 42px;
    grid-template-areas:"burger logo search";
    align-items:center; gap:.75rem;
  }
  header.ci-header .ci-row.ci-row-main .ci-mainline > *{ min-width:0; }
  header.ci-header .ci-row.ci-row-main .ci-burger{ grid-area:burger; justify-self:start; }
  header.ci-header .ci-row.ci-row-main .custom-logo-link{ grid-area:logo; justify-self:center; display:block; max-width:60vw; }
  header.ci-header .ci-row.ci-row-main .ci-search-toggle{ grid-area:search; justify-self:end; white-space:nowrap; }
  header.ci-header .ci-row.ci-row-main .ci-mainline .ci-icons{ display:none !important; }
}

/* Always remove empty ci-logo anchors in mainline (if markup still outputs them) */
header.ci-header .ci-mainline > .ci-logo:empty{ display:none !important; }

/* Logo rounding safety */
header.ci-header img.custom-logo,
header.ci-header .custom-logo,
header.ci-header .custom-logo-link img,
header.ci-header .site-logo-img img,
header.ci-header .ci-logo img{
  border-radius:5px !important; overflow:hidden !important; display:block;
}



/* =====================================================
   LOGO HOTFIX v5
   Force-show the logo image and link across all views.
   ===================================================== */
header.ci-header .custom-logo-link{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  visibility:visible !important;
  opacity:1 !important;
}
header.ci-header .custom-logo-link img,
header.ci-header img.custom-logo{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  border-radius:5px !important;
  overflow:hidden !important;
}

/* Desktop size */
@media (min-width:1024px){
  header.ci-header .custom-logo-link img,
  header.ci-header img.custom-logo{ max-height:56px !important; }
}

/* Tablet/Mobile size */
@media (max-width:1023.98px){
  header.ci-header .custom-logo-link{ max-width:60vw !important; }
  header.ci-header .custom-logo-link img,
  header.ci-header img.custom-logo{ max-height:42px !important; }
}

/* If a theme rule sets the parent to hidden/0-size, override */
header.ci-header .ci-mainline .custom-logo-link{ 
  grid-column:auto !important; 
  grid-row:auto !important; 
}

/* Safety: do not hide non-empty .ci-logo in case site uses it as the real logo */
header.ci-header .ci-mainline > .ci-logo{ display:inline-flex; align-items:center; }
header.ci-header .ci-mainline > .ci-logo img{ display:block; max-height:56px; height:auto; }
@media (max-width:1023.98px){
  header.ci-header .ci-mainline > .ci-logo img{ max-height:42px; }
}



/* =====================================================
   LOGO RESURRECTION v6
   Force-show logo in all views. Targets by class and by URL.
   ===================================================== */

/* 1) Make sure the anchor is visible and has size */
header.ci-header .custom-logo-link,
header.ci-header a[href*="uploads/"][href*="logo-1"],
header.ci-header .site-logo-img,
header.ci-header .ci-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  opacity:1 !important;
  visibility:visible !important;
  position:static !important;
  overflow:visible !important;
  clip:auto !important;
  clip-path:none !important;
}

/* 2) Make sure the IMG itself is visible and not collapsed/filtered */
header.ci-header .custom-logo,
header.ci-header .custom-logo-link img,
header.ci-header .site-logo-img img,
header.ci-header .ci-logo img,
header.ci-header img[src*="/uploads/"][src*="logo-1"]{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;   /* allow sizing below */
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:none !important;
  pointer-events:auto !important;
  position:static !important;
  border-radius:5px !important;
  overflow:hidden !important;
}

/* 3) Sensible sizes per breakpoint (then reduced a bit on small screens) */
@media (min-width:1024px){
  header.ci-header .custom-logo,
  header.ci-header .custom-logo-link img,
  header.ci-header .site-logo-img img,
  header.ci-header .ci-logo img,
  header.ci-header img[src*="/uploads/"][src*="logo-1"]{
    max-height:56px !important;
  }
}
@media (max-width:1023.98px){
  header.ci-header .custom-logo-link{ max-width:60vw !important; }
  header.ci-header .custom-logo,
  header.ci-header .custom-logo-link img,
  header.ci-header .site-logo-img img,
  header.ci-header .ci-logo img,
  header.ci-header img[src*="/uploads/"][src*="logo-1"]{
    max-height:42px !important;
  }
}

/* 4) Grid slot in mainline (prevents accidental wrapping) */
@media (max-width:1023.98px){
  header.ci-header .ci-row.ci-row-main .ci-mainline{
    display:grid !important; grid-template-columns:42px 1fr 42px;
    align-items:center; gap:.75rem;
  }
  header.ci-header .ci-row.ci-row-main .ci-burger{ justify-self:start; }
  header.ci-header .ci-row.ci-row-main .custom-logo-link,
  header.ci-header .ci-row.ci-row-main .ci-logo{ justify-self:center; }
  header.ci-header .ci-row.ci-row-main .ci-search-toggle{ justify-self:end; white-space:nowrap; }
}

/* 5) If a container ancestor hides overflow or zero heights, undo */
header.ci-header .ci-mainline,
header.ci-header .ci-container{
  overflow:visible !important;
  height:auto !important;
}

/* (optional) Debug aid – uncomment locally to see the logo box
header.ci-header .custom-logo-link{ outline:2px solid red !important; }
*/



/* =====================================================
   HEADER LAYOUT v7 (with guaranteed logo)
   ===================================================== */

/* Desktop mainline: logo | search | icons */
@media (min-width:1024px){
  header.ci-header .ci-row.ci-row-main .ci-mainline{
    display:grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo search icons";
    align-items:center;
    gap:1rem;
  }
  header.ci-header .ci-mainline .custom-logo-link,
  header.ci-header .ci-mainline .ci-logo{ grid-area:logo; justify-self:start; }
  header.ci-header .ci-mainline .ci-searchform{ grid-area:search; }
  header.ci-header .ci-mainline .ci-icons{ grid-area:icons; justify-self:end; }
}

/* Tablet & Mobile mainline: burger | logo | search */
@media (max-width:1023.98px){
  header.ci-header .ci-row.ci-row-main .ci-mainline{
    display:grid !important;
    grid-template-columns:42px 1fr 42px;
    grid-template-areas:"burger logo search";
    align-items:center;
    gap:.75rem;
  }
  header.ci-header .ci-mainline .ci-burger{ grid-area:burger; justify-self:start; }
  header.ci-header .ci-mainline .custom-logo-link,
  header.ci-header .ci-mainline .ci-logo{ grid-area:logo; justify-self:center; }
  header.ci-header .ci-mainline .ci-search-toggle{ grid-area:search; justify-self:end; white-space:nowrap; }
}

/* Logo sizes */
@media (min-width:1024px){
  header.ci-header .custom-logo-link img,
  header.ci-header img.custom-logo{ max-height:56px !important; }
}
@media (max-width:1023.98px){
  header.ci-header .custom-logo-link{ max-width:60vw; }
  header.ci-header .custom-logo-link img,
  header.ci-header img.custom-logo{ max-height:42px !important; }
}



/* =====================================================
   MOBILE/TABLET INTERACTION v8
   - Searchbar hidden by default; shown only via toggle
   - Burger toggles navigation visibility
   ===================================================== */

/* Mobile & Tablet: Nav standardmäßig zu; bei .nav-open auf */
@media (max-width:1023.98px){
  header.ci-header .ci-row.ci-row-nav{
    display:none !important;
  }
  header.ci-header.nav-open .ci-row.ci-row-nav{
    display:block !important;
  }
}




/* === CI Header – Separate Search Row (minimal) v11 === */
@media (max-width:1023.98px){
  /* default closed */
  header.ci-header .ci-row.ci-row-search{
    display:block;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    padding-top:0; padding-bottom:0;
    margin:0;
    border-top:0;
    transition:max-height .25s ease, opacity .2s ease;
  }
  /* open state */
  header.ci-header .ci-row.ci-row-search.is-open{
    max-height:500px;
    opacity:1; visibility:visible;
    padding-top:.75rem; padding-bottom:.75rem;
    border-top:1px solid #eee;
    background:#fff;
  }
}


/* === CI Header – separate search row (minimal) v13 === */
@media (max-width:1023.98px){
  header.ci-header .ci-row.ci-row-search{ 
    display:block;
    max-height:0; overflow:hidden;
    opacity:0; visibility:hidden;
    padding-top:0; padding-bottom:0; margin:0; border-top:0;
    transition:max-height .25s ease, opacity .2s ease;
    background:#fff;
  }
  header.ci-header .ci-row.ci-row-search.is-open{
    max-height:500px; opacity:1; visibility:visible;
    padding-top:.75rem; padding-bottom:.75rem;
    border-top:1px solid #eee;
  }
  /* Falls die Searchbar noch im main-block existiert, dort ausblenden */
  header.ci-header .ci-row.ci-row-main > .ci-searchbar{ display:none !important; }
}

/* Logo rounding (all views) */
.custom-logo{
  border-radius:5px;
}

/* === CI Header Search content visibility fix v2 === */
@media (max-width:1023.98px){
  /* Ensure the inner content becomes visible when the row is open */
  header.ci-header .ci-row.ci-row-search.is-open .ci-container,
  header.ci-header .ci-row.ci-row-search.is-open .ci-searchbar,
  header.ci-header .ci-row.ci-row-search.is-open .ci-searchform{
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Make sure searchbar and form actually render */
  header.ci-header .ci-row.ci-row-search .ci-searchbar{
    display: block !important;
  }
  header.ci-header .ci-row.ci-row-search .ci-searchform{
    display: flex !important;
    gap: 8px;
    align-items: center;
  }

  /* Input styles so it takes the full width */
  header.ci-header .ci-row.ci-row-search .ci-searchform__input{
    flex: 1 1 auto;
    min-width: 0;
    padding: .6rem .8rem;
    border: 1px solid var(--ci-border, #cfd4d9);
    border-radius: 6px;
    background: #fff;
    color: inherit;
  }

  /* Icon-only submit */
  header.ci-header .ci-row.ci-row-search .ci-searchform__submit{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .4rem;
    border: 0;
    background: transparent;
    line-height: 1;
  }

  /* Defensive: if any global CSS hides children via overflow/transform, neutralize */
  header.ci-header .ci-row.ci-row-search .ci-container,
  header.ci-header .ci-row.ci-row-search .ci-searchbar{
    transform: none !important;
    height: auto !important;
  }
}

/* === CI Header: burger → nav-open → show accordion nav (tablet & mobile) v1 === */
@media (max-width:1023.98px){
  /* Accordion nav is hidden by default */
  header.ci-header .ci-row.ci-row-nav.ci-only-tablet,
  header.ci-header .ci-row.ci-row-nav.ci-only-mobile{
    display:none !important;
  }
  /* When header gets .nav-open (via burger click), show it */
  header.ci-header.nav-open .ci-row.ci-row-nav.ci-only-tablet,
  header.ci-header.nav-open .ci-row.ci-row-nav.ci-only-mobile{
    display:block !important;
  }
  /* Optional: basic spacing */
  header.ci-header .ci-row.ci-row-nav.ci-only-tablet .ci-container,
  header.ci-header .ci-row.ci-row-nav.ci-only-mobile .ci-container{
    padding-top:.5rem;
    padding-bottom:.75rem;
  }
}

@media (max-width:1023.98px){
  header.ci-header .ci-row.ci-row-nav{ display:none!important; max-height:0!important; opacity:0!important; visibility:hidden!important; overflow:hidden!important; }
  header.ci-header.nav-open .ci-row.ci-row-nav{ display:block!important; max-height:2000px!important; opacity:1!important; visibility:visible!important; overflow:visible!important; }
}


/* Falls das Element beide Helper-Klassen hat (.ci-only-tablet & .ci-only-mobile) */
@media (max-width:767.98px){
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-mobile{ display:block !important; }
}
@media (min-width:768px) and (max-width:1023.98px){
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-tablet{ display:block !important; }
}

/* Container nicht kollabieren lassen */
#ci-header .ci-row.ci-row-nav .ci-container{
  overflow:visible !important;
  height:auto !important;
}

@media (min-width:1024px){
  #ci-header .ci-row.ci-row-nav.ci-only-desktop{ display:block!important; }
  #ci-header .ci-row.ci-row-nav.ci-only-tablet,
  #ci-header .ci-row.ci-row-nav.ci-only-mobile{ display:none!important; }
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-desktop{ display:block!important; }
}

@media (max-width:1023.98px){
  #ci-header .ci-row.ci-row-nav.ci-only-desktop,
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-desktop{ display:none!important; }

  /* Safety-Reset */
  #ci-header .ci-row.ci-row-nav,
  #ci-header.nav-open .ci-row.ci-row-nav{ display:none!important; }

  /* Gezieltes Öffnen */
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-tablet{ display:block!important; }
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-mobile{ display:block!important; }
}

/* === Mega Menu: nur Tablet/Mobil als "aufklappbarer Block" === */
@media (max-width:1023.98px){
  .ci-row.ci-row-nav .ci-nav__menu > li.ci-has-mega {
    position: relative;
  }
  /* Panel geschlossen standardmäßig */
  .ci-row.ci-row-nav .ci-nav__menu > li.ci-has-mega > .ci-mega {
    display: none;
    padding: 16px 0;
    border-top: 1px solid var(--ci-border, #e5e7eb);
  }
  /* geöffnet */
  .ci-row.ci-row-nav .ci-nav__menu > li.ci-has-mega.is-open > .ci-mega {
    display: block;
  }
  .ci-mega__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ci-mega__title{ font-weight:700; margin:8px 0; }
  .ci-mega__list{ list-style:none; margin:0; padding:0; }
  .ci-mega__list a{ display:block; padding:8px 0; text-decoration:none; }

  .ci-mega__bottom{
    display:flex; gap:12px; flex-wrap:wrap;
    margin-top:12px; padding-top:12px;
    border-top:1px solid var(--ci-border, #e5e7eb);
  }
  .ci-mega__iconlink{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px;
    background:rgba(0,0,0,.04); text-decoration:none; color:inherit;
  }
}

/* Desktop: Mega-Panel komplett ausblenden (du nutzt dort dein normales Menü) */
@media (min-width:1024px){
  .ci-nav__menu > li.ci-has-mega > .ci-mega{ display:none !important; }
}

/* Tablet & Mobil: Nav-Akkordeon standardmäßig zu, bei .nav-open auf */
@media (max-width:1023.98px){

  /* Nur die mobilen/tablet-Nav-Zeilen anvisieren */
  header.ci-header .ci-row.ci-row-nav.ci-only-tablet,
  header.ci-header .ci-row.ci-row-nav.ci-only-mobile{
    display: none !important;
  }

  header.ci-header.nav-open .ci-row.ci-row-nav.ci-only-tablet,
  header.ci-header.nav-open .ci-row.ci-row-nav.ci-only-mobile{
    display: block !important;
  }

  /* Sicherheit: Desktop-Nav auf kleinen Screens immer ausblenden */
  header.ci-header .ci-row.ci-row-nav.ci-only-desktop{
    display: none !important;
  }
}

/* Desktop: Verhalten NICHT durch .nav-open beeinflussen */
@media (min-width:1024px){
  /* Desktop-Nav bleibt, wie sie ist */
  header.ci-header .ci-row.ci-row-nav.ci-only-desktop{
    display: block;
  }
  /* Vorsichtshalber: Mobile/Tablet-Navs nicht anzeigen */
  header.ci-header .ci-row.ci-row-nav.ci-only-tablet,
  header.ci-header .ci-row.ci-row-nav.ci-only-mobile{
    display: none !important;
  }
}


/* ≥ 1024px: Desktop-Nav bleibt immer sichtbar und wird NICHT von .nav-open beeinflusst */
@media (min-width:1024px){
  #ci-header .ci-row.ci-row-nav.ci-only-desktop{
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Sicherheitshalber: Tablet/Mobile-Nav nie auf Desktop */
  #ci-header .ci-row.ci-row-nav.ci-only-tablet,
  #ci-header .ci-row.ci-row-nav.ci-only-mobile{
    display: none !important;
  }
}

/* ==== Sichtbarkeit Nav-Zeilen pro Breakpoint ==== */
@media (max-width:1023.98px){
  /* Desktop-Nav auf kleinen Screens nie zeigen */
  #ci-header .ci-row.ci-row-nav.ci-only-desktop{
    display: none !important;
  }
  /* Mobile/Tablet-Nav standardmäßig zu … */
  #ci-header .ci-row.ci-row-nav.ci-only-tablet,
  #ci-header .ci-row.ci-row-nav.ci-only-mobile{
    display: none !important;
  }
  /* … und nur bei .nav-open sichtbar */
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-tablet,
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-mobile{
    display: block !important;
  }
}
@media (min-width:1024px){
  /* Desktop-Nav bleibt wie gewohnt */
  #ci-header .ci-row.ci-row-nav.ci-only-desktop{
    display: block !important;
  }
  /* Sicherheitsnetz: Mobile/Tablet-Nav nie auf Desktop */
  #ci-header .ci-row.ci-row-nav.ci-only-tablet,
  #ci-header .ci-row.ci-row-nav.ci-only-mobile{
    display: none !important;
  }
}

/* ==== Mega-Panel nur auf Tablet/Mobil ==== */
@media (max-width:1023.98px){
  /* Grundlayout Mega */
  .ci-row.ci-row-nav .ci-nav__menu > li.ci-has-mega { position: relative; }

  /* zu (Default) */
  .ci-row.ci-row-nav .ci-nav__menu > li.ci-has-mega > .ci-mega{
    display: none;
    padding: 16px 0;
    border-top: 1px solid var(--ci-border, #e5e7eb);
    background: #fff;
  }

  /* offen */
  .ci-row.ci-row-nav .ci-nav__menu > li.ci-has-mega.is-open > .ci-mega{
    display: block;
  }

  /* Optik */
  .ci-mega__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ci-mega__title{ font-weight: 700; margin: 8px 0; }
  .ci-mega__list{ list-style: none; margin: 0; padding: 0; }
  .ci-mega__list a{ display: block; padding: 8px 0; text-decoration: none; color: inherit; }

  .ci-mega__bottom{
    display: flex; gap: 12px; flex-wrap: wrap;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--ci-border, #e5e7eb);
  }
  .ci-mega__iconlink{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 999px;
    background: rgba(0,0,0,.04); text-decoration: none; color: inherit;
  }
}

/* Desktop: Mega-Panel sicher nie sichtbar */
@media (min-width:1024px){
  .ci-nav__menu > li.ci-has-mega > .ci-mega{
    display: none !important;
  }
}

/* Sichtbarkeit der Tablet/Mobile-Nav nur, wenn .nav-open gesetzt ist */
@media (max-width:1023.98px){
  #ci-header .ci-row.ci-row-nav.ci-only-desktop { display: none !important; }
  #ci-header .ci-row.ci-row-nav.ci-only-tablet,
  #ci-header .ci-row.ci-row-nav.ci-only-mobile { display: none !important; }
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-tablet,
  #ci-header.nav-open .ci-row.ci-row-nav.ci-only-mobile { display: block !important; }

  /* WICHTIG: Mega-Panel standardmäßig zu … */
  #ci-header .ci-row.ci-row-nav .ci-nav__menu li.ci-has-mega .ci-mega {
    display: none !important;
  }
  /* … und bei .is-open sichtbar – nicht nur als direkter Kind-Selektor */
  #ci-header .ci-row.ci-row-nav .ci-nav__menu li.ci-has-mega.is-open .ci-mega {
    display: block !important;
  }

  /* Mega-Panel Optik & Layering */
  #ci-header .ci-row.ci-row-nav .ci-mega{
    position: relative;
    z-index: 1000;
    background: #fff;
    padding: 16px;
    border-top: 1px solid #e5e7eb;
  }
}

/* === Mega-Menu Lesbarkeit auf Tablet/Mobile === */
@media (max-width:1023.98px){
  /* Panel selbst dunkel texten */
  #ci-header .ci-row.ci-row-nav .ci-mega{
    color: var(--text) !important;
    background: #fff; /* bleibt weiß */
  }

  /* Links im Mega-Panel: dunkel statt weiß */
  #ci-header .ci-row.ci-row-nav .ci-mega a{
    color: var(--text) !important;
    text-decoration: none;
  }

  /* Hover im Mega-Panel: Marke, nicht weiß */
  #ci-header .ci-row.ci-row-nav .ci-mega a:hover{
    color: var(--brand) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Listentitel sicher dunkel */
  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__title{
    color: var(--text) !important;
  }

  /* Icon-Buttons unten: Text/Icon dunkel */
  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__iconlink{
    color: var(--text) !important;
    background: rgba(0,0,0,.04);
  }
  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__iconlink:hover{
    color: var(--brand) !important;
    background: rgba(0,0,0,.06);
  }
}

/* === Mega-Menu Styling: Borders + Titel-Farbe === */
@media (max-width:1023.98px){

  /* Trennlinien zwischen den Listeneinträgen */
  #ci-header .ci-row.ci-row-nav .ci-mega ul li {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 6px 0;
  }
  #ci-header .ci-row.ci-row-nav .ci-mega ul li:last-child {
    border-bottom: none; /* keine Linie beim letzten */
  }

  /* Titel wie "Kategorien" & "Service & Infos" in CI-Grün */
  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__title {
    color: #8AC33F !important;
    font-weight: 600;
    margin-bottom: 6px;
  }
}

/* === Mega Menu Buttons: Kontakt & Mein Konto === */
@media (max-width:1023.98px){
  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 6px;
    background-color: #8AC33F;
    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__actions a:hover {
    background-color: #76A835; /* dunkleres Grün für Hover */
  }

  /* Icons in Buttons weiß */
  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__actions svg {
    stroke: #FFFFFF;
    width: 18px;
    height: 18px;
  }
}

/* Mega-Menu Buttons: CI-Farben */
#ci-header .ci-mega .ci-btn {
  background-color: #8AC33F;
  color: #FFFFFF !important;   /* Text zwingend weiß */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .3s ease;
}

#ci-header .ci-mega .ci-btn *,
#ci-header .ci-mega .ci-btn a,
#ci-header .ci-mega .ci-btn span {
  color: #FFFFFF !important;   /* auch verschachtelte Texte weiß */
}

#ci-header .ci-mega .ci-btn svg {
  stroke: #FFFFFF !important;  /* Icon weiß */
  flex-shrink: 0;
}

/* Hover: etwas dunkler */
#ci-header .ci-mega .ci-btn:hover {
  background-color: #6fa12f !important;
  color: #FFFFFF !important;
}

#ci-header .ci-mega .ci-btn.ci-btn--primary{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:6px;
  background-color:#8AC33F; color:#FFFFFF !important;
  -webkit-text-fill-color:#FFFFFF !important;
  text-decoration:none !important; font-weight:600;
  transition: background .3s ease;
}
#ci-header .ci-mega .ci-btn.ci-btn--primary svg{
  stroke:#FFFFFF !important; width:18px; height:18px; flex-shrink:0;
}
#ci-header .ci-mega .ci-btn.ci-btn--primary *{
  color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;
}
#ci-header .ci-mega .ci-btn.ci-btn--primary:hover{
  background-color:#6FA12F;
}

/* ============ Mobile/Tablet Offcanvas Nav ============ */
@media (max-width: 1023.98px){
  /* Panel fixieren: oben/links, volle Breite/Höhe */
  #ci-header .ci-row.ci-row-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;               /* volle Viewport-Höhe */
    background: #fff;
    z-index: 1100;                 /* über Header */
    margin: 0;
    transform: translateY(-100%);  /* Start: außerhalb nach oben */
    transition: transform .3s ease;
    overflow: auto;                /* scrollen, wenn Inhalte lang sind */
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
  }
  /* bei offenem Header einfahren */
  #ci-header.nav-open .ci-row.ci-row-nav {
    transform: translateY(0);
  }

  /* Container-Innenabstände neutralisieren */
  #ci-header .ci-row.ci-row-nav .ci-container{
    max-width: none;     /* volle Breite */
    padding: 16px;       /* eigene weiche Ränder */
  }

  /* Optional: Body-Scroll sperren, wenn Nav offen */
  body.ci-nav-lock {
    overflow: hidden;
    touch-action: none;
  }

  /* "Menü schließen" – erstes List-Item */
  #ci-header .ci-row.ci-row-nav .ci-nav__menu > li.ci-close {
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin: 0 0 10px 0;
    padding: 6px 0 12px;
  }
  #ci-header .ci-row.ci-row-nav .ci-closebtn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 0;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 2px;
  }
  #ci-header .ci-row.ci-row-nav .ci-closebtn svg{
    width: 18px; height: 18px;
    stroke: currentColor;
  }

  /* Falls Desktop-Nav trotzdem sichtbar wird, hier nochmals absichern */
  #ci-header .ci-row.ci-row-nav.ci-only-desktop{
    display: none !important;
  }
}

/* Close-Zeile oben */
.ci-nav__menu > .ci-close {
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: .25rem .5rem .5rem;
  margin-bottom: .25rem;
}
.ci-closebtn {
  display:flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:14px;
  background:transparent; border:0; padding:.25rem 0; cursor:pointer;
}
.ci-closebtn svg { width:20px; height:20px; }

/* CTA-Buttons (Kontakt + Mein Konto) */
.ci-mega__cta { display:flex; gap:.5rem; margin-top:1rem; }
.ci-cta-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .85rem; border-radius:6px;
  text-decoration:none; font-weight:600; line-height:1;
}
.ci-cta-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }

.ci-cta-btn--contact,
.ci-cta-btn--account {
  background:#8AC33F; color:#fff;
}
.ci-cta-btn--contact:hover,
.ci-cta-btn--account:hover { filter:brightness(.95); }

/* Titles in CI-Grün */
.ci-mega__title { color:#8AC33F; font-weight:700; margin:0 0 .5rem; }
/* Feine Trenner zwischen LI-Elementen */
.ci-mega__list > li { border-bottom:1px solid rgba(0,0,0,.06); }
.ci-mega__list > li:last-child { border-bottom:0; }

/* SVG leicht ausrichten */
.ci-mega__close-item svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* Mega-Menü auf Tablet/Mobile scrollbar machen */
@media (max-width: 1024px) {
  /* Der sichtbare Container darf scrollen */
  .ci-mega {
    max-height: 88vh;               /* Platz unter Header/Browserleisten */
    overflow: auto;                  /* Scrollen erlauben */
    -webkit-overflow-scrolling: touch; /* Sanftes Scrollen iOS */
    overscroll-behavior: contain;    /* keine unerwünschten Seitenscrolls */
  }

  /* Grid-Inhalt passt sich der Scrollhöhe an */
  .ci-mega__grid {
    min-height: min-content;
  }
}

/* Optional: Scrollbar dezent (nur unterstützte Browser) */
.ci-mega::-webkit-scrollbar {
  width: 8px;
}
.ci-mega::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: 8px;
}

/* Mega-Menü: oben links fix verankern (nur Tablet/Mobile) */
@media (max-width: 1024px) {
  /* ggf. Container-Rand entfernen, damit wirklich links oben begonnen wird */
  .ci-row-nav .ci-container {
    padding-left: 0;
    padding-right: 0;
  }

  .ci-mega {
    position: fixed;
    top: 0;
    left: 0;
    /* volle Fläche einnehmen */
    width: 100vw;
    height: 100dvh;               /* dynamische Viewport-Höhe (Mobile sicher) */
    max-height: 100dvh;
    /* Scroll im Menü erlauben */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* über allem liegen */
    z-index: 9999;

    /* Hintergrund (an dein Design anpassen) */
    background: #fff;

    /* evtl. vorhandene Layout-Stile neutralisieren */
    margin: 0;
    border-radius: 0;
    box-shadow: none;

    /* sichere Ränder für Notch etc. */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Innenabstand für Inhalt (anpassen nach Bedarf) */
  .ci-mega__grid {
    padding: 16px;
    min-height: min-content;
  }

  /* „Menü schließen“-Zeile bleibt oben */
  .ci-mega__meta {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
  }

  .ci-mega__close-item a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    color: inherit;
    opacity: .85;
    padding: .5rem 0 .65rem;
    border-bottom: 1px solid rgba(0,0,0,.1);
  }

  .ci-mega__close-item a:hover,
  .ci-mega__close-item a:focus {
    opacity: 1;
  }

  .ci-mega__close-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }
}

/* Optional: Seite dahinter nicht scrollen, wenn Menü offen (Klasse wird per JS gesetzt) */
html.ci-mega-open,
body.ci-mega-open {
  overflow: hidden;
  touch-action: none;
}

/* ===== Mega-Menü: oben links fix, vollflächig und scrollbar (Mobile/Tablet) ===== */
/* Basis: Mega-Menü ist auf Mobile/Tablet standardmäßig unsichtbar und nimmt KEINEN Platz ein */
@media (max-width: 1024px) {
  .ci-mega {
    display: none;               /* nimmt keinen Platz ein, beseitigt das "Nach-unten-Schieben" */
  }
}

/* Nur im geöffneten Zustand als Fullscreen-Overlay oben links fixieren */
@media (max-width: 1024px) {
  html.ci-mega-open .ci-mega,
  body.ci-mega-open .ci-mega {
    display: block;
    position: fixed !important;
    inset: 0;                    /* top/right/bottom/left = 0 */
    width: 100vw;
    height: 100svh;              /* stabilere Viewport-Höhe auf Mobile */
    max-height: 100svh;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff;
    z-index: 10000;
    overflow-y: auto;            /* Menü selbst scrollt */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             calc(env(safe-area-inset-bottom) + 16px) env(safe-area-inset-left);
  }

  /* Der Grid-Inhalt braucht unten Platz für die CTA-Zeile */
  html.ci-mega-open .ci-mega__grid,
  body.ci-mega-open .ci-mega__grid {
    min-height: 100%;
    box-sizing: border-box;
    padding: 16px;
    padding-bottom: 88px;        /* ggf. an Höhe der unteren Buttons anpassen */
  }

  /* Untere Buttons stets sichtbar (oder einfach padding-bottom erhöhen, wenn du kein Sticky willst) */
  html.ci-mega-open .ci-mega__cta,
  body.ci-mega-open .ci-mega__cta {
    position: sticky;
    bottom: 0;
    padding: 12px 0;
    margin-top: 16px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.1);
  }
}

/* Seite dahinter nicht scrollen, wenn geöffnet */
html.ci-mega-open,
body.ci-mega-open {
  overflow: hidden;
  touch-action: none;
}


/* ================================================
   FIX: Prevent layout shift from .ci-row.ci-row-nav
   Cause: multiple 'display:block' toggles on nav-open
   Solution: Always keep nav row out of flow (fixed),
             always present (display:block), and show/hide
             ONLY via transform. Neutralize all earlier
             display toggles with higher-specificity + !important.
   ================================================ */
@media (max-width:1023.98px){
  /* Ensure the nav row is always present and fixed overlay */
  #ci-header .ci-row.ci-row-nav,
  header.ci-header .ci-row.ci-row-nav{
    display: block !important;          /* neutralize display:none/block toggles */
    position: fixed !important;         /* remove from normal flow */
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    background: #fff !important;
    z-index: 1100 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    transform: translateY(-100%) !important;      /* CLOSED by default */
    transition: transform .3s ease !important;
  }
  /* OPEN state uses transform only, not display */
  #ci-header.nav-open .ci-row.ci-row-nav,
  header.ci-header.nav-open .ci-row.ci-row-nav{
    transform: translateY(0) !important;
  }
  /* Container padding inside the overlay */
  #ci-header .ci-row.ci-row-nav .ci-container,
  header.ci-header .ci-row.ci-row-nav .ci-container{
    max-width: none !important;
    padding: 16px !important;
  }
  /* Desktop nav must never appear on mobile/tablet */
  #ci-header .ci-row.ci-row-nav.ci-only-desktop,
  header.ci-header .ci-row.ci-row-nav.ci-only-desktop{
    display: none !important;
  }
}

/* When overlay is open, prevent background from scrolling */
html.nav-open, body.nav-open{
  overflow: hidden !important;
  touch-action: none !important;
}

/* Überschreibt Inline-min-height (100vh / calc(100vh - 32px)) auf #page */
#page {
  min-height: auto !important;
}

.admin-bar #page {
  min-height: auto !important;
}

/* Sale-Badge nach links, damit nichts überlappt */
.wc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
}

/* Toast für Meldungen (unten mittig) */
.wishlist-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: rgba(51, 51, 51, 0.96);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999;
}

.wishlist-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
}

/* ===== Wishlist Seite ===== */

.ci-wishlist-page {
  padding: 3rem 1rem 4rem;
}

.ci-wishlist-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.ci-wishlist-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.ci-wishlist-header__left {
  max-width: 640px;
}

.ci-wishlist-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  text-decoration: none;
  color: #6b7280;
  margin-bottom: .75rem;
}

.ci-wishlist-back__iconwrap {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ci-wishlist-back__icon {
  width: 16px;
  height: 16px;
  fill: #6b7280;
}

.ci-wishlist-back:hover {
  color: var(--brand);
}

.ci-wishlist-back:hover .ci-wishlist-back__icon {
  fill: var(--brand);
}

.ci-wishlist-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.6rem;
  margin: 0 0 .25rem;
  color: #111827;
}

.ci-wishlist-title__iconwrap {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ecfdf3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ci-wishlist-title__icon {
  width: 18px;
  height: 18px;
  fill: var(--brand);
}

.ci-wishlist-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: .95rem;
}

/* Clear-Button rechts */

.ci-wishlist-header__right {
  display: flex;
  align-items: flex-start;
}

.ci-wishlist-clear {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: .4rem .9rem;
  font-size: .85rem;
  color: #374151;
  cursor: pointer;
}


.ci-wishlist-clear:hover {
  border-color: #f87171;
  color: #b91c1c;
}

.ci-wishlist-clear__icon{
  width: 16px;
  height: 16px;
  display: block;
  color: #9ca3af; /* Icon-Grau */
}

.ci-wishlist-clear__icon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.ci-wishlist-clear:hover .ci-wishlist-clear__icon{
  color: #ef4444; /* Hover-Rot */
}


/* Hinweis für Gäste */

.ci-wishlist-notice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: .75rem;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #1e3a8a;
  font-size: .9rem;
  margin-bottom: 1.75rem;
}

.ci-wishlist-notice__iconwrap {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #dbeafe;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ci-wishlist-notice__icon {
  width: 16px;
  height: 16px;
  fill: #1d4ed8;
}

/* Grid für Product Cards */

.ci-wishlist-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

/* Breakpoints ähnlich deinen Cards: */
@media (min-width: 640px) {
  .ci-wishlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ci-wishlist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Einzelne Card im Grid – nutzt deine bestehende .wc-card-Optik */

.ci-wishlist-item {
  position: relative;
}

/* Empty-State */

.ci-wishlist-empty {
  margin-top: 3rem;
  text-align: center;
}

.ci-wishlist-empty__icon {
  width: 48px;
  height: 48px;
  fill: #d1d5db;
  margin-bottom: .75rem;
}

.ci-wishlist-empty h2 {
  font-size: 1.4rem;
  margin-bottom: .25rem;
  color: #111827;
}

.ci-wishlist-empty p {
  color: #6b7280;
  font-size: .95rem;
  margin-bottom: 1.25rem;
}

.ci-wishlist-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: .9rem;
  text-decoration: none;
}

.ci-wishlist-empty__btn:hover {
  filter: brightness(1.08);
}

/* Mobile-Anpassungen */

@media (max-width: 767.98px) {
  .ci-wishlist-page {
    padding-top: 2rem;
  }

  .ci-wishlist-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .ci-wishlist-header__right {
    margin-top: .75rem;
  }
}

/* Wishlist Cards – Layout wie im Beispielbild */
.ci-wishlist-item {
  position: relative;
}

.ci-wishlist-item .wc-card__thumb {
  display: block;
  border-bottom: 1px solid #e5e7eb;
}

/* Body */
.ci-wishlist-card-body {
  padding: 1.25rem 1.25rem 1.5rem;
  background: #fff;
}

/* Titel */
.ci-wishlist-card-title {
  margin: 0 0 .75rem;
}
.ci-wishlist-card-title a {
  color: #111827;
  font-weight: 600;
  text-decoration: none;
}

/* Preis & Gesamt */
.ci-wishlist-price-group {
  margin-bottom: .9rem;
}
.ci-wishlist-price-main {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand);
}
.ci-wishlist-price-total {
  font-size: .9rem;
  color: #6b7280;
}

/* Menge-Zeile */
.ci-wishlist-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.ci-wishlist-qty-label {
  font-size: .9rem;
  color: #4b5563;
}
.ci-wishlist-qty-controls {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.ci-qty-input {
  width: 3rem;
  text-align: center;
  border-radius: .375rem;
  border: 1px solid #d1d5db;
  padding: .2rem .25rem;
  font-size: .9rem;
}
.ci-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: .375rem;
  border: 1px solid #d1d5db;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.ci-qty-btn:hover {
  border-color: var(--brand);
}

/* Add-to-Cart Button im Wishlist-Card */
.ci-wishlist-addtocart-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: var(--brand);
  color: #fff;
  border-radius: .5rem;
  border: 0;
  padding: .6rem 1rem;
  font-size: .95rem;
  cursor: pointer;
}
.ci-wishlist-addtocart-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.ci-wishlist-addtocart-btn:hover {
  filter: brightness(1.05);
}

/* =========================
   Wishlist-Seite: Entfernen-Button (Mülleimer)
   ========================= */

.page-template-wishlist .wc-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 7;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #ef4444;              /* Rot wie im Screenshot */
  border: 0;
  display: flex !important;         /* sicherstellen, dass er angezeigt wird */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* Outline-Mülleimer im roten Kreis */
.page-template-wishlist .wc-card__wishlist-icon {
  width: 18px;
  height: 18px;
  fill: none !important;            /* nicht füllen */
  stroke: #ffffff !important;       /* weiße Kontur */
  stroke-width: 2;
}

/* === Wishlist Fixes === */

/* -- und + sichtbar machen */
.ci-qty-btn {
  color: #374151 !important;
  font-weight: 600;
}

/* Für SVG-Icon-Buttons ggf. */
.ci-qty-btn--minus::before,
.ci-qty-btn--plus::before {
  color: #374151 !important;
}

/* Mülleimer rechts oben */
.ci-wishlist-page .wc-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 7;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* Mülleimer Outline statt gefüllt */
.ci-wishlist-page .wc-card__wishlist-icon {
  width: 18px;
  height: 18px;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2;
}

/* Menge-Buttons: Text sichtbar */
.ci-qty-btn {
  color: #374151 !important;
  font-weight: 600;
}

/* Mülleimer-Button rechts oben */
.ci-wishlist-page .wc-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;   /* rechts statt links */
  left: auto;
  z-index: 7;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #ef4444;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* SVG als Outline: nur Kontur weiß, kein Fill */
.ci-wishlist-page .wc-card__wishlist-icon {
  width: 18px;
  height: 18px;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2;
}

/* Wishlist-Seite: Entfernen-Button (Mülleimer) */
.page-template-wishlist .wc-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  z-index: 7;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #ef4444;        /* ROT */
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}

/* Mülleimer-Icon: weiße Kontur */
.page-template-wishlist .wc-card__wishlist-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
}

/* "Alles in den Warenkorb" – primärer Button im Header */
.ci-wishlist-add-all {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.3rem;
  border-radius: 999px;
  border: 0;
  background: var(--brand);
  color: #fff;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: .75rem;
}

.ci-wishlist-add-all__icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.ci-wishlist-add-all:hover {
  filter: brightness(1.05);
}


/* =========================
   Warenkorb Seite (Cart)
   ========================= */


.ci-cart-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Header */

.ci-cart-header {
  margin-bottom: 2rem;
}

.ci-cart-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  text-decoration: none;
  color: #6b7280;
  margin-bottom: .75rem;
}

.ci-cart-back__iconwrap {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ecfdf3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ci-cart-back__icon {
  width: 16px;
  height: 16px;
  fill: #4b5563;
}

.ci-cart-back:hover {
  color: var(--brand);
}

.ci-cart-title {
  font-size: 2.2rem;
  margin: 0 0 .25rem;
  color: #111827;
}

.ci-cart-subtitle {
  margin: 0;
  font-size: .95rem;
  color: #6b7280;
}

/* Layout-Spalten */

.ci-cart-main {
  min-width: 0;
}

.ci-cart-sidebar {
  min-width: 0;
}

/* Cart Items */

.ci-cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ci-cart-item {
  padding: 1rem 1.25rem;
}

.ci-cart-item__inner {
  display: flex;
  gap: 1rem;
}

.ci-cart-item__thumb {
  flex: 0 0 110px;
  max-width: 110px;
  border-radius: .75rem;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ci-cart-item__thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
  padding: .5rem;
}

.ci-cart-item__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .75rem;
}

.ci-cart-item__title {
  font-size: 1rem;
  margin: 0 0 .25rem;
}

.ci-cart-item__title a {
  color: #111827;
  text-decoration: none;
}

.ci-cart-item__price-single {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand);
}

/* Untere Zeile: Menge, Entfernen, Zwischensumme */

.ci-cart-item__bottom {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Woo Menge-Input optisch anpassen */

.ci-cart-item__qty .quantity {
  display: inline-flex;
  align-items: center;
  border-radius: .5rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.ci-cart-item__qty .quantity input.qty {
  width: 3rem;
  text-align: center;
  border: 0;
  padding: .4rem .25rem;
  font-size: .95rem;
}

/* Entfernen-Icon */

.ci-cart-item__remove {
  margin-left: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: #ef4444;
}

.ci-cart-item__remove-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ef4444;
  stroke-width: 2;
}

.ci-cart-item__remove:hover {
  background: #fee2e2;
}

/* Zwischensumme pro Position */

.ci-cart-item__subtotal {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 600;
}

/* Versteckter Update-Button */

.ci-cart-update-hidden {
  display: none;
}

/* Bestellübersicht / Sidebar */

.ci-cart-summary {
  margin-top: 4.6rem; /* Ausrichtung mit Header der linken Spalte */
  padding: 1.25rem 1.5rem 1.5rem;
}

.ci-cart-summary__header h2 {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
  color: #111827;
}

.ci-cart-summary__body {
  font-size: .95rem;
}

.ci-cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}

.ci-cart-summary__label {
  color: #6b7280;
}

.ci-cart-summary__value {
  font-weight: 600;
}

.ci-cart-summary__row--total {
  margin-top: .5rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.ci-cart-summary__total .woocommerce-Price-amount {
  font-size: 1.35rem;
  color: var(--brand);
}

.ci-cart-summary__divider {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 1rem 0;
}

.ci-cart-summary__note {
  font-size: .75rem;
  color: #9ca3af;
  margin: .4rem 0 0;
}

/* Buttons in Sidebar */

.ci-cart-summary__footer {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.ci-cart-summary__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem 1rem;
  border-radius: .5rem;
  text-decoration: none;
  font-size: .95rem;
}

.ci-cart-summary__btn--primary {
  background: var(--brand);
  color: #fff;
  border: 0;
}

.ci-cart-summary__btn--primary:hover {
  filter: brightness(1.05);
}

.ci-cart-summary__btn--secondary {
  border: 1px solid #e5e7eb;
  color: #111827;
  background: #fff;
}

.ci-cart-summary__btn--secondary:hover {
  background: #f9fafb;
}

/* Trust Badges */

.ci-cart-badges {
  margin-top: 1rem;
  padding: 1rem 1.5rem 1.25rem;
}

.ci-cart-badges__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ci-cart-badges__list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #4b5563;
  margin-bottom: .4rem;
}

.ci-cart-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
}

/* Leerer Warenkorb */

.ci-cart-empty {
  padding: 2.5rem 1rem;
  text-align: center;
}

.ci-cart-empty__inner {
  max-width: 360px;
  margin: 0 auto;
}

.ci-cart-empty__icon {
  width: 48px;
  height: 48px;
  fill: #d1d5db;
  margin-bottom: 1rem;
}

.ci-cart-empty h2 {
  font-size: 1.4rem;
  margin-bottom: .4rem;
}

.ci-cart-empty p {
  font-size: .95rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.ci-cart-empty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.4rem;
  border-radius: .5rem;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
}

/* Responsive */

@media (max-width: 1023.98px) {
  .ci-cart-summary {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .ci-cart-page {
    padding-top: 2rem;
  }
  .ci-cart-item__inner {
    flex-direction: row;
  }
}

/* Mengen-Buttons */
.ci-qty {
  display: inline-flex;
  align-items: center;
  border-radius: .5rem;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  background: #fff;
}

.ci-qty-input {
  width: 3rem;
  text-align: center;
  border: 0;
  padding: .35rem .25rem;
  font-size: .9rem;
}

.ci-qty-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-right: 1px solid #e5e7eb;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  color: #374151;
}
.ci-qty-btn:last-child {
  border-right: 0;
  border-left: 1px solid #e5e7eb;
}
.ci-qty-btn:hover {
  background: #f3f4f6;
}

/* =========================
   Warenkorb Items – responsive
   ========================= */

.ci-cart-item {
  width: 100%;
  box-sizing: border-box;
}

/* Basis: Bild links, Text rechts */
.ci-cart-item__inner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Bildbereich */
.ci-cart-item__thumb {
  flex: 0 0 110px;
  max-width: 110px;
  border-radius: .75rem;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Content füllt den Rest */
.ci-cart-item__content {
  flex: 1 1 auto;
  min-width: 0;               /* wichtig, damit Text nicht rausläuft */
}

/* Titel darf umbrechen */
.ci-cart-item__title {
  margin: 0 0 .25rem;
  font-size: 1rem;
  overflow-wrap: break-word;
}

/* Mobile: Bild über Text stapeln */
@media (max-width: 640px) {
  .ci-cart-item__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .ci-cart-item__thumb {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
    justify-content: center;
    margin-bottom: .75rem;
  }

  .ci-cart-item__content {
    flex: 0 0 auto;
  }
}

/* ============================================
   CART – ENDGÜLTIGES LAYOUT
   ============================================ */

/* Hauptcontainer: oben/unten Abstand */
.ci-cart-page {
  padding: 3rem 0 4rem;
}

/* Header + Grid bekommen die gleiche Breite/Einfassung */
.ci-cart-page .ci-cart-header,
.ci-cart-page .ci-cart-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* --------------------------------------------
   1) HEADER = FLEX-ROW (Zeile)
   -------------------------------------------- */
.ci-cart-page .ci-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  flex-wrap: wrap;              /* falls mobile, umbrechen */
  gap: 1rem;

  margin-bottom: 2rem;
}

/* Linke Hälfte (Zurück-Button) */
.ci-cart-header-left {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Rechte Hälfte (Titel + Artikelanzahl) */
.ci-cart-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* --------------------------------------------
   2) GRID darunter (Items + Sidebar)
   -------------------------------------------- */
.ci-cart-page .ci-cart-inner {
  display: block;
  gap: 2rem;
}

/* Grundlayout: einspaltig */
.ci-cart-page .ci-cart-main,
.ci-cart-page .ci-cart-sidebar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Desktop: 2-Spalten-Grid */
@media (min-width: 1024px) {
  .ci-cart-page .ci-cart-inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 2rem;
    align-items: flex-start;
  }
}
/* ============================================
   CART – Struktur: Header oben, Grid darunter
   ============================================ */

/* ci-cart-page wird Flex-Container in Spaltenrichtung */
.ci-cart-page {
  display: flex;
  flex-direction: column;
  padding: 3rem 0 4rem;
}

/* Header und Grid haben die gleiche Breite/Einfassung */
.ci-cart-page .ci-cart-header,
.ci-cart-page .ci-cart-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Header steht über dem Grid, nur noch Titel + Untertitel links */
.ci-cart-page .ci-cart-header {
  order: -1;            /* bleibt, damit der Header oben steht */
  display: block;       /* kein Flex mehr nötig */
  margin-bottom: 2rem;
}


/* Grid für Items + Sidebar */
.ci-cart-page .ci-cart-inner {
  order: 0;                          /* bleibt unter dem Header */
  display: block;
  gap: 2rem;
}

/* Basis: einspaltig */
.ci-cart-page .ci-cart-main,
.ci-cart-page .ci-cart-sidebar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Desktop: 2-Spalten-Grid */
@media (min-width: 1024px) {
  .ci-cart-page .ci-cart-inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 2rem;
    align-items: flex-start;
  }
}

/* Erste Card in Main + Sidebar soll oben bündig starten */
.ci-cart-main .wc-card:first-child,
.ci-cart-sidebar .wc-card:first-child {
  margin-top: 0;
}

/* Sicherheitshalber auch die Summary selbst kein extra Top-Margin */
.ci-cart-summary {
  margin-top: 0;
}

/* Steps-Navigation */
.ci-checkout-steps-nav {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
}

.ci-step-nav-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  color: #6b7280;
  font-size: .95rem;
}

.ci-step-nav-item.is-active {
  color: #111827;
  font-weight: 600;
}

.ci-step-nav-badge {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  background: var(--brand, #8ac33f);
  color: #fff;
}

/* Step Cards */
.ci-step-card {
  margin-bottom: 1.5rem;
}

.ci-step-title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.ci-checkout-step {
  display: none;
}

.ci-checkout-step.is-active {
  display: block;
}

/* Zwei Spalten für Rechnungs-/Lieferadresse */
.ci-step-two-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ci-step-two-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.ci-step-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* Sidebar Badges */
.ci-checkout-badges__list {
  list-style: none;
  margin: 0;
  padding: 1rem 1.25rem;
  font-size: .9rem;
}

.ci-checkout-badges__list li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
}

.ci-checkout-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand, #8ac33f);
}

/* Sidebar ausblenden, wenn Klasse gesetzt */
.ci-checkout-sidebar--hidden {
  display: none;
}

/* Basis für alle Checkout-Buttons (nur visuell, Woo nutzt .button) */
.ci-step-actions .button {
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Weiter-Button: grün wie Produkt-Buttons */
.ci-step-next {
  background: #8ac33f;         /* deine Brand-Farbe */
  color: #fff;
  border-color: #8ac33f;
}

.ci-step-next:hover {
  background: #7ab535;
  border-color: #7ab535;
}

/* Zurück-Button: „Ghost“ / Outlined */
.ci-step-prev {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.ci-step-prev:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* Buttons rechts ausrichten mit etwas Abstand */
.ci-step-actions {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
/* Formular-Layout innerhalb der Step-Cards */
.ci-step-card .woocommerce-billing-fields__field-wrapper,
.ci-step-card .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.5rem;
}

/* Zwei Spalten auf größeren Screens */
@media (min-width: 768px) {
  .ci-step-card .woocommerce-billing-fields__field-wrapper,
  .ci-step-card .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Felder, die volle Breite brauchen */
  .ci-step-card .form-row-wide {
    grid-column: 1 / -1;
  }
}

/* Einzelne Form-Reihen neutralisieren */
.ci-step-card .form-row {
  margin: 0;
}

/* Labels */
.ci-step-card .form-row label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #374151;
}

/* Inputs / Selects / Textareas */
.ci-step-card .input-text,
.ci-step-card select,
.ci-step-card textarea {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  padding: 0.6rem 0.75rem;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: none;
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Fokuszustand */
.ci-step-card .input-text:focus,
.ci-step-card select:focus,
.ci-step-card textarea:focus {
  outline: none;
  border-color: #8ac33f;
  box-shadow: 0 0 0 1px rgba(138, 195, 63, 0.4);
}

/* Fehlermeldungen */
.ci-step-card .woocommerce-invalid .input-text,
.ci-step-card .woocommerce-invalid select,
.ci-step-card .woocommerce-invalid textarea {
  border-color: #f97373;
}

.ci-step-card .woocommerce-error,
.ci-step-card .woocommerce-invalid .woocommerce-error {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #b91c1c;
}

/* =======================================
   CHECKOUT – STEP-BUTTONS IM CI-LAYOUT
   ======================================= */

/* Basis-Stil für alle Step-Buttons */
.ci-checkout-form .ci-step-actions .button {
  --_brand: var(--brand, #8AC33F);

  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 100%;

  margin: .5em 0;
  padding: 10px 12px;

  border-radius: 8px;
  border: none;
  box-shadow: none;

  font-size: 100%;
  line-height: 1.3;
  font-weight: 600;
  white-space: normal;

  text-align: center;
  text-decoration: none !important;
  text-shadow: none;

  transition: filter 0.15s, transform 0.03s;
}

/* PRIMARY – „Weiter“-Button (grün wie Produktkarten) */
.ci-checkout-form .ci-step-actions .ci-step-next.button {
  background: var(--_brand) !important;
  color: #fff !important;
  border: none !important;
}

/* Hover-Effekt wie bei Product Card (leicht dunkler) */
.ci-checkout-form .ci-step-actions .ci-step-next.button:hover {
  filter: brightness(0.95);
}

/* SECONDARY – „Zurück“-Button, gleiche Form aber neutral */
.ci-checkout-form .ci-step-actions .ci-step-prev.button {
  background: #ffffff !important;
  color: var(--wp--preset--color--text, #333333) !important;
  border: 1px solid var(--ast-border-color, #E5E5E5) !important;
}

/* Hover für Zurück-Button */
.ci-checkout-form .ci-step-actions .ci-step-prev.button:hover {
  background: #f3f4f6 !important;
}

/* Buttons nebeneinander anordnen, rechts ausgerichtet */
.ci-checkout-form .ci-step-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Auf sehr schmalen Screens Buttons untereinander */
@media (max-width: 480px) {
  .ci-checkout-form .ci-step-actions .button {
    width: 100%;
  }
}

/* =======================================
   CHECKOUT – FELDER IM CI-LAYOUT
   ======================================= */

.ci-checkout-form .ci-step-card .form-row {
  margin: 0 0 1rem;
}

/* Labels */
.ci-checkout-form .ci-step-card .form-row label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #374151;
}

/* Grundstil für Input, Select, Textarea */
.ci-checkout-form .ci-step-card .input-text,
.ci-checkout-form .ci-step-card select,
.ci-checkout-form .ci-step-card textarea {
  width: 100%;
  height: auto;

  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;

  font-size: 0.95rem;
  line-height: 1.4;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  color: #666;

  background-color: #fff;
  box-shadow: none;
  outline: none;

  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Speziell für Select – Pfeil wie im Referenz-Stil */
.ci-checkout-form .ci-step-card select {
  background-color: var(--ast-comment-inputs-background, #FAFAFA);
  background-image: url("data:image/svg+xml,%3Csvg class='ast-arrow-svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='26px' height='16.043px' fill='%234B4F58' viewBox='57 35.171 26 16.043' enable-background='new 57 35.171 26 16.043' xml:space='preserve' %3E%3Cpath d='M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: .8em;
  background-position: 98% 50%;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Fokuszustand – grüner Rahmen wie bei dir */
.ci-checkout-form .ci-step-card .input-text:focus,
.ci-checkout-form .ci-step-card select:focus,
.ci-checkout-form .ci-step-card textarea:focus {
  border-color: #69bf29;
  box-shadow: 0 0 0 1px rgba(105, 191, 41, 0.35);
}

/* Fehlerzustand */
.ci-checkout-form .ci-step-card .woocommerce-invalid .input-text,
.ci-checkout-form .ci-step-card .woocommerce-invalid select,
.ci-checkout-form .ci-step-card .woocommerce-invalid textarea {
  border-color: #dc3545;
  box-shadow: 0 0 0 1px rgba(220,53,69,0.25);
}

/* Grid-Anordnung für die Felder – 2 Spalten wie im Referenz-Layout */
.ci-checkout-form .ci-step-card .woocommerce-billing-fields__field-wrapper,
.ci-checkout-form .ci-step-card .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.5rem;
}

@media (min-width: 768px) {
  .ci-checkout-form .ci-step-card .woocommerce-billing-fields__field-wrapper,
  .ci-checkout-form .ci-step-card .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ci-checkout-form .ci-step-card .form-row-wide {
    grid-column: 1 / -1; /* volle Breite für Straße, Land, etc. */
  }
}

/* Blöcke für Rechnungs- & Lieferadresse untereinander */
.ci-checkout-form .ci-step-card .ci-step-block {
  margin-bottom: 2rem;
}

.ci-checkout-form .ci-step-card .ci-step-block:last-child {
  margin-bottom: 0;
}

/* Titel "Rechnungsadresse" etwas absetzen */
.ci-checkout-form .ci-step-block--billing h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}

/* Shipping-Block: kleiner Abstand oberhalb der Woo-Überschrift/Checkbox */
.ci-checkout-form .ci-step-block--shipping {
  margin-top: 1rem;
}

/* Checkout: Hauptspalte voll nutzen */
.ci-checkout-form .ci-step-card {
  width: 100%;
  max-width: 100%;
}

/* Falls Woo/Astra noch 2-Spalten-Layout über col2-set erzwingen: neutralisieren */
.ci-checkout-form .col2-set {
  display: block;
  width: 100%;
  max-width: 100%;
}

.ci-checkout-form .col2-set .col-1,
.ci-checkout-form .col2-set .col-2 {
  width: 100%;
  float: none;
  padding: 0;
}

/* Basis: einspaltig (Mobile / Tablet) */
.ci-checkout-form .ci-step-card .woocommerce-billing-fields__field-wrapper,
.ci-checkout-form .ci-step-card .woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 1.5rem;
}

/* Desktop: 2 Spalten */
@media (min-width: 768px) {
  .ci-checkout-form .ci-step-card .woocommerce-billing-fields__field-wrapper,
  .ci-checkout-form .ci-step-card .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Felder, die über die ganze Zeile gehen sollen */
  .ci-checkout-form .ci-step-card .form-row-wide {
    grid-column: 1 / -1;
  }
}

/* Woo-Standard-Floats für form-row-first/last ausschalten,
   damit das Grid die Breiten steuert */
.ci-checkout-form .ci-step-card .form-row-first,
.ci-checkout-form .ci-step-card .form-row-last {
  float: none;
  width: auto;
}

/* Standard: einspaltig (Mobile & auch Desktop, wenn .ci-checkout-layout--single gesetzt ist) */
.ci-checkout-layout--single {
  display: block;
}

/* === CI Checkout Layout – final & robust === */

.ci-checkout-page {
  padding: 3rem 0 4rem;
}

.ci-checkout-header {
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

/* Standard: EINSPALTIG */
.ci-checkout-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: block !important;
  box-sizing: border-box;
}

/* Haupt- und Sidebar-Spalte im Standard immer untereinander */
.ci-checkout-main,
.ci-checkout-sidebar {
  float: none !important;
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

/* Sidebar ausblenden, wenn Hidden-Klasse gesetzt ist (Steps 1–2) */
.ci-checkout-sidebar--hidden {
  display: none !important;
}


/* Checkout-Formular auf volle Breite ziehen */
.woocommerce-checkout form.ci-checkout-form.checkout {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;           /* evtl. von Astra gesetzte Margins killen */
  box-sizing: border-box;
}

/* Sicherheitshalber auch jede evtl. Woo-/Astra-Regel für das Standard-Formular aushebeln */
.woocommerce-checkout form.checkout {
  width: 100% !important;
  max-width: 100% !important;
}

/* Der Container selbst bleibt wie gehabt auf 1200px begrenzt */
.ci-checkout-page.ast-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* === Schritt 1: Login / Gast / Express === */

.ci-login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* IMMER eine Spalte */
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.ci-login-card {
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--ast-border-color, #E5E5E5);
  background-color: #fff;
}

.ci-login-card__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.ci-login-card__subtitle {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #6b7280;
}

.ci-login-card__field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #374151;
}

.ci-login-card__field .input-text {
  width: 100%;
}

/* Schritt-Buttons innerhalb der Karten */
.ci-step-actions--inline {
  margin-top: 1rem;
  justify-content: flex-start;
}

/* Express-Bereich */
.ci-login-express {
  margin-top: 0.5rem;
  text-align: center;
}

.ci-login-express__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.ci-login-express__line {
  flex: 1 1 auto;
  height: 1px;
  background-color: #e5e7eb;
}

.ci-login-express__label {
  white-space: nowrap;
}

/* „oder direkt zahlen mit“ zentrieren (falls noch nicht vorhanden) */
.ci-login-express {
  margin-top: 0.75rem;
  text-align: center;
}



/* Login-Button in der rechten Karte wie CI-Primary-Button */
.ci-login-card--customer .woocommerce-form-login__submit {
  --_brand: var(--brand, #8AC33F);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;

  padding: 10px 12px;
  border-radius: 8px;
  border: none !important;

  background: var(--_brand) !important;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none !important;

  transition: filter 0.15s, transform 0.03s;
}

.ci-login-card--customer .woocommerce-form-login__submit:hover {
  filter: brightness(0.95);
}

/* === Anmelden-Button CI Style === */
.woocommerce-form-login__submit {
    border-radius: 8px !important; 
    background: var(--brand) !important;
    color: #fff !important;
    padding: 10px 12px !important;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none !important;
    box-shadow: none !important;
    transition: filter 0.15s ease, transform 0.03s ease;
}

.woocommerce-form-login__submit:hover {
    filter: brightness(1.05);
}

/* === PayPal Express Button – Bild als Background, gegen alle .button-Styles abgesichert === */
.ci-checkout-paypal-btn {
    display: block;
    width: 260px;
    height: 48px;
    margin: 12px auto 0;
    border-radius: 6px;
    border: none;
    cursor: pointer;

    /* EIN Shorthand, das alles setzt – mit !important, damit es jedes .button-Background überstimmt */
    background: transparent url('https://test.automatische-gartenberegnung.de/wp-content/uploads/2025/12/paypal-express-medium-de-2x-build.avif')
                 no-repeat center / contain !important;

    transition: transform 0.15s ease, filter 0.15s ease;
}

/* Hover-Effekt wie NBB */
.ci-checkout-paypal-btn:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
}

.ci-checkout-paypal-btn:active {
    transform: translateY(0);
    filter: brightness(0.92);
}

/* === STEP 2 Layout: Adresse + Bestellübersicht === */

.ci-step-2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .ci-step-2-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
    align-items: flex-start;
  }
}

.ci-step-2-summary-card {
  padding: 1.25rem 1.5rem;
}

/* Überschrift für die Bestellübersicht */
.ci-step-2-summary-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

/* readonly Cart-Items in Step 2 */
.ci-cart-items--readonly .ci-cart-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e5e7eb;
}

.ci-cart-items--readonly .ci-cart-item:last-child {
  border-bottom: none;
}

.ci-cart-item--readonly {
  display: flex;
  gap: 0.75rem;
}

.ci-cart-item--readonly .ci-cart-item__thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}

.ci-cart-item--readonly .ci-cart-item__content {
  flex: 1;
}

.ci-cart-item--readonly .ci-cart-item__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.ci-cart-item--readonly .ci-cart-item__meta {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.ci-cart-item--readonly .ci-cart-item__price {
  font-size: 0.95rem;
  font-weight: 600;
}

/* Totals-Box in Step 2 */
.ci-step-2-totals.ci-cart-summary {
  margin-top: 1rem;
}

.ci-cart-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ci-cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  padding: 0.25rem 0;
}

.ci-cart-summary__row--total {
  border-top: 1px solid #e5e7eb;
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  font-weight: 700;
}

.ci-cart-summary__label {
  color: #4b5563;
}

.ci-cart-summary__value {
  color: #111827;
}

/* === STEP 3 Layout – links Payments, rechts Zusammenfassung === */
.ci-step-3-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .ci-step-3-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
    align-items: flex-start;
  }
}


/* Zahlungsarten als Karten im CI-Layout */
.ci-payment-methods .wc_payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* jedes li.wc_payment_method als Grid:
   Zeile 1: Radio + Label
   Zeile 2: Info-Box (payment_box) */
.ci-payment-methods .wc_payment_method {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "radio label"
    ".     box";
  column-gap: 0.75rem;
  row-gap: 0.5rem;

  padding: 1rem;
  margin-bottom: 1.25rem !important;          /* extra Abstand zwischen den Karten */

  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);

  cursor: pointer;
}

/* Radio links */
.ci-payment-methods .wc_payment_method > input.input-radio {
  grid-area: radio;
  margin: 0;
  align-self: center;
}

/* Label rechts daneben */
.ci-payment-methods .wc_payment_method > label {
  grid-area: label;
  margin: 0;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
}

/* PayPal-Icon im Label */
.ci-payment-icon {
  display: inline-block;
  max-height: 24px;
  vertical-align: middle;
}

/* Info-Box unter dem Label (eigene Zeile) */
.ci-payment-methods .wc_payment_method .payment_box {
  grid-area: box;
  width: 100%;

  background: #f3f4f6;
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  color: #4b5563;
}

/* Ausgewählte Karte hervorheben */
.ci-payment-methods .wc_payment_method--selected {
  border-color: var(--brand, #8AC33F);
  box-shadow: 0 0 0 1px rgba(138,195,63,0.15), 0 10px 24px rgba(0,0,0,0.06);
}


/* Alte Checkout-Payment-Sidebar komplett verstecken */
.ci-checkout-sidebar .woocommerce-checkout-payment,
.ci-checkout-sidebar .wc_payment_methods,
.ci-checkout-sidebar h2,
.ci-checkout-sidebar h3 {
  display: none !important;
}


/* Checkout-Sidebar für Schritt 3 komplett ausblenden */
.ci-checkout-step[data-step="3"].is-active ~ .ci-checkout-sidebar {
    display: none !important;
}

/* Checkout-Layout immer einspaltig (Sidebar ist ja entfernt) */
@media (min-width: 1024px) {
  .ci-checkout-layout {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }
}

/* Checkout „Jetzt kaufen“-Button im CI-Stil wie ci-step-next */
#place_order.button,
.button.alt#place_order {
  --_brand: var(--brand, #8AC33F);

  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 1rem;
  margin-bottom: 0;

  border-radius: 8px;
  border: none;
  background: var(--_brand) !important;

  font-weight: 600;
  font-size: 1rem;
  color: #fff !important;
  text-decoration: none !important;

  padding: 10px 12px;
  gap: 8px;

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

#place_order.button:hover,
.button.alt#place_order:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}

#place_order.button:active,
.button.alt#place_order:active {
  transform: translateY(0);
  filter: brightness(0.92);
}

/* CI-konforme Payment-Box – ohne grauen Hintergrund */
.ci-payment-methods .payment_box {
    background: transparent !important; /* keine Hinterlegung */
    border: none !important;
    padding: 0.75rem 1rem !important;
    margin-top: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #333; /* CI Textfarbe */
}


/* Nur wenn die Karte explizit markiert ist, Box anzeigen */
.ci-payment-methods .wc_payment_method--show-box .payment_box {
  display: block;
}

/* Pfeile der WooCommerce-Zahlungsboxen entfernen */
.ci-payment-methods .payment_box::before,
.ci-payment-methods .payment_box::after {
    display: none !important;
    content: none !important;
}

/* Gemeinsame Karten-Optik für Versand + Zahlung */
.ci-shipping-methods .wc_shipping_method,
.ci-payment-methods .wc_payment_method {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "radio label"
    ".     box";
  column-gap: 0.75rem;
  row-gap: 0.5rem;

  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;

  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);

  cursor: pointer;
}

/* Radio links */
.ci-shipping-methods .wc_shipping_method > input.input-radio,
.ci-payment-methods .wc_payment_method > input.input-radio {
  grid-area: radio;
  margin: 0;
  align-self: center;
}

/* Label rechts */
.ci-shipping-methods .wc_shipping_method > label,
.ci-payment-methods .wc_payment_method > label {
  grid-area: label;
  margin: 0;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Versand-Kosten im Label rechts ausrichten */
.ci-shipping-label {
  flex: 1;
}
.ci-shipping-cost {
  margin-left: 0.75rem;
  white-space: nowrap;
}

/* Info-Boxen für Versand / Zahlung */
.ci-shipping-methods .shipping_box,
.ci-payment-methods .payment_box {
  grid-area: box;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #333;
  background: transparent;
  border-radius: 0.5rem;
}

/* Standardmäßig ausblenden – nur bei aktiver Methode einblenden */
.ci-shipping-methods .shipping_box,
.ci-payment-methods .payment_box {
  display: none;
}

/* Aktive Karte hervorheben */
.ci-shipping-methods .wc_shipping_method--selected,
.ci-payment-methods .wc_payment_method--selected {
  border-color: var(--brand, #8AC33F);
  box-shadow: 0 0 0 1px rgba(138,195,63,0.15), 0 10px 24px rgba(0,0,0,0.06);
}

/* Nur bei aktiv gesetzter Klasse Box anzeigen */
.ci-shipping-methods .wc_shipping_method--show-box .shipping_box,
.ci-payment-methods .wc_payment_method--show-box .payment_box {
  display: block;
}

/* Pfeile / Deko von WooCommerce unterdrücken */
.ci-shipping-methods .shipping_box::before,
.ci-shipping-methods .shipping_box::after,
.ci-payment-methods .payment_box::before,
.ci-payment-methods .payment_box::after {
  content: none !important;
  display: none !important;
}

/* Abstand zwischen den einzelnen Zahlungsarten-Karten */
.ci-payment-methods .wc_payment_methods > li {
  margin-bottom: 1rem;
}
.ci-payment-methods .wc_payment_methods > li:last-child {
  margin-bottom: 0;
}

/* Versandarten im gleichen Card-Look wie Zahlungsarten */
.ci-shipping-methods #shipping_method li {
  list-style: none;
  margin: 0 0 1rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ci-shipping-methods #shipping_method li:last-child {
  margin-bottom: 0;
}

.ci-shipping-methods #shipping_method li input[type="radio"] {
  margin-right: 0.75rem;
}

/* Zahlungsarten-Karten optisch angleichen */
.ci-payment-methods .wc_payment_methods > li {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Label & Inhalt sauber umbrechen */
.ci-payment-methods .wc_payment_methods > li > label {
  flex: 1 1 auto;
  margin: 0;
}

/* Radio-Buttons links bündig */
.ci-payment-methods .wc_payment_methods > li > input[type="radio"] {
  margin: 0 0.75rem 0 0;
}

/* Payment-Info-Boxen CI-konform, ohne Pfeil und ohne grauen Balken */
.woocommerce-checkout .payment_box {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #ffffff;         /* statt grau */
  border: 1px solid #e5e7eb;
  color: #333;
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* Pfeile/Spitzen komplett entfernen */
.woocommerce-checkout .payment_box::before,
.woocommerce-checkout .payment_box::after {
  content: none !important;
  display: none !important;
}

/* Nur die Box der ausgewählten Zahlungsart anzeigen – Rest ausblenden */
.woocommerce-checkout .payment_box {
  display: none;
}
.woocommerce-checkout .wc_payment_method.payment_method_bacs .payment_box,
.woocommerce-checkout .wc_payment_method.payment_method_cod .payment_box,
.woocommerce-checkout .wc_payment_method.payment_method_paypal .payment_box,
.woocommerce-checkout .wc_payment_method.payment_method_stripe .payment_box {
  /* Woo selbst blendet per JS ein/aus, wir lassen es zu, wenn kein inline-style "display:none" gesetzt ist */
}
.woocommerce-checkout .wc_payment_method .payment_box[style*="display: block"] {
  display: block;
}

/* === Versandarten-Karten im gleichen Stil wie Zahlungsarten === */

.ci-shipping-methods .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ci-shipping-methods .woocommerce-shipping-methods .ci-shipping-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  padding: 1rem 1.25rem;
  margin-bottom: 1rem;

  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.ci-shipping-methods .woocommerce-shipping-methods .ci-shipping-item:last-child {
  margin-bottom: 0;
}

/* Radio links, Label rechts mit vollem Textbereich */
.ci-shipping-methods .woocommerce-shipping-methods .ci-shipping-item input[type="radio"] {
  margin: 0 0.75rem 0 0;
  flex: 0 0 auto;
}

.ci-shipping-methods .woocommerce-shipping-methods .ci-shipping-item label {
  margin: 0;
  flex: 1 1 auto;
  cursor: pointer;
}

/* Checkout CI: aktive Versandart optisch hervorheben */
.ci-shipping-methods .woocommerce-shipping-methods .ci-shipping-item input[type="radio"]:checked + label {
  font-weight: 600;
}

.ci-shipping-methods .woocommerce-shipping-methods .ci-shipping-item input[type="radio"]:checked + label::after {
  /* optional kleiner Farbakzent rechts */
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  margin-left: 6px;
  background: var(--brand, #8AC33F);
}

/* === Multi-Step-Navigation über gesamte Breite === */

.ci-checkout-steps-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;

  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
}

.ci-checkout-steps-nav > li {
  flex: 1 1 0;
  text-align: center;
}

/* Badge (Zahl) oben */
.ci-checkout-steps-nav .ci-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  border-radius: 999px;

  border: 2px solid #d1d5db;
  background: #ffffff;
  color: #4b5563;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Label unter Badge */
.ci-checkout-steps-nav .ci-step-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #4b5563;
}

/* Aktiver Step: CI-Farbe in Badge */
.ci-checkout-steps-nav > li.is-active .ci-step-badge {
  background: var(--brand, #8AC33F);
  border-color: var(--brand, #8AC33F);
  color: #ffffff;
}

/* Option: bereits abgeschlossene Steps leicht getönt darstellen */
.ci-checkout-steps-nav > li.is-complete .ci-step-badge {
  background: #e0f2be;
  border-color: #c5e27c;
}

/* Mobile/Tablet: nur beim aktiven Step Label anzeigen */
@media (max-width: 768px) {
  .ci-checkout-steps-nav .ci-step-label {
    display: none;
  }

  .ci-checkout-steps-nav > li.is-active .ci-step-label {
    display: block;
  }
}

/* === Versandarten-Karten wie Zahlungsarten === */

/* Trick: verhindert, dass der nackte Text "Versand" in der Box sichtbar ist */
.ci-shipping-methods {
  font-size: 0; /* Textknoten im Container werden unsichtbar */
}
.ci-shipping-methods * {
  font-size: 1rem; /* normale Schriftgröße für die Kinder */
}

/* Die UL sauber resetten */
.ci-shipping-methods .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Jedes li als Card wie bei Zahlungsarten */
.ci-shipping-methods .woocommerce-shipping-methods > li {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  padding: 1rem 1.25rem;
  margin-bottom: 1rem;              /* gleicher Abstand wie Zahlarten */

  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.ci-shipping-methods .woocommerce-shipping-methods > li:last-child {
  margin-bottom: 0;
}

/* Radio links, Label rechts mit vollem Textbereich */
.ci-shipping-methods .woocommerce-shipping-methods > li input[type="radio"] {
  margin: 0 0.75rem 0 0;
  flex: 0 0 auto;
}

.ci-shipping-methods .woocommerce-shipping-methods > li label {
  margin: 0;
  flex: 1 1 auto;
  cursor: pointer;
}

/* Aktive Versandart leicht hervorheben */
.ci-shipping-methods .woocommerce-shipping-methods > li input[type="radio"]:checked + label {
  font-weight: 600;
}


/* === Multi-Step Navigation über gesamte Breite === */

.ci-checkout-steps-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;

  list-style: none;
  margin: 1rem 0 2rem;
  padding: 0;
}

.ci-checkout-steps-nav > .ci-step-nav-item {
  flex: 1 1 0;
  text-align: center;
}

/* Badge (Zahl) oben */
.ci-checkout-steps-nav .ci-step-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  border-radius: 999px;

  border: 2px solid #d1d5db;
  background: #ffffff;
  color: #4b5563;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Label unter Badge */
.ci-checkout-steps-nav .ci-step-nav-label {
  display: block;                /* WICHTIG: block, damit es unter dem Badge steht */
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #4b5563;
}

/* Aktiver Step – CI-Farbe für Badge */
.ci-checkout-steps-nav > .ci-step-nav-item.is-active .ci-step-nav-badge {
  background: var(--brand, #8AC33F);
  border-color: var(--brand, #8AC33F);
  color: #ffffff;
}

/* Bereits abgeschlossene Steps – leicht getönt, optional */
.ci-checkout-steps-nav > .ci-step-nav-item.is-complete .ci-step-nav-badge {
  background: #e0f2be;
  border-color: #c5e27c;
}

/* Tablet & Mobile: nur Label des aktiven Steps anzeigen */
@media (max-width: 768px) {
  .ci-checkout-steps-nav .ci-step-nav-label {
    display: none;
  }

  .ci-checkout-steps-nav > .ci-step-nav-item.is-active .ci-step-nav-label {
    display: block;
  }
}


/* === Multi-Step Navigation – Badges oben, Labels darunter === */

.ci-checkout-steps-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;

  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

/* jeder Step nimmt gleich viel Platz ein und richtet Inhalt vertikal aus */
.ci-checkout-steps-nav > .ci-step-nav-item {
  flex: 1 1 0;
  display: flex;              /* WICHTIG */
  flex-direction: column;     /* Badge oben, Label darunter */
  align-items: center;
}

/* Badge */
.ci-checkout-steps-nav .ci-step-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  border-radius: 999px;

  border: 2px solid #d1d5db;
  background: #ffffff;
  color: #4b5563;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Label unter Badge */
.ci-checkout-steps-nav .ci-step-nav-label {
  display: block;                 /* zwingt es in eine eigene Zeile */
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: #4b5563;
}

/* Aktiver Step – CI-Farbe */
.ci-checkout-steps-nav > .ci-step-nav-item.is-active .ci-step-nav-badge {
  background: var(--brand, #8AC33F);
  border-color: var(--brand, #8AC33F);
  color: #ffffff;
}

/* optional: abgeschlossene Steps leicht einfärben */
.ci-checkout-steps-nav > .ci-step-nav-item.is-complete .ci-step-nav-badge {
  background: #e0f2be;
  border-color: #c5e27c;
}

/* Mobile/Tablet: nur Label des aktiven Steps zeigen */
@media (max-width: 768px) {
  .ci-checkout-steps-nav .ci-step-nav-label {
    display: none;
  }

  .ci-checkout-steps-nav > .ci-step-nav-item.is-active .ci-step-nav-label {
    display: block;
  }
}

/* UL resetten */
.ci-shipping-methods .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* jedes li als Card – analog Zahlungsarten */
.ci-shipping-methods .woocommerce-shipping-methods > li {
  display: flex !important;       /* überschreibt Theme-Styles */
  align-items: center;
  gap: 0.75rem;

  width: 100%;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;            /* Abstand wie bei Payment-Karten */

  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.ci-shipping-methods .woocommerce-shipping-methods > li:last-child {
  margin-bottom: 0;
}

/* Radio links, Label rechts mit vollem Textbereich */
.ci-shipping-methods .woocommerce-shipping-methods > li input[type="radio"] {
  margin: 0 0.75rem 0 0;
  flex: 0 0 auto;
}

.ci-shipping-methods .woocommerce-shipping-methods > li label {
  margin: 0;
  flex: 1 1 auto;
  cursor: pointer;
}

/* aktive Versandart leicht hervorheben */
.ci-shipping-methods .woocommerce-shipping-methods > li input[type="radio"]:checked + label {
  font-weight: 600;
}

/* Grundlinie: grau */
.ci-checkout-steps-nav > .ci-step-nav-item {
  position: relative;
}

.ci-checkout-steps-nav > .ci-step-nav-item::before {
  content: "";
  position: absolute;
  top: 16px;              /* Mitte der 32px-Badge */
  left: -50%;
  width: 100%;
  height: 2px;
  background: #e5e7eb;    /* grau */
  z-index: 0;
}

/* keine Linie vor dem ersten Step */
.ci-checkout-steps-nav > .ci-step-nav-item:first-child::before {
  content: none;
}

/* Badge über die Linie legen */
.ci-checkout-steps-nav .ci-step-nav-badge {
  position: relative;
  z-index: 1;
}

/* Linie grün, wenn Step erledigt ODER aktiv */
.ci-checkout-steps-nav > .ci-step-nav-item.is-complete::before,
.ci-checkout-steps-nav > .ci-step-nav-item.is-active::before {
  background: var(--brand, #8AC33F);
}

/* =========================================================
   Progressive Enhancement: Ohne JS alles sichtbar (Fallback)
   ========================================================= */
html:not(.ci-js) .ci-checkout-step {
  display: block;
}

html.ci-js .ci-checkout-step {
  display: none;
}
html.ci-js .ci-checkout-step.is-active {
  display: block;
}

/* Step 4 Layout */
.ci-step-4-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}
@media (min-width: 1024px) {
  .ci-step-4-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
    align-items: flex-start;
  }
}

.ci-step-4-placeorder-card,
.ci-step-4-summary-card {
  padding: 1.25rem 1.5rem;
}

/* Step-Fehlerbox */
.ci-step-errors {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

/* Wenn Place-Order nach Step 4 gemountet ist: Abstände clean */
.ci-step-4-place-order .place-order {
  margin-top: 0;
}

/* Versand: kein grüner Punkt rechts (sonst springt der Preis in die Mitte) */
.ci-shipping-methods .ci-shipping-item input[type="radio"]:checked + label::after,
.ci-shipping-methods .woocommerce-shipping-methods .ci-shipping-item input[type="radio"]:checked + label::after {
  content: none !important;
  display: none !important;
}

/* Versand: Label immer wie in Bild 1 (Preis rechts) */
.ci-shipping-methods .ci-shipping-item > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
}

/* Preis niemals umbrechen, bleibt rechts */
.ci-shipping-methods .ci-shipping-item > label .woocommerce-Price-amount {
  margin-left: auto;
  white-space: nowrap;
}

.ci-step-4-place-order .place-order {
  margin-top: 0;
}

.ci-step-4-place-order #place_order {
  width: 100%;
}
/* Step 3: Place-Order + AGB ausblenden (nur wenn JS aktiv ist) */
html.ci-js .ci-checkout-step[data-step="3"] #payment .place-order,
html.ci-js .ci-checkout-step[data-step="3"] #woo_pp_ec_button_checkout,
html.ci-js .ci-checkout-step[data-step="3"] .wc-gzd-checkbox-placeholder-legal[data-checkbox="terms"],
html.ci-js .ci-checkout-step[data-step="3"] p.legal[data-checkbox="terms"] {
  display: none !important;
}

/* Step 4: sicherstellen, dass es dort wieder sichtbar ist */
html.ci-js .ci-checkout-step[data-step="4"] .ci-step-4-place-order .place-order,
html.ci-js .ci-checkout-step[data-step="4"] .ci-step-4-legal .wc-gzd-checkbox-placeholder-legal[data-checkbox="terms"],
html.ci-js .ci-checkout-step[data-step="4"] .ci-step-4-legal p.legal[data-checkbox="terms"] {
  display: block !important;
}
/* Mobile: Step 2–4 Layout als 1 Spalte (Sidebar nicht mehr schmal rechts) */
@media (max-width: 900px) {
  .ci-checkout-layout,
  .ci-step-2-layout,
  .ci-step-3-layout,
  .ci-step-4-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .ci-checkout-sidebar,
  .ci-checkout-summary,
  .ci-step-2-summary,
  .ci-step-3-summary,
  .ci-step-4-summary {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* Mobile: Summary-Items sauber layouten */
@media (max-width: 900px) {
  .ci-cart-items--readonly .ci-cart-item--readonly,
  .ci-cart-items--readonly .ci-cart-item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .ci-cart-item__thumb {
    width: 72px !important;
  }

  .ci-cart-item__thumb img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .ci-cart-item__content {
    min-width: 0 !important; /* wichtig für Grid/Flex */
  }

  /* Titel darf normal umbrechen (nicht buchstabenweise) */
  .ci-cart-item__title,
  .ci-cart-item__title a {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }

  /* Preis bleibt lesbar */
  .ci-cart-item__price .woocommerce-Price-amount {
    white-space: nowrap;
  }
}
/* Mobile: Cards dürfen nicht overflowen */
@media (max-width: 900px) {
  .ci-shipping-methods,
  .ci-payment-methods,
  .ci-shipping-methods * ,
  .ci-payment-methods * {
    box-sizing: border-box;
  }

  .ci-shipping-methods,
  .ci-payment-methods,
  .ci-shipping-methods ul,
  .ci-payment-methods ul,
  .ci-shipping-methods li,
  .ci-payment-methods li {
    max-width: 100%;
  }

  /* WICHTIG: Flex/Grid-Kinder dürfen schrumpfen */
  .ci-shipping-methods li,
  .ci-payment-methods li,
  .ci-shipping-methods label,
  .ci-payment-methods label {
    min-width: 0;
  }
}
@media (max-width: 900px) {
  .ci-shipping-methods .ci-shipping-item > label {
    width: 100%;
    min-width: 0;
  }

  /* Preis bleibt rechts, aber Card bleibt im Viewport */
  .ci-shipping-methods .ci-shipping-item > label .woocommerce-Price-amount {
    margin-left: auto;
    white-space: nowrap;
  }
}
@media (max-width: 900px) {
  #payment .wc_payment_method .payment_box {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;   /* lange Wörter/URLs umbrechen */
    word-break: normal;
  }

  /* PayPal Label/Link darf umbrechen */
  #payment .wc_payment_method label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
  }

  #payment .wc_payment_method label a.about_paypal {
    white-space: normal;
  }

  /* Bilder/Logos dürfen nicht rausdrücken */
  #payment .wc_payment_method label img {
    max-width: 100%;
    height: auto;
  }
}
/* Mobile: Payment-Infotext unter dem Label (kein Overlap) */
@media (max-width: 900px) {
  /* Card selbst darf nicht als 2-Spalten-Layout laufen */
  #payment ul.wc_payment_methods > li.wc_payment_method {
    display: block !important;
  }

  /* Label über volle Breite */
  #payment ul.wc_payment_methods > li.wc_payment_method > label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    min-width: 0;
    flex-wrap: wrap; /* falls PayPal-Link/Logo */
  }

  /* Infobox IMMER unter dem Label – keine Floats/Positioning */
  #payment ul.wc_payment_methods > li.wc_payment_method .payment_box {
    position: static !important;
    float: none !important;
    clear: both !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;

    margin: 12px 0 0 !important;
  }
}
/* Step 3: Payment-Info (payment_box) auch auf Desktop/Tablet immer in eigener Zeile */
@media (min-width: 901px) {
  .ci-checkout-step[data-step="3"] #payment .wc_payment_methods li.wc_payment_method {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-auto-rows: auto;
    column-gap: 12px;
    row-gap: 12px;
    align-items: start;
  }

  .ci-checkout-step[data-step="3"] #payment .wc_payment_methods li.wc_payment_method > input[type="radio"] {
    grid-column: 1;
    grid-row: 1;
    margin-top: 2px;
  }

  .ci-checkout-step[data-step="3"] #payment .wc_payment_methods li.wc_payment_method > label {
    grid-column: 2;
    grid-row: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }

  /* Infofeld immer volle Breite in Zeile darunter */
  .ci-checkout-step[data-step="3"] #payment .wc_payment_methods li.wc_payment_method .payment_box {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }
}
/* =========================
   Thank You (Order Received)
   ========================= */

.ci-thankyou-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.ci-thankyou-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 1024px) {
  .ci-thankyou-layout {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }

  /* Reihenfolge optional:
     Intro + Payment links, Details + Addresses rechts – oder wie du es willst */
  .ci-thankyou-card--intro { grid-column: 1; }
  .ci-thankyou-card--payment { grid-column: 1; }
  .ci-thankyou-card--details { grid-column: 2; grid-row: 1 / span 2; }
  .ci-thankyou-card--addresses { grid-column: 2; }
}

.ci-thankyou-title {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.2;
}

.ci-thankyou-h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.ci-thankyou-overview {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.ci-thankyou-overview li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ci-thankyou-label {
  opacity: 0.8;
}

.ci-thankyou-value {
  font-weight: 600;
  text-align: right;
}

/* Buttons CI-konform (Woo + Plugins) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-button,
.woocommerce a.woocommerce-button {
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
  border-radius: 12px;
}

/* Order Details Table: CI Card Look */
.ci-thankyou-order-details table,
.woocommerce-order-details table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 12px;
}

.ci-thankyou-order-details th,
.ci-thankyou-order-details td {
  padding: 12px 12px;
  vertical-align: top;
}

/* Mobile: Tabelle lesbar machen */
@media (max-width: 700px) {
  .ci-thankyou-order-details table thead {
    display: none;
  }

  .ci-thankyou-order-details table,
  .ci-thankyou-order-details tbody,
  .ci-thankyou-order-details tr,
  .ci-thankyou-order-details td,
  .ci-thankyou-order-details th {
    display: block;
    width: 100%;
  }

  .ci-thankyou-order-details tr {
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    margin-bottom: 12px;
    background: #fff;
  }

  .ci-thankyou-order-details td {
    padding: 6px 0;
  }
}
/* Thankyou simplified */
.ci-thankyou-simple-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.ci-thankyou-simple {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ci-thankyou-h1 {
  margin: 0 0 10px;
  font-size: 20px;
}

.ci-thankyou-lead {
  margin: 0 0 12px;
}

.ci-thankyou-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ci-btn {
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ci-btn--primary {
  /* nutzt deine Theme/Woo Farben – wenn du feste CI-Farbe willst, sag kurz deinen Hex */
}

.ci-btn--secondary {
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
}
.ci-thankyou-card .wc-card__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
  align-items:center;
}

/* ============================
   CI Woo Notices (global)
   ============================ */

/* Wrapper immer sichtbar */
.woocommerce-notices-wrapper,
.ci-checkout-notices {
  display: block;
  margin: 0 0 16px;
}

/* Base: alle Notice-Typen als CI-Card */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-notice {
  list-style: none;
  margin: 0 0 12px;
  padding: 14px 16px;

  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);

  display: flex;
  align-items: flex-start;
  gap: 12px;

  font-size: 14px;
  line-height: 1.35;
}

/* Woo gibt errors oft als <ul class="woocommerce-error"><li>...</li></ul> aus */
.woocommerce-error > li,
.woocommerce-message > li,
.woocommerce-info > li,
.woocommerce-notice > li {
  margin: 0;
  padding: 0;
  flex: 1;
}

/* Icon links (ohne externe Fonts) */
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-notice::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: 0 0 22px;
  margin-top: 2px;
  background: rgba(0,0,0,.08);
}

/* Semantikfarben (CI, aber sinnvoll) */
.woocommerce-message {
  border-left: 4px solid #68b030; /* CI-Grün */
}
.woocommerce-message::before {
  background: #68b030;
  mask: radial-gradient(circle at 50% 50%, #000 48%, transparent 49%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 48%, transparent 49%);
}

.woocommerce-info,
.woocommerce-notice {
  border-left: 4px solid rgba(104,176,48,.55); /* “neutral/CI” */
}

.woocommerce-error {
  border-left: 4px solid #b91c1c;
}
.woocommerce-error::before {
  background: #b91c1c;
}

/* Links in Notices */
.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-notice a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Buttons innerhalb von Notices (z.B. „Zurück zum Shop“, „Warenkorb ansehen“) */
.woocommerce-error a.button,
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-notice a.button,
.woocommerce-error button.button,
.woocommerce-message button.button,
.woocommerce-info button.button,
.woocommerce-notice button.button {
  margin-left: auto;
  text-decoration: none;

  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Mobile: Buttons unter den Text, wenn’s eng wird */
@media (max-width: 700px) {
  .woocommerce-error,
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-notice {
    flex-direction: column;
    align-items: stretch;
  }

  .woocommerce-error a.button,
  .woocommerce-message a.button,
  .woocommerce-info a.button,
  .woocommerce-notice a.button {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}

/* Optional: “Session abgelaufen” / leere Cart Notices etwas tighter */
.woocommerce-info,
.woocommerce-notice {
  background: #fff;
}

/* ============================
   Woo Notice: "Produkt entfernt" optimieren
   - kein Icon-Punkt
   - CTA-Button wie wc-card__cta
   ============================ */

/* 1) Icon/Punkt entfernen (nur für Success/Message) */
.woocommerce-message::before {
  content: none !important;
  display: none !important;
}

/* 2) Message-Card als Text + CTA untereinander */
.woocommerce-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* 3) "Rückgängig?" als CI-Button (wie deine Checkout-CTAs) */
.woocommerce-message a.restore-item {
  display: inline-flex !important;     /* sorgt für eigene Zeile + Button-Look */
  align-items: center;
  justify-content: center;
  text-decoration: none !important;

  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;

  /* übernimmt deine Button-Optik aus dem Checkout */
  /* falls ci-step-next bei dir der grüne CTA ist: */
  background: var(--ast-global-color-0, #68b030); /* Astra Primary fallback */
  color: #111;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* optional: Hover/Active etwas "buttoniger" */
.woocommerce-message a.restore-item:hover {
  filter: brightness(0.98);
}
.woocommerce-message a.restore-item:active {
  transform: translateY(1px);
}

/* 4) Mobile: CTA full width (wie wc-card__cta) */
@media (max-width: 700px) {
  .woocommerce-message a.restore-item {
    width: 100%;
  }
}
/* ==========================================
   CI Notices: Buttons exakt wie WC/Astra
   + keine ::before Punkte bei Message/Info
   ========================================== */

/* 1) Keine Icon-Punkte in Notices (Message + Info) */
.woocommerce-message::before,
.woocommerce-info::before {
  content: none !important;
  display: none !important;
}

/* 2) Notice Layout: Text + CTA inline (wie "Rückgängig?") */
.woocommerce-message,
.woocommerce-info {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  gap: 12px !important;
}

/* Woo kann <div> oder <ul><li> ausgeben – Textblock flexibel */
.woocommerce-message,
.woocommerce-info {
  flex-wrap: wrap;
}
.woocommerce-message > li,
.woocommerce-info > li {
  flex: 1 1 auto;
}

/* 3) Restore-Link als echter CI-Button (1:1 wie a.button.wc-backward) */
.woocommerce-message a.restore-item {
  /* Button-Optik exakt übernehmen */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;

  /* Wichtig: dieselben Klassen-Stile greifen oft nur auf .button,
     daher setzen wir sie hier explizit wie bei Astra/Woo */
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);

  /* Astra / Woo nutzt meist Theme-Farben -> kein Blau */
  background: var(--ast-global-color-0, #7cc04b);
  border: 0;
  color: #111;
}

/* Hover/Active wie Button */
.woocommerce-message a.restore-item:hover {
  filter: brightness(0.98);
}
.woocommerce-message a.restore-item:active {
  transform: translateY(1px);
}

/* 4) "Zurück zum Shop" (wc-backward) inline lassen (nicht full width) */
.woocommerce-info a.button.wc-backward,
.woocommerce-message a.button,
.woocommerce-info a.button {
  display: inline-flex !important;
  width: auto !important;
  margin-left: 0 !important;
}

/* 5) Mobile: falls es zu eng wird, Umbruch erlauben aber Buttons bleiben Button */
@media (max-width: 700px) {
  .woocommerce-message,
  .woocommerce-info {
    align-items: flex-start !important;
  }
}

/* Wrapper NIEMALS umrahmen (nur Inhalt, also einzelne Notices, dürfen Cards sein) */
.woocommerce-notices-wrapper,
.ci-checkout-notices.woocommerce-notices-wrapper {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}

/* Undo-Link soll exakt wie .ci-step-next aussehen */
.woocommerce-message a.restore-item {
  /* layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;

  /* exakt wie Checkout CTA */
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;

  /* WICHTIG: gleiche Hintergrundfarbe wie .ci-step-next erzwingen */
  background: var(--ci-primary, #7cc04b) !important;
  border: 0 !important;
  color: #111 !important;
}

/* falls .ci-step-next bei dir Hover/Active hat, hier ebenfalls */
.woocommerce-message a.restore-item:hover { filter: brightness(0.98); }
.woocommerce-message a.restore-item:active { transform: translateY(1px); }


/* Empty Cart Bereich als "Card" + Button inline rechts */
.wc-empty-cart-message,
.woocommerce-cart .cart-empty {
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 14px 16px;
  margin: 0 0 12px;
}

/* Text + Button in einer Zeile (Desktop/Tablet) */
.woocommerce-cart .cart-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Woo Button-Container direkt daneben ziehen */
.woocommerce-cart .return-to-shop {
  margin: 0 !important;
}

/* Button im Empty Cart exakt wie .ci-step-next */
.woocommerce-cart .return-to-shop a.button.wc-backward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* gleiche Optik wie Checkout CTA */
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;

  background: var(--ci-primary, #7cc04b) !important;
  border: 0 !important;
  color: #111 !important;
  text-decoration: none !important;
}

/* Mobile: Button unter Text, full width */
@media (max-width: 700px) {
  .woocommerce-cart .cart-empty {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-cart .return-to-shop a.button.wc-backward {
    width: 100%;
  }
}

.woocommerce-message::before,
.woocommerce-info::before {
  content: none !important;
  display: none !important;
}

/* =========================================================
   FINAL: CI Notices – exakt wie .ci-step-next + keine Outlines
   ========================================================= */

/* 0) Wrapper darf nie selbst wie eine Card aussehen */
.woocommerce-notices-wrapper {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 1) Schwarze Fokus-Umrandung entfernen (Woo fokussiert Notices) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  outline: none !important;
}
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 2) Keine "Punkt/Badge" Icons in Notices */
.woocommerce-message::before,
.woocommerce-info::before {
  content: none !important;
  display: none !important;
}

/* 3) "Rückgängig?" exakt wie Checkout-CTA (.ci-step-next) */
.woocommerce-message a.restore-item {
  --_brand: var(--brand, #8AC33F);

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 12px !important;
  border-radius: 8px !important;

  background: var(--_brand) !important;
  color: #fff !important;           /* <<< wichtig: identisch zu .ci-step-next */
  border: none !important;
  box-shadow: none !important;

  font-size: 100% !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;

  text-decoration: none !important;
  text-shadow: none !important;

  transition: filter 0.15s, transform 0.03s !important;
}
.woocommerce-message a.restore-item:hover { filter: brightness(0.95) !important; }
.woocommerce-message a.restore-item:active { transform: translateY(1px) !important; }

/* 4) Empty-Cart: NUR der äußere Wrapper ist Card – inneres Notice neutral */
.wc-empty-cart-message {
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 14px 16px;
  margin: 0 0 12px;
}

/* Inneres Woo-Notice (cart-empty woocommerce-info) darf NICHT wie Card aussehen */
.wc-empty-cart-message .cart-empty.woocommerce-info {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}
.wc-empty-cart-message .cart-empty.woocommerce-info::before {
  content: none !important;
  display: none !important;
}

/* 5) "Zurück zum Shop" Button exakt wie .ci-step-next */
.woocommerce-cart .return-to-shop a.button.wc-backward {
  --_brand: var(--brand, #8AC33F);

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 12px !important;
  border-radius: 8px !important;

  background: var(--_brand) !important;
  color: #fff !important;          /* <<< wichtig */
  border: none !important;
  box-shadow: none !important;

  font-size: 100% !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;

  text-decoration: none !important;
  text-shadow: none !important;

  transition: filter 0.15s, transform 0.03s !important;
}
.woocommerce-cart .return-to-shop a.button.wc-backward:hover { filter: brightness(0.95) !important; }
.woocommerce-cart .return-to-shop a.button.wc-backward:active { transform: translateY(1px) !important; }

/* Checkout: Header nur Logo, sauber zentriert */
body.ci-checkout-minimal .ci-header--checkout-min .ci-mainline {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 14px 0 !important;
}

/* Logo NICHT künstlich klein rechnen */
body.ci-checkout-minimal .ci-header--checkout-min .custom-logo-link {
  display: inline-flex !important;
}

body.ci-checkout-minimal .ci-header--checkout-min .custom-logo {
  width: auto !important;
  height: auto !important;
  max-height: 64px !important;   /* Desktop */
}

/* Tablet/Mobile: etwas kompakter, aber nicht mini */
@media (max-width: 900px) {
  body.ci-checkout-minimal .ci-header--checkout-min .custom-logo {
    max-height: 56px !important;
  }
}
@media (max-width: 600px) {
  body.ci-checkout-minimal .ci-header--checkout-min .custom-logo {
    max-height: 52px !important;
  }
}

/* Checkout: nur Legal im Footer zeigen */
body.ci-checkout-minimal .ci-footer__legal {
  display: block !important;
}

body.ci-checkout-minimal .ci-footer__main,
body.ci-checkout-minimal .ci-footer__top,
body.ci-checkout-minimal .ci-footer__trust,
body.ci-checkout-minimal .ci-footer__widgets,
body.ci-checkout-minimal .ci-footer__cols,
body.ci-checkout-minimal .ci-footer__newsletter {
  display: none !important;
}

/* =========================================================
   CHECKOUT MINIMAL HEADER + FOOTER (robust, ohne Extra-Klasse)
   Greift auf Checkout, aber NICHT auf Thankyou (order-received)
========================================================= */
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-row-trust,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-row-banner,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-row-nav,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-row-search,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-iconsbar {
  display: none !important;
}

/* In ALLEN Breakpoints: das Grid (42|1fr|42) killen -> Logo wirklich mittig */
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-mainline {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  /* überschreibt Tablet/Mobile Grid-Regeln */
  grid-template-columns: none !important;
  gap: 0 !important;

  min-height: 76px; /* wirkt wie normaler Header, aber clean */
}

/* Alles außer Logo im Checkout ausblenden */
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-burger,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-search-toggle,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-searchform,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .ci-icons {
  display: none !important;
}

/* Logo-Größe: nicht mini auf Mobile */
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .custom-logo {
  width: auto !important;
  height: auto !important;
  max-height: 66px !important;  /* Desktop */
}

@media (max-width: 900px) {
  body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .custom-logo {
    max-height: 58px !important;
  }
}
@media (max-width: 600px) {
  body.woocommerce-checkout:not(.woocommerce-order-received) #ci-header .custom-logo {
    max-height: 54px !important;
  }
}

/* =========================================================
   CHECKOUT MINIMAL FOOTER: nur Legal zeigen + CI-Styles für Legal
========================================================= */
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-footer .ci-footer__legal {
  display: block !important;
}

body.woocommerce-checkout:not(.woocommerce-order-received) #ci-footer .ci-footer__main,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-footer .ci-footer__top,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-footer .ci-footer__trust,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-footer .ci-footer__widgets,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-footer .ci-footer__cols,
body.woocommerce-checkout:not(.woocommerce-order-received) #ci-footer .ci-footer__newsletter {
  display: none !important;
}

/* Legal Layout 1:1 “Footer-Look”, ohne Bullets */
#ci-footer .ci-footer__legal {
  border-top: 1px solid #e5e5e5;
  background: #fff;
  padding: 18px 0;
}

#ci-footer .ci-legalwrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#ci-footer .ci-legallist {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: center;
}

#ci-footer .ci-legallist li {
  margin: 0 !important;
  padding: 0 !important;
}

#ci-footer .ci-legallist .ci-sep {
  color: #9ca3af;
  font-weight: 600;
}

#ci-footer .ci-legallist a {
  color: var(--brand, #8AC33F);
  text-decoration: none;
  font-weight: 600;
}

#ci-footer .ci-legallist a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#ci-footer .ci-copy {
  margin: 0 !important;
  color: #6b7280;
  font-size: 0.92rem;
}

/* Checkout: Legal Footer exakt wie gewünscht (Bullet-frei, horizontal) */
body.woocommerce-checkout:not(.woocommerce-order-received) .ci-footer__legal .ci-legalwrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .ci-footer__legal ul.ci-legallist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px 12px !important;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .ci-footer__legal ul.ci-legallist > li {
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .ci-footer__legal ul.ci-legallist > li.ci-sep {
  color: #9ca3af !important;
  font-weight: 600 !important;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .ci-footer__legal ul.ci-legallist > li > a {
  color: var(--brand, #8AC33F) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .ci-footer__legal ul.ci-legallist > li > a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .ci-footer__legal .ci-copy {
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 0.92rem !important;
}

/* Checkout: Kein ::before Icon/Punkt bei Error-Notices */
.woocommerce-error::before {
  content: none !important;
  display: none !important;
}

/* optional: falls Plugins das ::before auf li setzen */
.woocommerce-error > li::before {
  content: none !important;
  display: none !important;
}

/* =========================
   CI Product Search Toolbar
   ========================= */

.ci-searchbar{
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.ci-searchbar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ci-searchbar__title{
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
}

.ci-searchbar__meta{
  font-weight: 600;
  color: #6b7280;
  font-size: 14px;
}

.ci-searchbar__row--controls{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.ci-searchbar__controls-left{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.ci-searchbar__controls-right{
  margin-left: auto;
}

.ci-searchbar__select,
.ci-searchbar__input{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  min-height: 42px;
}

.ci-searchbar__select{
  min-width: 220px;
}

.ci-searchbar__filter-toggle{
  white-space: nowrap;
}

/* Filter Panel */
.ci-searchbar__filter-panel{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.ci-searchbar__filters-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.ci-searchbar__field label{
  display:block;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.ci-searchbar__price{
  display:flex;
  gap: 10px;
}

.ci-searchbar__price .ci-searchbar__input{
  width: 100%;
}

.ci-searchbar__filter-actions{
  margin-top: 12px;
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}

.ci-searchbar__reset{
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
}

/* Pager Buttons: CI look, aber INLINE (nicht 100% Breite) */
.ci-searchbar__pager{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
}

/* du hast Buttons standardmäßig 100% breit im Shop/CTA :contentReference[oaicite:4]{index=4}
   -> hier wieder inline */
.ci-searchbar__pager .button{
  width: auto !important;
  min-width: 110px;
  padding: 10px 14px;
}

/* disabled state */
.ci-searchbar__pager .is-disabled{
  opacity: .45;
  pointer-events: none;
}

/* responsive */
@media (max-width: 900px){
  .ci-searchbar__filters-grid{
    grid-template-columns: 1fr;
  }
  .ci-searchbar__select{
    min-width: 0;
    width: 100%;
  }
  .ci-searchbar__controls-right{
    width: 100%;
  }
  .ci-searchbar__pager{
    width: 100%;
    justify-content: space-between;
  }
  .ci-searchbar__pager .button{
    flex: 1;
  }
}

/* =========================
   CI Search Toolbar (nur Suche)
========================= */

.ci-searchbar {
  margin: 24px 0 18px;
  padding: 18px 18px;
}

.ci-searchbar__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ci-searchbar__row--top {
  justify-content: space-between;
  margin-bottom: 14px;
}

.ci-searchbar__title {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;
  font-weight: 700;
}

.ci-searchbar__q { font-weight: 700; }

.ci-searchbar__meta {
  font-size: 14px;
  opacity: 0.85;
  white-space: nowrap;
}

.ci-searchbar__row--controls {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.ci-searchbar__controls-left,
.ci-searchbar__controls-right {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.ci-field {
  display: grid;
  gap: 6px;
}

.ci-field__label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
}

.ci-select,
.ci-input {
  height: 44px;
  border-radius: 12px;
  border: 1px solid #e6ebf2;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}

.ci-select:focus,
.ci-input:focus {
  border-color: rgba(120, 190, 32, 0.55);
  box-shadow: 0 0 0 4px rgba(120, 190, 32, 0.14);
}

.ci-searchbar__filterbtn {
  height: 44px;
}

.ci-searchbar__filters {
  width: 100%;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}

.ci-searchbar__filters-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  gap: 12px;
}

.ci-price-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

.ci-price-range__sep {
  opacity: 0.6;
  font-weight: 700;
  text-align: center;
}

.ci-searchbar__filters-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.button.is-disabled {
  pointer-events: none;
  opacity: 0.45;
}

/* Responsive */
@media (max-width: 900px) {
  .ci-searchbar__filters-grid {
    grid-template-columns: 1fr;
  }
  .ci-searchbar__meta {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .ci-searchbar__row--top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .ci-searchbar__row--controls {
    align-items: stretch;
  }
  .ci-searchbar__controls-left,
  .ci-searchbar__controls-right {
    justify-content: space-between;
    width: 100%;
  }
}

/* CI Styling für Woo Ordering innerhalb der Search-Toolbar */
.ci-searchbar .woocommerce-ordering{
  margin: 0;
}

.ci-searchbar .woocommerce-ordering select.orderby{
  height: 44px;
  border-radius: 12px;
  border: 1px solid #e6ebf2;
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
}

.ci-searchbar .woocommerce-ordering select.orderby:focus{
  border-color: rgba(120, 190, 32, 0.55);
  box-shadow: 0 0 0 4px rgba(120, 190, 32, 0.14);
}

.wc-card__wishlist{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 7;

  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);

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

  border: 0;
  padding: 0;
  cursor: pointer;
}

.wc-card__wishlist-icon{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #4b5563;        /* neutral grau */
  stroke-width: 1.8;
  opacity: .9;
  transition: fill .18s ease, stroke .18s ease, transform .18s ease;
}

/* Hover: nur das Herz wird grün */
.wc-card__wishlist:hover .wc-card__wishlist-icon{
  stroke: var(--brand);
}

/* Aktiv: Herz gefüllt */
.wc-card__wishlist.is-active .wc-card__wishlist-icon{
  fill: var(--brand);
  stroke: var(--brand);
  opacity: 1;
}

/* Sale Badge bleibt links oben, damit nichts kollidiert */
.wc-badge{
  left: 10px;
  right: auto;
}
.wc-card__thumb-link{
  display:block;
}

.ci-cart__badge:empty{
  display:none;
}

.ci-cart__badge[data-count="0"]{
  display:none;
}

/* =========================================
   Desktop Nav Icons – Foto-Thumbnails (nicht croppen) + Active State
   ========================================= */
@media (min-width:1024px){

  .ci-nav__menu.ci-nav__menu--icons{
    margin:0;
    padding:.6rem 0;
    list-style:none;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: clamp(10px, 1.1vw, 16px);

    flex-wrap: nowrap;
    overflow: hidden; /* kein Scroll */
  }

  .ci-nav__menu--icons > li{
    flex: 1 1 0;
    min-width: 0;
    display:flex;
    justify-content:center;
  }

  /* Card */
  .ci-nav__iconlink{
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    max-width: 100px;
    padding: 10px;

    border-radius: 12px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);

    text-decoration:none;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
    outline: none;
  }

  .ci-nav__iconlink:hover,
  .ci-nav__iconlink:focus-visible{
    background: rgba(255,255,255,.20);
    border-color: rgba(255,255,255,.35);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0,0,0,.14);
  }

  /* Bildfläche: Quadrat, damit nichts abgeschnitten wird */
  .ci-nav__icon{
    width: 58px;
    height: 58px;
    display:block;

    object-fit: contain;        /* ✅ KEIN CROP */
    object-position: center;

    background: #fff;           /* Foto steht auf sauberem Weiß */
    padding: 6px;               /* Luft für quadratische Thumbs */
    border-radius: 10px;        /* minimal gerundet */
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
    transition: transform .16s ease;
  }

  .ci-nav__iconlink:hover .ci-nav__icon,
  .ci-nav__iconlink:focus-visible .ci-nav__icon{
    transform: scale(1.03);
  }

  /* Active State (Top-Level Kategorie aktiv) */
  .ci-nav__menu--icons > li.is-active .ci-nav__iconlink{
    background: rgba(255,255,255,.24);
    border-color: rgba(255,255,255,.55);
    box-shadow: 0 16px 32px rgba(0,0,0,.16);
  }

  .ci-nav__menu--icons > li.is-active .ci-nav__icon{
    box-shadow: 0 10px 22px rgba(0,0,0,.18);
    transform: scale(1.02);
  }

 /* =========================================
   Hover Label – unter dem Bild
   ========================================= */
  .ci-nav__label{
    position:absolute;
    top: calc(100% - 6px);     /* direkt unter der Kachel */
    left: 50%;
    transform: translateX(-50%) translateY(4px);

    white-space: nowrap;
    pointer-events: none;

    font-size: 12px;
    font-weight: 600;
    color: #1f2937;            /* dunkles Grau, ruhig */

    background: #ffffff;
    padding: 4px 8px;
    border-radius: 8px;

    box-shadow: 0 8px 18px rgba(0,0,0,.14);

    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
  }

  .ci-nav__iconlink:hover .ci-nav__label,
  .ci-nav__iconlink:focus-visible .ci-nav__label{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}


  /* Wenn’s knapp wird (kleinere Desktops) */
  @media (max-width:1200px){
    .ci-nav__iconlink{ max-width: 92px; padding: 9px; }
    .ci-nav__icon{ width: 52px; height: 52px; padding: 5px; }
  }
}


/* =========================================
   Desktop Icon-Nav – Active State (dezent, CI-konform)
   ========================================= */
@media (min-width:1024px){

  /* Active State (Top-Level Kategorie aktiv) – dezent, CI-konform */
  .ci-nav__menu--icons > li.is-active .ci-nav__iconlink{
    background: #3333339f          /* nur eine Stufe heller als .14 */
    border-color: rgba(255,255,255,.30);         /* leicht stärker als .22 */
    box-shadow:
      0 10px 22px rgba(0,0,0,.10),               /* gleich wie normal */
      inset 0 0 0 1px rgba(255,255,255,.14);     /* subtile Innenkante */
    transform: none;                              /* kein Pop-out */
  }

  .ci-nav__menu--icons > li.is-active .ci-nav__icon{
    box-shadow: 0 6px 14px rgba(0,0,0,.12);      /* identisch wie normal */
    transform: none;
  }


  /* Bild: ganz leicht betonen (optional) */
  #ci-header .ci-nav__menu--icons > li.is-active .ci-nav__icon,
  #ci-header .ci-nav__menu--icons .ci-nav__iconlink.is-active .ci-nav__icon{
    box-shadow: 0 8px 18px rgba(0,0,0,.14) !important;
    transform: none !important;
  }
}


/* =========================================
   Active Indicator – dezente Linie unten
   ========================================= */
@media (min-width:1024px){

  .ci-nav__menu--icons > li.is-active .ci-nav__iconlink{
    position: relative; /* für ::after */
  }

  .ci-nav__menu--icons > li.is-active .ci-nav__iconlink::after{
    content:"";
    position:absolute;
    left: 18%;
    right: 18%;
    bottom: 6px;

    height: 2px;
    border-radius: 2px;
    background: var(--brand); /* Primary Grün */
    opacity: .85;
  }
}

/* =========================================
   Icon-Nav Label: unter der Menüzeile, nicht abgeschnitten
   - dark tooltip (#333), white text
   - mehr Abstand nach unten
   - edge-safe (links/rechts)
   ========================================= */
@media (min-width:1024px){

  /* 1) WICHTIG: Tooltip darf raus ragen -> kein Clipping */
  .ci-row-nav,
  .ci-row-nav .ci-container,
  .ci-row-nav .ci-nav,
  .ci-nav__menu.ci-nav__menu--icons{
    overflow: visible !important; /* ✅ verhindert Label-Cut */
  }

  /* Falls du irgendwo noch overflow:hidden auf der Menu-Liste hast: neutralisieren */
  .ci-nav__menu.ci-nav__menu--icons{
    overflow: visible !important;
  }

  /* 2) Label unter der Menüzeile (deutlich mehr Abstand) */
  .ci-nav__iconlink{
    position: relative; /* Anker */
  }

  .ci-nav__label{
    position: absolute;
    top: calc(100% + 14px);  /* ✅ mehr Y-Abstand + unterhalb der Kachel */
    left: 50%;
    transform: translateX(-50%) translateY(6px);

    white-space: nowrap;
    pointer-events: none;

    background: #333333;     /* ✅ dezent dunkel */
    color: #ffffff;          /* ✅ weiß */
    font-size: 12px;
    font-weight: 700;

    padding: 7px 10px;
    border-radius: 10px;
    box-shadow: 0 12px 22px rgba(0,0,0,.22);

    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 9999;           /* ✅ über allem */
  }

  .ci-nav__iconlink:hover .ci-nav__label,
  .ci-nav__iconlink:focus-visible .ci-nav__label{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* 3) Edge Fix: ganz links -> Label nach rechts ausrichten */
  .ci-nav__menu--icons > li:first-child .ci-nav__label{
    left: 0;
    transform: translateX(0) translateY(6px);
  }
  .ci-nav__menu--icons > li:first-child .ci-nav__iconlink:hover .ci-nav__label,
  .ci-nav__menu--icons > li:first-child .ci-nav__iconlink:focus-visible .ci-nav__label{
    transform: translateX(0) translateY(0);
  }

  /* 4) Edge Fix: ganz rechts -> Label nach links ausrichten */
  .ci-nav__menu--icons > li:last-child .ci-nav__label{
    left: auto;
    right: 0;
    transform: translateX(0) translateY(6px);
  }
  .ci-nav__menu--icons > li:last-child .ci-nav__iconlink:hover .ci-nav__label,
  .ci-nav__menu--icons > li:last-child .ci-nav__iconlink:focus-visible .ci-nav__label{
    transform: translateX(0) translateY(0);
  }
}

/* =========================================
   Single Product – CI Layout (Grid + Cards)
   ========================================= */
.ci-product .ci-container{ max-width:1200px; }

.ci-card{
  border-radius:12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  background:#fff;
}

.ci-product__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  margin: 18px 0 28px;
  align-items:start;
}

.ci-product__gallery{ padding: 18px; }

/* Galerie: verhindert “mega Bild”, bleibt im Card */
.ci-product__gallery .woocommerce-product-gallery__image img{
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
}

.ci-product__info-card{ padding: 20px; }

.ci-product__title{
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 10px;
}

.ci-product__rating{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 8px 0 12px;
}
.ci-product__reviews{
  color:#6b7280;
  font-size:13px;
}

.ci-product__price{ margin: 10px 0 12px; }
.ci-product__shortdesc{ margin: 10px 0 14px; color:#374151; }
.ci-product__cart{ margin-top: 10px; }

.ci-product__servicegrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.ci-product__service{ padding: 14px; text-align:center; }
.ci-product__service-title{ font-weight:700; font-size:13px; }
.ci-product__service-sub{ font-size:12px; color:#6b7280; margin-top:2px; }

.ci-product__manuals-card{ padding: 18px; margin-top: 18px; }
.ci-product__section-title{ margin: 0 0 12px; font-size: 18px; }

.ci-manuals{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ci-manual{
  display:flex;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  text-decoration:none;
  color: inherit;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.ci-manual:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.14);
  transform: translateY(-1px);
}
.ci-manual__icon{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  background: rgba(0,0,0,.08);
}
.ci-manual__title{ font-weight:700; display:block; }
.ci-manual__sub{ color:#6b7280; font-size:12px; display:block; margin-top:2px; }

@media (max-width: 980px){
  .ci-product__grid{ grid-template-columns: 1fr; }
  .ci-product__servicegrid{ grid-template-columns: 1fr; }
  .ci-manuals{ grid-template-columns: 1fr; }
  .ci-product__gallery .woocommerce-product-gallery__image img{ max-height: 420px; }
}

/* ===== Single Product: Prevent overflow (Gallery + Grid) ===== */
.ci-product__top,
.ci-product__main,
.ci-product__grid{
  min-width: 0; /* wichtig in Grid/Flex, sonst overflow */
}

.ci-card.ci-product__gallery{
  overflow: hidden; /* verhindert, dass Thumbs rechts rauslaufen */
  max-width: 100%;
}

/* Woo Gallery in Card immer auf 100% zwingen */
.ci-product__gallery .woocommerce-product-gallery{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.ci-product__gallery .woocommerce-product-gallery__wrapper{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* Thumbnails dürfen nicht sprengen */
.ci-product__gallery .flex-control-thumbs{
  display: flex;
  flex-wrap: wrap;     /* statt 1 Reihe zu sprengen */
  gap: 10px;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding: 12px 0 0;
  margin: 0;
}

.ci-product__gallery .flex-control-thumbs li{
  list-style: none !important;
  margin: 0 !important;
  width: auto !important;
}

.ci-product__gallery .flex-control-thumbs img{
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  border-radius: 10px;
}

/* ===== Woo Tabs: keine Marker / keine ::before-Punkte ===== */
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs li{
  list-style: none !important;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after{
  display: none !important;
  content: none !important;
}

.ci-product__info-card{
  padding: 22px;
}

.ci-product__title{
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 10px;
}

.ci-product__price .price{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ci-product__shortdesc{
  margin-top: 10px;
  color:#374151;
  font-size: 14px;
  line-height: 1.55;
}

/* Variation/ATC Bereich clean */
.ci-product__cart .variations{
  margin: 12px 0 8px;
}
.ci-product__cart .single_add_to_cart_button{
  width: 100%;
  border-radius: 12px;
  font-weight: 800;
  padding: 12px 14px;
}

/* ===== Galerie Card auf Lovable-Level ===== */
.ci-product__gallery{
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 420px;
}

.woocommerce-product-gallery{
  width: 100%;
}

.woocommerce-product-gallery__wrapper{
  max-width: 520px;
  margin: 0 auto;
}

.woocommerce-product-gallery__image img{
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
}

/* Thumbnails (falls aktiv) */
.woocommerce-product-gallery .flex-control-thumbs{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  justify-content:center;
}
.woocommerce-product-gallery .flex-control-thumbs img{
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}

/* ===== Woo Tabs -> CI Cards ===== */
.woocommerce-tabs{
  margin-top: 22px;
}

.woocommerce-tabs ul.tabs{
  display:flex;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 0 0 12px;
}

.woocommerce-tabs ul.tabs li{
  border:0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-tabs ul.tabs li a{
  display:inline-flex;
  align-items:center;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  font-weight: 800;
  text-decoration:none;
}

.woocommerce-tabs ul.tabs li.active a{
  background: rgba(0,0,0,.08);
}

.woocommerce-tabs .panel{
  background:#fff;
  border-radius:12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  padding: 18px;
}

/* ===== Manuals: Download Cards ===== */
.ci-manuals{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ci-manual{
  border-radius: 14px;
  padding: 16px;
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}

.ci-manual__icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-weight: 900;
}

@media (max-width:980px){
  .ci-manuals{ grid-template-columns: 1fr; }
}

/* ===== Tabs: Lovable-like Pills ===== */
.woocommerce-tabs ul.tabs{
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 0 0 14px;
  border: 0 !important;
}

.woocommerce-tabs ul.tabs li a{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.06);
}

.woocommerce-tabs ul.tabs li.active a{
  background: rgba(134,188,37,.18);
  border-color: rgba(134,188,37,.35);
}

.woocommerce-tabs .panel{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  padding: 18px;
}

/* Woo gibt form.cart aus – wir machen das inline-fähig */
.single-product .ci-product__purchase-row form.cart{
  display: flex;
  align-items: center;          /* vertikal zentriert */
  gap: 12px;
  margin: 0;
  flex: 1 1 auto;
}

/* Gleiche Höhe für Qty, Button, Wishlist */
:root{
  --ci-purchase-h: 48px;
}

/* Quantity Wrapper */
.single-product .ci-product__purchase-row form.cart .quantity{
  display: flex;
  align-items: center;
  height: var(--ci-purchase-h);
  margin: 0;
}

/* Qty input */
.single-product .ci-product__purchase-row form.cart .qty{
  height: var(--ci-purchase-h);
  width: 70px;
  padding: 0 10px;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Add to cart button */
.single-product .ci-product__purchase-row form.cart .single_add_to_cart_button{
  height: var(--ci-purchase-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 10px;
  flex: 1 1 auto;               /* Button darf breit werden */
}

/* Wishlist im Cart: wie Button-Höhe */
.single-product .ci-product__purchase-row .wc-card__wishlist--in-cart{
  height: var(--ci-purchase-h);
  width: var(--ci-purchase-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;

  /* GANZ WICHTIG: falls irgendwo absolute gesetzt ist */
  position: static !important;
  inset: auto !important;
}

/* ===== Mobile Fix: Qty + Button + Wishlist immer in einer Zeile ===== */
@media (max-width: 767px){

  .single-product .ci-product__purchase-row{
    flex-wrap: nowrap;         /* nicht umbrechen */
    gap: 10px;
  }

  .single-product .ci-product__purchase-row form.cart{
    flex: 1 1 auto;            /* Form nimmt Restbreite */
    min-width: 0;              /* wichtig, sonst drückt es nach unten */
    flex-wrap: nowrap;
    gap: 10px;
  }

  /* Quantity etwas kompakter */
  .single-product .ci-product__purchase-row form.cart .qty{
    width: 56px;
  }

  /* Button darf schrumpfen statt umbrechen */
  .single-product .ci-product__purchase-row form.cart .single_add_to_cart_button{
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
    white-space: nowrap;       /* Text bleibt in einer Zeile */
  }

  /* Wishlist darf nicht in neue Zeile */
  .single-product .ci-product__purchase-row .wc-card__wishlist--in-cart{
    flex: 0 0 var(--ci-purchase-h);
  }
}

/* ===== Quantity Lovable Style: - [1] + ===== */

/* Browser-Spinners ausblenden */
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .quantity input.qty { -moz-appearance: textfield; }

/* Layout */
.woocommerce .quantity{
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  height: var(--ci-purchase-h, 46px);
}

.woocommerce .quantity .qty{
  width: 60px;
  height: 100%;
  border: 0 !important;
  text-align: center;
  padding: 0;
  font-weight: 600;
  background: transparent;
}

.woocommerce .ci-qty__btn{
  width: 46px;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}

.woocommerce .ci-qty__btn:hover{
  background: rgba(0,0,0,.04);
}

.woocommerce .ci-qty__btn:active{
  background: rgba(0,0,0,.06);
}

.woocommerce .ci-qty__btn{
  color:#2b2b2b; /* fehlte bei dir */
}

/* Produktseite: kein horizontales Scrollen */
body.single-product{
  overflow-x: clip; /* besser als hidden (falls verfügbar) */
}
@supports not (overflow: clip){
  body.single-product{ overflow-x: hidden; }
}

/* Wichtig: Grid/Flex-Kinder dürfen schrumpfen */
.single-product .ci-product__grid,
.single-product .ci-product__grid *{
  min-width: 0;
}

@media (max-width: 768px){
  .single-product .ci-product__gallery.ci-card{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* falls innen Slider rauszieht */
  }
}

@media (max-width: 768px){
  .single-product #primary > div > article.ci-product__grid{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* =========================================================
   CI Quantity Buttons: Astra Button-Styles hart überschreiben
   ========================================================= */

/* Wrapper: immer eine horizontale Pill */
.woocommerce .quantity,
.woocommerce .ci-qty{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  height: 44px !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Minus / Plus: Astra Padding/Background/Color killen */
.woocommerce button.ci-qty__btn{
  /* Astra setzt button padding/background/color -> reset */
  padding: 0 !important;
  margin: 0 !important;
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;

  background: transparent !important; /* <- wichtig */
  color: #2b2b2b !important;          /* <- sichtbar */

  border: 0 !important;
  border-radius: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 600 !important;

  box-shadow: none !important;
}

/* Hover wie CI Grün */
.woocommerce button.ci-qty__btn:hover,
.woocommerce button.ci-qty__btn:focus-visible{
  background: var(--ci-green, #86BC25) !important;
  color: #fff !important;
}

/* Active */
.woocommerce button.ci-qty__btn:active{
  background: var(--ci-green-dark, #76a91f) !important;
  color: #fff !important;
}

/* Input mittig */
.woocommerce .quantity input.qty,
.woocommerce .ci-qty input.qty{
  border: 0 !important;
  background: transparent !important;
  width: 52px !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 44px !important;
  line-height: 44px !important;
  color: #2b2b2b !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

/* Mobile: etwas kompakter */
@media (max-width: 600px){
  .woocommerce .quantity,
  .woocommerce .ci-qty{ height: 42px !important; }
  .woocommerce button.ci-qty__btn{
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
  .woocommerce .quantity input.qty,
  .woocommerce .ci-qty input.qty{
    height: 42px !important;
    line-height: 42px !important;
  }
}

/* Variations Form immer volle Breite */
.single-product form.variations_form{
  width: 100% !important;
  max-width: 100% !important;
}

/* Table (Selects) darf NICHT neben den Add-to-cart Block rutschen */
.single-product form.variations_form table.variations{
  width: 100% !important;
  display: table !important;
}

/* Der Wrap unter der Tabelle: als Block/Column */
.single-product form.variations_form .single_variation_wrap{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Reihenfolge erzwingen */
.single-product form.cart .quantity,
.single-product .woocommerce-variation-add-to-cart .quantity{
  order: 1 !important;
  flex: 0 0 auto !important;
}

.single-product form.cart .single_add_to_cart_button,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button{
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  height: var(--ci-cart-cta-h, 48px) !important;
  border-radius: 12px !important;
}

.single-product form.cart .wc-card__wishlist,
.single-product .woocommerce-variation-add-to-cart .wc-card__wishlist{
  order: 3 !important;
  flex: 0 0 var(--ci-cart-cta-h, 48px) !important;
  width: var(--ci-cart-cta-h, 48px) !important;
  height: var(--ci-cart-cta-h, 48px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
}

/* Mobile: trotzdem 1 Zeile, ohne rauszuragen */
@media (max-width: 640px){
  .single-product form.cart,
  .single-product .woocommerce-variation-add-to-cart{
    gap: 10px !important;
  }

  /* Quantity etwas kompakter auf Mobile */
  .single-product form.cart .quantity{
    max-width: 120px !important;
  }
}

/* =========================================================
   FIX: Servicegrid auf Desktop immer sichtbar
   ========================================================= */
@media (min-width: 981px){
  .single-product .ci-product__servicegrid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 12px !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

/* =========================================================
   CI Single Product – ATC Row (FINAL, template-driven)
   Qty | Add-to-cart | Wishlist — immer 1 Zeile, kein Overflow
   ========================================================= */

/* Wrapper darf KEIN Flex sein (sonst zerlegt es variable forms) */
.single-product .ci-product__purchase-row{
  align-items: center;          /* vertikal zentriert */
  gap: 12px;
}

/* Form & Variation wrapper bleiben block – nur unsere Row ist flex */
.single-product .ci-product__buybox form.cart{
  display: block !important;
  margin: 0;
}

.single-product .ci-product__buybox form.variations_form .woocommerce-variation-add-to-cart{
  display: block !important;
}

/* Die einzige echte “Kaufzeile” */
.single-product .ci-product__buybox .ci-atc-row{
  --ci-cart-cta-h: 48px;
  --ci-purchase-h: 48px; /* kompatibel zu bestehenden Qty-Overrides */
  --ci-atc-gap: 12px;

  display: flex;
  align-items: stretch;
  gap: var(--ci-atc-gap);
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.single-product .ci-product__buybox .ci-atc-row > *{
  min-width: 0;
}

/* Quantity block */
.single-product .ci-product__buybox .ci-atc-row .quantity{
  margin: 0;
  flex: 0 0 auto;
  height: var(--ci-cart-cta-h);
}

/* Add-to-cart button */
.single-product .ci-product__buybox .ci-atc-row .single_add_to_cart_button{
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;

  height: var(--ci-cart-cta-h);
  padding: 0 16px;
  border-radius: 12px;

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

  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wishlist: fix square, niemals absolut */
.single-product .ci-product__buybox .ci-atc-row .wc-card__wishlist{
  flex: 0 0 var(--ci-cart-cta-h);
  width: var(--ci-cart-cta-h);
  height: var(--ci-cart-cta-h);
  padding: 0;

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

  border-radius: 12px;

  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}

.single-product .ci-product__buybox .ci-atc-row .wc-card__wishlist-icon{
  width: 22px;
  height: 22px;
  display: block;
}

/* Focus sichtbar (barrierearm) */
.single-product .ci-product__buybox .ci-atc-row :focus-visible{
  outline: 2px solid var(--ci-green, #86BC25);
  outline-offset: 2px;
}

/* Mobile: kompakter, bleibt 1 Zeile */
@media (max-width: 640px){
  .single-product .ci-product__buybox .ci-atc-row{
    --ci-cart-cta-h: 44px;
    --ci-purchase-h: 44px;
    --ci-atc-gap: 10px;
  }

  .single-product .ci-product__buybox .ci-atc-row .single_add_to_cart_button{
    padding: 0 12px;
    font-size: 14px;
  }

  /* Qty input etwas schmaler (gegen Overflow) */
  .single-product .ci-product__buybox .ci-atc-row .quantity input.qty{
    width: 44px !important;
  }
}

/* =========================================================
   Single Product: PayPal Express / PPCP Buttons NICHT zeigen
   (verhindert Overlay in Buybox)
   ========================================================= */
.single-product .ci-product__buybox .wcppec-checkout-buttons,
.single-product .ci-product__buybox .woo_pp_cart_buttons_div,
.single-product .ci-product__buybox .woocommerce-paypal-payments-button,
.single-product .ci-product__buybox .wc-ppcp-button-container,
.single-product .ci-product__buybox .ppc-button-wrapper{
  display: none !important;
}

/* =========================================================
   CI Single Product – Button Farben (Override Astra alt blue)
   Scope: nur Buybox / ci-atc-row
   ========================================================= */

/* Falls CI-Variable noch nicht existiert, ist das der Fallback */
:root{
  --ci-green: #86BC25;
  --ci-green-hover: #79A920;
}


/* Add-to-cart Button in ci-atc-row */
.single-product .ci-product__buybox .ci-atc-row button.single_add_to_cart_button.button.alt,
.single-product .ci-product__buybox .ci-atc-row .single_add_to_cart_button.button.alt{
  background-color: var(--ci-green) !important;
  border-color: var(--ci-green) !important;
  color: #fff !important;
}

/* Hover/Focus */
.single-product .ci-product__buybox .ci-atc-row button.single_add_to_cart_button.button.alt:hover,
.single-product .ci-product__buybox .ci-atc-row .single_add_to_cart_button.button.alt:hover{
  background-color: var(--ci-green-hover) !important;
  border-color: var(--ci-green-hover) !important;
}

.single-product .ci-product__buybox .ci-atc-row button.single_add_to_cart_button.button.alt:focus-visible,
.single-product .ci-product__buybox .ci-atc-row .single_add_to_cart_button.button.alt:focus-visible{
  outline: 2px solid var(--ci-green);
  outline-offset: 2px;
}

/* Disabled */
.single-product .ci-product__buybox .ci-atc-row button.single_add_to_cart_button.button.alt:disabled,
.single-product .ci-product__buybox .ci-atc-row .single_add_to_cart_button.button.alt.disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Single Product: Abstand zwischen Manuals und Related */
.single-product .ci-product__related{
  margin-top: 20px;
}

/* Single Product: MwSt./Versand unter Preis */
.single-product .ci-product__price .ci-product__taxnote{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}

.single-product .ci-product__price .ci-product__shippinglink{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single-product .ci-product__price .ci-product__shippinglink:hover{
  text-decoration-thickness: 2px;
}

/* Fallback: Safety Tab notfalls per CSS verstecken */
.single-product .woocommerce-tabs #tab-title-product_safety,
.single-product .woocommerce-tabs #tab-product_safety{
  display:none !important;
}

/* ============================================
   CI My Account (Lovable-like)
   ============================================ */

.woocommerce-account .ci-account {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  display: grid;
  gap: 1.25rem;
}

.woocommerce-account .ci-account__hero,
.woocommerce-account .ci-account__panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.woocommerce-account .ci-account__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem;
}

.woocommerce-account .ci-account__hero-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.woocommerce-account .ci-account__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #ecfdf3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.woocommerce-account .ci-account__avatar svg {
  width: 22px;
  height: 22px;
  fill: var(--brand);
}

.woocommerce-account .ci-account__title {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
}

.woocommerce-account .ci-account__subtitle {
  margin: .15rem 0 0;
  color: #6b7280;
  font-size: .95rem;
}

.woocommerce-account .ci-account__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
}
.woocommerce-account .ci-account__logout:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.woocommerce-account .ci-account__tabslist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.woocommerce-account .ci-account__tablink {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  text-decoration: none;
  font-weight: 600;
}
.woocommerce-account .ci-account__tablink:hover {
  border-color: var(--brand);
}
.woocommerce-account .ci-account__tablink.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.woocommerce-account .ci-account__panel {
  padding: 1.25rem;
}

/* Forms im Panel */
.woocommerce-account .ci-account__formhead {
  margin-bottom: 1rem;
}
.woocommerce-account .ci-account__h2 {
  margin: 0 0 .25rem;
  font-size: 1.25rem;
}
.woocommerce-account .ci-account__p {
  margin: 0;
  color: #6b7280;
  font-size: .95rem;
}

.woocommerce-account .ci-account__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.woocommerce-account .ci-field--full {
  grid-column: 1 / -1;
}

.woocommerce-account .ci-field label {
  display: block;
  font-weight: 600;
  margin-bottom: .35rem;
}
.woocommerce-account .ci-field__optional {
  font-weight: 400;
  color: #6b7280;
}

.woocommerce-account .ci-account__actions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}
.woocommerce-account .ci-account__actions .button {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  border-radius: 12px;
  padding: .7rem 1.1rem;
}
.woocommerce-account .ci-account__actions .button:hover {
  filter: brightness(1.06);
}

/* Responsive: Tabs stacken */
@media (max-width: 1023.98px) {
  .woocommerce-account .ci-account__tabslist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .woocommerce-account .ci-account__grid {
    grid-template-columns: 1fr;
  }
}

/* Wishlist im Account: kein Seitenpadding */
.woocommerce-account .ci-account .ci-wishlist-page--account {
  padding: 0;
}
.woocommerce-account .ci-account .ci-wishlist-inner {
  max-width: none;
  margin: 0;
}

/* =========================================
   CI My Account – Orders & Addresses (Cards)
   ========================================= */

.woocommerce-account .ci-orders{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.woocommerce-account .ci-ordercard{
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.woocommerce-account .ci-ordercard__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.woocommerce-account .ci-ordercard__number{
  font-weight: 800;
  text-decoration: none;
  color: inherit;
}

.woocommerce-account .ci-ordercard__meta{
  display: block;
  margin-top: 2px;
  color: rgba(0,0,0,.55);
  font-size: 13px;
}

.woocommerce-account .ci-ordercard__bottom{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.woocommerce-account .ci-ordercard__label{
  display:block;
  color: rgba(0,0,0,.55);
  font-size: 12px;
  margin-bottom: 2px;
}

.woocommerce-account .ci-ordercard__value{
  font-weight: 800;
}

.woocommerce-account .ci-ordercard__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Badges */
.woocommerce-account .ci-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  white-space: nowrap;
}

/* Status farblich dezent */
.woocommerce-account .ci-badge--processing,
.woocommerce-account .ci-badge--on-hold{
  background: rgba(250, 204, 21, .15);
  border-color: rgba(250, 204, 21, .25);
}
.woocommerce-account .ci-badge--completed{
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .22);
}
.woocommerce-account .ci-badge--cancelled,
.woocommerce-account .ci-badge--failed{
  background: rgba(239, 68, 68, .10);
  border-color: rgba(239, 68, 68, .20);
}

/* Buttons scoped im Account */
.woocommerce-account .ci-account .ci-btn{
  border-radius: 12px;
  padding: 10px 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.woocommerce-account .ci-account .ci-btn--primary{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.woocommerce-account .ci-account .ci-btn--primary:hover{
  filter: brightness(1.05);
}

/* Addresses */
.woocommerce-account .ci-addresscards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.woocommerce-account .ci-addresscard{
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.woocommerce-account .ci-addresscard__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.woocommerce-account .ci-addresscard__title{
  margin: 0;
  font-size: 16px;
}

.woocommerce-account .ci-addresscard__edit{
  text-decoration: none;
  font-weight: 700;
  color: var(--brand);
}

.woocommerce-account .ci-addresscard__addr{
  margin: 0;
  font-style: normal;
  color: rgba(0,0,0,.75);
  line-height: 1.5;
}

.woocommerce-account .ci-addresscard__empty{
  margin: 0;
  color: rgba(0,0,0,.55);
}

/* Address edit form: einspaltig auf Mobile */
@media (max-width: 900px){
  .woocommerce-account .ci-addresscards{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   CI My Account – View Order (Lovable-style)
   ========================================= */

.woocommerce-account .ci-orderview__summary{
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.woocommerce-account .ci-orderview__summary-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.woocommerce-account .ci-orderview__total{
  text-align: right;
}

.woocommerce-account .ci-orderview__label{
  display:block;
  color: rgba(0,0,0,.55);
  font-size: 12px;
  margin-bottom: 2px;
}

.woocommerce-account .ci-orderview__value{
  font-weight: 800;
}

.woocommerce-account .ci-orderview__meta{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.woocommerce-account .ci-orderview__actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}

.woocommerce-account .ci-orderview__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.woocommerce-account .ci-orderview__items,
.woocommerce-account .ci-orderview__totals,
.woocommerce-account .ci-orderview__addresses,
.woocommerce-account .ci-orderview__notes{
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.woocommerce-account .ci-orderview__h3{
  margin: 0 0 10px;
  font-size: 16px;
}

.woocommerce-account .ci-orderitems{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 10px;
}

.woocommerce-account .ci-orderitem{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: rgba(0,0,0,.01);
}

.woocommerce-account .ci-orderitem__left{
  display:flex;
  gap: 10px;
  min-width: 0;
}

.woocommerce-account .ci-orderitem__thumb{
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.03);
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.woocommerce-account .ci-orderitem__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.woocommerce-account .ci-orderitem__placeholder{
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(0,0,0,.08);
}

.woocommerce-account .ci-orderitem__meta{
  min-width: 0;
}

.woocommerce-account .ci-orderitem__title{
  font-weight: 800;
  line-height: 1.2;
}
.woocommerce-account .ci-orderitem__title a{
  color: inherit;
  text-decoration: none;
}
.woocommerce-account .ci-orderitem__title a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

.woocommerce-account .ci-orderitem__sub{
  margin-top: 2px;
  color: rgba(0,0,0,.55);
  font-size: 13px;
}

.woocommerce-account .ci-orderitem__metaextra{
  margin-top: 6px;
  color: rgba(0,0,0,.65);
  font-size: 13px;
}

.woocommerce-account .ci-orderitem__price{
  font-weight: 800;
  white-space: nowrap;
}

.woocommerce-account .ci-totals{
  margin: 0;
}

.woocommerce-account .ci-totals__row{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.woocommerce-account .ci-totals__row:first-child{
  border-top: 0;
  padding-top: 0;
}
.woocommerce-account .ci-totals__label{
  color: rgba(0,0,0,.65);
  margin: 0;
}
.woocommerce-account .ci-totals__value{
  margin: 0;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.woocommerce-account .ci-addressblocks{
  display:grid;
  gap: 10px;
}

.woocommerce-account .ci-addressblock{
  padding: 10px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: rgba(0,0,0,.01);
}

.woocommerce-account .ci-addressblock__title{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
}

.woocommerce-account .ci-addressblock__addr{
  margin: 0;
  font-style: normal;
  line-height: 1.5;
  color: rgba(0,0,0,.75);
}

.woocommerce-account .ci-notes{
  list-style:none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 10px;
}
.woocommerce-account .ci-notes__item{
  padding: 10px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  background: rgba(0,0,0,.01);
}
.woocommerce-account .ci-notes__meta{
  color: rgba(0,0,0,.55);
  font-size: 12px;
  margin-bottom: 6px;
}

/* Responsive */
@media (max-width: 980px){
  .woocommerce-account .ci-orderview__grid{
    grid-template-columns: 1fr;
  }
  .woocommerce-account .ci-orderview__meta{
    grid-template-columns: 1fr;
  }
}

/* My Account Wishlist: Clear-Icon exakt wie Remove-Icon */
.woocommerce-account .ci-account .ci-wishlist-clear__icon{
  width: 20px;
  height: 20px;
  display: block;
}

.woocommerce-account .ci-account .ci-wishlist-clear__icon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* =========================================================
   Wishlist Page (Standalone): Header Actions im Card-Look
   - wirkt wie aus einem Guss mit den Cards
   - NICHT im My Account Endpoint
   ========================================================= */

.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-header__right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Shared button base (Mini-Card Look) */
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-add-all,
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-clear{
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 44px;
  padding: 0 16px;

  width: auto;
  max-width: 100%;
  margin: 0; /* kill global margin-right */

  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary (Alles in den Warenkorb) */
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-add-all{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-add-all:hover{
  filter: brightness(1.05);
}

/* Secondary (Merkliste leeren) */
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-clear{
  color: #374151;
}
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-clear:hover{
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 10px 22px rgba(239,68,68,.12);
  color: #b91c1c;
}

/* Icons */
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-add-all__icon svg,
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-clear__icon{
  width: 18px;
  height: 18px;
  display: block;
}

/* Clear Icon = Outline (stroke), passt zu Remove-Icon */
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-clear__icon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Focus */
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-add-all:focus-visible,
.ci-wishlist-page:not(.ci-wishlist-page--account) .ci-wishlist-clear:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* =========================================================
   Wishlist (My Account): Header Actions im Card-Look
   ========================================================= */

.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-header__right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Shared button base (Mini-Card Look) */
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-add-all,
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-clear{
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 44px;
  padding: 0 16px;

  width: auto;
  max-width: 100%;
  margin: 0;

  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary */
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-add-all{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-add-all:hover{
  filter: brightness(1.05);
}

/* Secondary / destructive */
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-clear{
  color: #374151;
}
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-clear:hover{
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 10px 22px rgba(239,68,68,.12);
  color: #b91c1c;
}

/* Icons */
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-add-all__icon svg,
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-clear__icon{
  width: 18px;
  height: 18px;
  display: block;
}

/* Clear Icon = Outline (stroke) */
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-clear__icon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Focus */
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-add-all:focus-visible,
.ci-wishlist-page.ci-wishlist-page--account .ci-wishlist-clear:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}


/* =====================================================
   FINAL: Mobile/Tablet Offcanvas Nav – full height + scroll
   Fix: entfernt Caps (max-height) und verhindert Scroll-Dead-Ends
   ===================================================== */
@media (max-width:1023.98px){

  /* Nav-Overlay muss IMMER viewport-hoch sein und scrollen dürfen */
  #ci-header .ci-row.ci-row-nav{
    inset: 0 !important;
    height: 100svh !important;
    max-height: 100svh !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* unten Platz für Browserleisten / Safe-Area (iOS) */
  #ci-header .ci-row.ci-row-nav .ci-container{
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px) !important;
  }

  /* Keine verschachtelten Scroll-Container: Mega soll „mitlaufen“ */
  #ci-header .ci-row.ci-row-nav .ci-mega{
    max-height: none !important;
    overflow: visible !important;
  }
}
/* =========================================================
   Mega Menu CTA (Mobile/Tablet): Kontakt + Mein Konto in CI
   ========================================================= */
@media (max-width:1023.98px){

  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__cta{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
  }

  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__cta .ci-cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    height: 44px;
    padding: 0 14px;

    border-radius: 12px;
    border: 1px solid var(--brand);
    background: var(--brand);

    color: #fff !important; /* überschreibt 'mega a { color: var(--text) !important; }' */
    font-weight: 700;
    text-decoration: none !important;

    box-shadow: 0 10px 22px rgba(0,0,0,.08);
  }

  /* zwei Buttons nebeneinander, wenn Platz – sonst sauber umbrechen */
  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__cta .ci-cta-btn{
    flex: 1 1 160px;
  }

  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__cta .ci-cta-btn:hover{
    filter: brightness(.95);
  }

  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__cta .ci-cta-btn svg{
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
  }

  #ci-header .ci-row.ci-row-nav .ci-mega .ci-mega__cta .ci-cta-btn:focus-visible{
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
}
/* =========================================================
   FINAL: Desktop Search submit icon sichtbar (wie mobile/tablet)
   ========================================================= */
@media (min-width: 1024px){

  /* Reserviert Platz für die Lupe (dein globales Input-Override nimmt das sonst weg) */
  #ci-header .ci-row.ci-row-main .ci-searchform__input{
    padding-right: 48px !important;
  }

  /* Sicherstellen, dass der Submit-Button über dem Input liegt */
  #ci-header .ci-row.ci-row-main .ci-searchform__submit{
    z-index: 3;
    display: inline-flex;
    color: var(--text);
  }

  #ci-header .ci-row.ci-row-main .ci-searchform__submit svg{
    stroke: currentColor;
    fill: none;
    display: block;
  }
}
/* === FIX: Desktop Search Submit Icon sichtbar (Astra Button Reset + Stacking) === */
@media (min-width:1024px){
  #ci-header .ci-only-desktop .ci-searchform{
    position: relative; /* stacking context */
  }

  #ci-header .ci-only-desktop .ci-searchform__input{
    position: relative;
    z-index: 1; /* Input unter dem Button */
  }

  #ci-header .ci-only-desktop .ci-searchform__submit{
    z-index: 2; /* Button über dem Input */
    padding: 0 !important;
    margin: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: var(--text) !important; /* verhindert „weiß auf weiß“ */
    -webkit-appearance: none;
    appearance: none;
    line-height: 0 !important;
  }

  #ci-header .ci-only-desktop .ci-searchform__submit svg{
    display: block !important;
    width: 18px;
    height: 18px;
  }

  #ci-header .ci-only-desktop .ci-searchform__submit:focus-visible{
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 10px;
  }
}

/* =========================================================
   Footer: Sichere Zahlungsmethoden (Lovable-like Paycards)
   Scoped, damit Astra/Global SVG Rules nicht reinfunken
========================================================= */

#ci-footer .ci-footer__pay{
  padding: 28px 0;
  background: #fff;
}

#ci-footer .ci-footer__pay .ci-paywrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#ci-footer .ci-footer__pay .ci-foothead{
  margin: 0;
  text-align: center; /* ersetzt inline-style */
}

#ci-footer .ci-footer__pay .ci-paygrid{
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

#ci-footer .ci-footer__pay .ci-paycard{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);

  padding: 18px 16px;
  min-height: 110px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  text-align: center;
}

#ci-footer .ci-footer__pay .ci-paycard > svg{
  flex: 0 0 auto;
}

/* SVG: fix sizing + keine Clipping-Probleme + CI-Farbe */
#ci-footer .ci-footer__pay svg.ci-ico{
  width: 34px;
  height: 34px;

  display: block;
  overflow: visible;

  color: var(--ci-green, #86BC25);
  stroke: currentColor;
  fill: none;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#ci-footer .ci-footer__pay .ci-paycard > span{
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
  color: #111827;
}

/* Responsive */
@media (max-width: 900px){
  #ci-footer .ci-footer__pay .ci-paygrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  #ci-footer .ci-footer__pay .ci-paygrid{
    grid-template-columns: 1fr;
  }
  #ci-footer .ci-footer__pay .ci-paycard{
    min-height: 96px;
  }
}

/* =========================================================
   Kontaktseite (/contact/) – CI (MyAccount Look)
   ========================================================= */

.ci-contactpage{
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  display: grid;
  gap: 1.25rem;
}

.ci-contact__hero,
.ci-contact__panel{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.ci-contact__hero{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
}

.ci-contact__hero-left{
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.ci-contact__avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #ecfdf3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ci-contact__avatar svg{
  width: 22px;
  height: 22px;
  fill: var(--brand);
}

.ci-contact__title{
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.2;
}

.ci-contact__subtitle{
  margin: .15rem 0 0;
  color: #6b7280;
  font-size: .95rem;
}

.ci-contact__panel{
  padding: 1.25rem;
}

.ci-contact__grid{
  display: grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 1.25rem;
  align-items: start;
}

.ci-contact__aside{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  padding: 1rem;
}

.ci-contact__aside-title{
  margin: 0 0 .35rem;
  font-size: 1.1rem;
}

.ci-contact__aside-text{
  margin: 0 0 .25rem;
  color: #6b7280;
  font-size: .95rem;
}

.ci-contact__mail{
  display: inline-block;
  font-weight: 800;
  text-decoration: none;
  color: var(--brand);
  margin-bottom: .75rem;
}

.ci-contact__aside-note{
  margin-top: .5rem;
  padding-top: .75rem;
  border-top: 1px solid #e5e7eb;
  color: #374151;
  font-size: .95rem;
}

.ci-alert{
  border-radius: 12px;
  padding: .85rem 1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  margin-bottom: 1rem;
}
.ci-alert--success{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.08);
}
.ci-alert--error{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.08);
}

.ci-fieldgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1rem;
}

.ci-field--full{ grid-column: 1 / -1; }

.ci-contactpage .ci-field label{
  display: block;
  font-weight: 700;
  margin-bottom: .35rem;
}

.ci-field__optional{
  font-weight: 400;
  color: #6b7280;
}

.ci-contactpage .ci-field input,
.ci-contactpage .ci-field select,
.ci-contactpage .ci-field textarea{
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: .7rem .85rem;
  background: #fff;
  font-size: 1rem;
}

.ci-contactpage .ci-field textarea{ resize: vertical; }

.ci-contactpage .ci-field input:focus,
.ci-contactpage .ci-field select:focus,
.ci-contactpage .ci-field textarea:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}

.ci-contact__muted{
  margin: .35rem 0 0;
  color: #6b7280;
  font-size: .9rem;
}

.ci-field--check .ci-check{
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.ci-field--check input{ margin-top: .2rem; }

.ci-contact__actions{
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

.ci-contactpage .ci-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: .7rem 1.1rem;
  border: 1px solid transparent;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.ci-contactpage .ci-btn--primary{
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  min-width: 220px;
}

.ci-contactpage .ci-btn--primary:hover{
  filter: brightness(1.06);
}

/* Honeypot */
.ci-contactpage .ci-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 1023.98px){
  .ci-contact__grid{ grid-template-columns: 1fr; }
  .ci-fieldgrid{ grid-template-columns: 1fr; }
  .ci-contact__actions{ justify-content: stretch; }
  .ci-contactpage .ci-btn--primary{ width: 100%; min-width: 0; }
}

/* Contact: Hero Avatar (wie MyAccount) */
.ci-contact__avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(134,188,37,.12);
  color: var(--ci-green, var(--brand));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ci-contact__avatar svg{
  width: 22px;
  height: 22px;
  display: block;
}

/* Contact: Consent Checkbox inline mit Text */
.ci-contactpage .ci-field--check .ci-check{
  display: flex;
  align-items: center;   /* statt flex-start */
  gap: 10px;
}

.ci-contactpage .ci-field--check .ci-check input{
  margin: 0;             /* kill offset */
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.ci-contactpage .ci-field--check .ci-check span{
  display: inline;
  line-height: 1.35;
}

/* Contact Hero Icon: immer stroke-only */
.ci-contact__avatar .ci-contact__avatar-icon{
  display: block;
  width: 22px;
  height: 22px;
}

.ci-contact__avatar .ci-contact__avatar-icon path{
  fill: none;
  stroke: currentColor;
}

/* =========================================================
   Contact Hero: Lovable-like Avatar Icon
   ========================================================= */

.ci-contact__hero-left{
  align-items: center;
}

.ci-contact__avatar{
  width: 48px;
  height: 48px;
  border-radius: 999px;

  /* Lovable: soft tint + subtiler Ring */
  background: rgba(134,188,37,.12);
  border: 1px solid rgba(134,188,37,.18);

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

  color: var(--ci-green, var(--brand));
  flex: 0 0 auto;
}

/* Icon: etwas größer, stroke ruhiger, optisch minimal nach oben */
.ci-contact__avatar .ci-contact__avatar-icon{
  width: 24px;
  height: 24px;
  display: block;
  transform: translateY(-.5px);
}

.ci-contact__avatar .ci-contact__avatar-icon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* =========================================================
   Single Product: Lieferzeit (Lovable-like Pill)
   ========================================================= */
.single-product .ci-product__price .ci-product__delivery{
  margin: 10px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(134,188,37,.22);
  background: rgba(134,188,37,.12);

  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ci-green);

  max-width: 100%;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.single-product .ci-product__price .ci-product__delivery-icon{
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: block;
}

.single-product .ci-product__price .ci-product__delivery-icon path,
.single-product .ci-product__price .ci-product__delivery-icon circle{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.single-product .ci-product__price .ci-product__delivery-label{
  margin: 0;
  font-weight: 600;
}

.single-product .ci-product__price .ci-product__delivery-value{
  font-weight: 800;
}

@media (max-width: 480px){
  .single-product .ci-product__price .ci-product__delivery{
    font-size: 12.5px;
    padding: 7px 9px;
  }
}

/* ==== Woo Thankyou: Hinweisbox ==== */
.ci-thankyou-note{
  margin: 16px 0 0;
  padding: 12px 16px;

  border-radius: var(--radius);
  box-shadow: var(--shadow);

  /* Fallback (falls color-mix nicht unterstützt) */
  background: rgba(138,195,63,.10);
  border: 1px solid rgba(138,195,63,.22);

  /* Modern (überschreibt Fallback, wenn möglich) */
  background: color-mix(in srgb, var(--brand) 12%, #ffffff);
  border-color: color-mix(in srgb, var(--brand) 28%, #ffffff);

  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* =========================================================
   Footer Main: Kundenservice zentriert + Linkliste als Grid
   Desktop: 4 Spalten | Tablet: 2 | Mobile: 1
========================================================= */
#ci-footer .ci-footer__main .ci-footgrid--single{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  justify-items: center; /* Block im Container zentriert */
}

#ci-footer .ci-footer__main .ci-footcol{
  width: 100%;
}

#ci-footer .ci-footer__main .ci-foothead{
  margin: 0 0 14px;
  text-align: center; /* "Kundenservice" mittig */
}

/* UL als 4-Spalten Grid über Containerbreite */
#ci-footer .ci-footer__main .ci-footlist{
  list-style: none;
  margin: 0;
  padding: 0;

  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;

  /* optisch sauber verteilt */
  justify-items: center;
  align-items: start;
}

#ci-footer .ci-footer__main .ci-footlist li{
  margin: 0;
  padding: 0;
}

/* Link-Styles (CI-konform, ohne Inline-Styles) */
#ci-footer .ci-footer__main .ci-footlist a{
  display: inline-flex;
  justify-content: left;
  color: #111;
  text-decoration: none;
  font-weight: 600;
}

#ci-footer .ci-footer__main .ci-footlist a:hover{
  color: var(--brand, #8AC33F);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Tablet: 2 Spalten */
@media (max-width: 900px){
  #ci-footer .ci-footer__main .ci-footlist{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }
}

/* Mobile: 1 Spalte */
@media (max-width: 560px){
  #ci-footer .ci-footer__main .ci-footlist{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Footer Trust: Cards zentrieren (Desktop) + CI Card Look
========================================================= */
#ci-footer .ci-footer__trust{
  background: #f7f7f7;
  padding: 22px 0;
}

#ci-footer .ci-footer__trust .ci-trustgrid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* <<< zentriert auf Desktop */
  gap: 18px;
}

#ci-footer .ci-footer__trust .ci-trustcard{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 16px 16px;

  flex: 0 1 260px; /* 3 Cards wirken „gruppiert“ statt Full-Width */
  text-align: center;
}

#ci-footer .ci-footer__trust .ci-trustcard h4{
  margin: 10px 0 4px;
  font-size: 1rem;
  line-height: 1.2;
}

#ci-footer .ci-footer__trust .ci-trustcard p{
  margin: 0;
  color: #6b7280;
  font-size: .95rem;
  line-height: 1.35;
}

#ci-footer .ci-footer__trust .ci-trustcard svg.ci-ico{
  width: 34px;
  height: 34px;
  display: block;
  margin: 0 auto;
  overflow: visible;

  color: var(--ci-green, #86BC25);
  stroke: currentColor;
  fill: none;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}