/* CI Footer (scoped) – aligned to your existing CSS variables.
   It *reads* global variables (e.g. --brand, --background, --foreground, --muted, --muted-foreground, --border, --radius)
   and only falls back to safe defaults if they are not present.
   No Tailwind required. Drop-in safe. */

#ci-footer{
  /* Pull from site-wide tokens when available */
  --ci-brand: var(--brand, hsl(86 51% 51%));                 /* primary brand */
  --ci-brand-10: color-mix(in oklab, var(--ci-brand) 10%, transparent);
  --ci-bg: var(--background, hsl(0 0% 100%));
  --ci-fg: var(--foreground, hsl(0 0% 20%));
  --ci-muted: var(--muted, hsl(0 0% 96%));
  --ci-muted-fg: var(--muted-foreground, hsl(0 0% 46%));
  --ci-border: var(--border, hsl(0 0% 91%));
  --ci-radius: var(--radius, .5rem);
  --ci-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);

  background: linear-gradient(to bottom, var(--ci-bg), var(--ci-muted));
  color: var(--ci-fg);
  border-top:1px solid var(--ci-border);
  font-size:16px;
  line-height:1.5;
}

#ci-footer .ci-container{max-width:1200px; margin:0 auto; padding:0 1rem;}
#ci-footer .ci-ico{width:28px; height:28px; stroke: currentColor; fill:none; stroke-width:1.6; display:block; color: #8AC33F}
#ci-footer a{color:inherit; text-decoration:none;}
#ci-footer a:hover{color: var(--ci-brand);}

/* Trust badges row */
#ci-footer .ci-footer__trust{border-bottom:1px solid var(--ci-border); background: linear-gradient(90deg, var(--ci-brand-10), transparent, var(--ci-brand-10));}
#ci-footer .ci-trustgrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; padding:24px 0; margin:0; list-style:none;}
/* Trustcards im Footer */
#ci-footer .ci-trustcard {
  background: rgba(255, 255, 255, .5);
  border-radius: var(--ci-radius);
  padding: 16px;
  text-align: center;
  box-shadow: var(--ci-shadow-md);
  transition: background .3s ease;

  display: flex;               /* Flex-Layout aktivieren */
  flex-direction: column;      /* Inhalte vertikal stapeln */
  align-items: center;         /* horizontale Zentrierung */
  justify-content: center;     /* vertikale Zentrierung falls nötig */
}#ci-footer .ci-trustcard:hover{background: rgba(255,255,255,.8);}
#ci-footer .ci-trustcard h4{margin:.25rem 0; font-weight:600; font-size:14px;}
#ci-footer .ci-trustcard p{margin:0; color: var(--ci-muted-fg); font-size:12px;}

/* Main footer grid */
#ci-footer .ci-footer__main{padding:48px 0;}
#ci-footer .ci-footgrid{display:grid; grid-template-columns:1fr; gap:32px;}
#ci-footer .ci-footcol{min-width:0;}
#ci-footer .ci-foothead{font-size:18px; font-weight:700; margin:0 0 12px; color: var(--ci-fg);}
#ci-footer .ci-footcopy{color: var(--ci-muted-fg); margin:8px 0 16px;}
#ci-footer .ci-footer__logo{height:48px; width:auto; border-radius:8px; box-shadow: var(--ci-shadow-md); display:block;}
#ci-footer .ci-footer__logotxt{font-weight:700; font-size:20px;}

#ci-footer .ci-socials{display:flex; gap:12px;}
#ci-footer .ci-socialbtn{width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--ci-border); border-radius:999px; transition:all .2s ease; background: var(--ci-bg); color: var(--ci-fg);}
#ci-footer .ci-socialbtn:hover{background: var(--ci-brand); color:white; border-color:var(--ci-brand);}
#ci-footer .ci-socialbtn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.6;}

#ci-footer .ci-footlist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
#ci-footer .ci-footlist a{color: var(--ci-muted-fg);}
#ci-footer .ci-footlist a:hover{color: var(--ci-brand);}

#ci-footer .ci-contact{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
#ci-footer .ci-contact li{display:flex; align-items:flex-start; gap:10px; color: var(--ci-muted-fg);}
#ci-footer .ci-contact .ci-ico{margin-top:2px; min-width:20px; min-height:20px; width:20px; height:20px;color: #8AC33F;}

/* Shipping badges */
#ci-footer .ci-footcol--wide .ci-badges{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
#ci-footer .ci-badge{display:flex; align-items:center; gap:10px; padding:12px; border-radius:var(--ci-radius); background: color-mix(in oklab, var(--ci-muted) 60%, transparent);}
#ci-footer .ci-badge span{font-weight:600; font-size:14px; color: var(--ci-fg);}

/* Payments */
#ci-footer .ci-footer__pay{border-top:1px solid var(--ci-border); background: color-mix(in oklab, var(--ci-muted) 30%, transparent); padding:32px 0;}
#ci-footer .ci-paywrap{text-align:center; display:grid; gap:16px;}
#ci-footer .ci-paygrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; max-width:720px; margin:0 auto;}
#ci-footer .ci-paycard{background: var(--ci-bg); border-radius:var(--ci-radius); padding:16px; display:grid; place-items:center; gap:8px; transition:background .2s ease; border:1px solid var(--ci-border);}
#ci-footer .ci-paycard:hover{background: color-mix(in oklab, var(--ci-bg) 95%, black 5%);}
#ci-footer .ci-paycard .ci-ico{width:32px; height:32px; color: #8AC33F;}

/* Legal */
#ci-footer .ci-footer__legal{border-top:1px solid var(--ci-border); background: color-mix(in oklab, var(--ci-muted) 50%, transparent); padding:20px 0;}
#ci-footer .ci-legalwrap{display:grid; gap:12px; justify-items:center;}
#ci-footer .ci-legallist{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; list-style:none; padding:0; margin:0;}
#ci-footer .ci-legallist a{color: var(--ci-muted-fg);}
#ci-footer .ci-legallist a:hover{color: var(--ci-brand);}
#ci-footer .ci-sep{color: var(--ci-muted-fg);}
#ci-footer .ci-copy{color: var(--ci-muted-fg); font-size:14px; margin:0;}

/* Responsive */
@media (min-width: 768px){
  #ci-footer .ci-trustgrid{grid-template-columns:repeat(4, minmax(0,1fr));}
  #ci-footer .ci-footgrid{grid-template-columns:repeat(2, minmax(0,1fr));}
  #ci-footer .ci-paygrid{grid-template-columns:repeat(4, minmax(0,1fr));}
}
@media (min-width: 1024px){
  #ci-footer .ci-footgrid{grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px;}
}