/* Base layout */
#custom-footer.custom-footer-section{
  background: var(--sfcf-bg) no-repeat center/cover !important;
  padding: 4rem 2rem !important;
  color: var(--sfcf-footer-text, #fff) !important;
  font-size: 1rem !important;
}
.custom-footer-content{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:2rem;
  flex-wrap:nowrap;
}
.footer-left{text-align:left !important;}
.footer-right{
  text-align:right !important;
  display:flex;flex-direction:column;gap:.3rem;
}
.footer-left p,.footer-left a,
.footer-right a{
  color: var(--sfcf-footer-text, #fff) !important;
  font-size:1rem !important;
  text-decoration:none !important;
}
.footer-left a:hover, .footer-right a:hover{ color: var(--sf-green, #81c80d) !important; }
.sfcf-link + .sfcf-link{ margin-top:.15rem; }
.sfcf-sc{ display:block; margin:.15rem 0; }

/* Popups */
.custom-popup{
  display:none;
  position:fixed !important;
  inset:0 !important;
  justify-content:center;
  align-items:center;
  overflow:hidden !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  background-color: var(--sfcf-backdrop, rgba(255,255,255,.30)) !important;
  z-index: 2147483600 !important;
}
.custom-popup.active{ display:flex !important; }
.popup-inner{
  background: var(--sfcf-panel-bg, rgba(0,0,0,.10)) !important;
  border: 2px solid var(--sf-green, #81c80d) !important;
  border-radius: 10px !important;
  color: var(--sfcf-panel-text, #fff) !important;
  padding: 1rem !important;
  width: min(90%, 900px) !important;
  max-width: 900px !important;
  max-height: 70vh !important;
  overflow-y:auto !important;
  position:relative !important;
  transform: translateY(10vh);
  text-align:left !important;
  box-sizing:border-box !important;
}
.popup-inner *{ color: var(--sfcf-panel-text, #fff) !important; }
.sfcf-close{
  background:none !important;
  border:none !important;
  color: var(--sf-green, #81c80d) !important;
  font-size:2rem !important;
  position:absolute !important;
  top:1rem; right:1.5rem;
  cursor:pointer !important;
}

/* Variants */
.sfcf-variant-hell{
  --sfcf-footer-text:#111;
  --sfcf-backdrop: rgba(255,255,255,.65);
  --sfcf-panel-bg: rgba(255,255,255,.92);
  --sfcf-panel-text:#111;
}
.sfcf-variant-medium{
  --sfcf-footer-text:#fff;
  --sfcf-backdrop: rgba(255,255,255,.30);
  --sfcf-panel-bg: rgba(0,0,0,.10);
  --sfcf-panel-text:#fff;
}
.sfcf-variant-dunkel{
  --sfcf-footer-text:#fff;
  --sfcf-backdrop: rgba(0,0,0,.45);
  --sfcf-panel-bg: rgba(0,0,0,.60);
  --sfcf-panel-text:#fff;
}

/* Mobile */
@media (max-width: 768px){
  .custom-footer-content{ flex-wrap:wrap; }
  .footer-right{ text-align:left !important; }
  .popup-inner{ transform: translateY(15vh) !important; width:90% !important; }
}

html, body { overflow-x:hidden !important; }
#sfcf_downloadSearch{
  display:block;width:100%;max-width:100%;
  padding:.8rem;margin:1rem 0;font-size:1rem;border:1px solid var(--sf-green, #81c80d);
}
#sfcf_downloadSearch::placeholder{opacity:.75;}
.popup-inner::-webkit-scrollbar{width:8px;}
.popup-inner::-webkit-scrollbar-thumb{background-color: var(--sf-green, #81c80d); border-radius:6px;}

/* === Global: Popup ohne grüne Border, Controls neutral === */
#custom-footer .popup-inner{
  border: none !important;          /* grüne Border weg */
  box-shadow: 0 16px 48px rgba(0,0,0,.35) !important; /* angenehmer Schatten */
}
#custom-footer .sfcf-close{
  color: currentColor !important;   /* Icon übernimmt die Textfarbe der Variante */
}

/* Inputs im Popup an die Textfarbe anpassen */
#custom-footer .popup-inner input[type="text"],
#custom-footer .popup-inner input[type="search"],
#custom-footer .popup-inner textarea{
  color: var(--sfcf-panel-text) !important;
  background: transparent !important;
  border: 1px solid currentColor !important;     /* keine grüne Linie mehr */
  outline: none !important;
}
#custom-footer .popup-inner input::placeholder,
#custom-footer .popup-inner textarea::placeholder{
  color: color-mix(in srgb, var(--sfcf-panel-text) 70%, transparent) !important;
}
#custom-footer .popup-inner::-webkit-scrollbar-thumb{
  background-color: currentColor !important;      /* statt grün */
}

/* === Varianten neu definiert === */

/* HELL: weißer Text im Footer und im Popup, dunkles Panel + dunkler Backdrop */
.sfcf-variant-hell{
  --sfcf-footer-text: #fff;
  --sfcf-panel-text:  #fff;
  --sfcf-panel-bg:    rgba(0,0,0,.78);   /* ausreichend dunkel für gute Lesbarkeit */
  --sfcf-backdrop:    rgba(0,0,0,.55);   /* dunkler Hintergrund hinter dem Panel */
}

/* MEDIUM: weiße Schriften, spürbar dunkleres Panel + Backdrop als vorher */
.sfcf-variant-medium{
  --sfcf-footer-text: #bfbfbf !important;
  --sfcf-panel-text:  #bfbfbf !important;
  --sfcf-panel-bg:    rgba(0,0,0,.66);
  --sfcf-backdrop:    rgba(0,0,0,.45);
}

/* DUNKEL: überall schwarze Schrift; helles Panel + heller Backdrop */
.sfcf-variant-dunkel{
  --sfcf-footer-text: #000;
  --sfcf-panel-text:  #000;
  --sfcf-panel-bg:    rgba(255,255,255,.96);
  --sfcf-backdrop:    rgba(255,255,255,.65);
}

/* Optional: Links im Footer nicht mehr grün hovern (falls gewünscht) */
/*
#custom-footer .footer-left a:hover,
#custom-footer .footer-right a:hover{
  color: currentColor !important;
}
*/
/* Popup-Rand global aus: */
.custom-popup .popup-inner{ border: none !important; }

/* HELL: mittleres Grau + dunkles Panel/Backdrop wie gewünscht */
.sfcf-variant-hell,
.custom-popup.sfcf-variant-hell{
  --sfcf-footer-text: #bfbfbf;
  --sfcf-panel-text:  #bfbfbf;
  --sfcf-panel-bg:    rgba(0,0,0,.78);
  --sfcf-backdrop:    rgba(0,0,0,.55);
}

/* MEDIUM: mittleres Grau + spürbar dunkler */
.sfcf-variant-medium,
.custom-popup.sfcf-variant-medium{
  --sfcf-footer-text: #bfbfbf;
  --sfcf-panel-text:  #bfbfbf;
  --sfcf-panel-bg:    rgba(0,0,0,.66);
  --sfcf-backdrop:    rgba(0,0,0,.45);
}

/* DUNKEL: schwarze Schriften + helle Panels/Backdrop */
.sfcf-variant-dunkel,
.custom-popup.sfcf-variant-dunkel{
  --sfcf-footer-text: #000;
  --sfcf-panel-text:  #000;
  --sfcf-panel-bg:    rgba(255,255,255,.96);
  --sfcf-backdrop:    rgba(255,255,255,.65);
}

/* Close-Icon & Scrollbar nicht mehr grün, sondern passend zur Textfarbe: */
.custom-popup .sfcf-close{ color: var(--sfcf-panel-text) !important; }
.custom-popup .popup-inner::-webkit-scrollbar-thumb{ background-color: var(--sfcf-panel-text) !important; }

/* Download-Suchfeld ohne grünen Rand */
.custom-popup #sfcf_downloadSearch{
  border: 1px solid var(--sfcf-panel-text) !important;
  color: var(--sfcf-panel-text) !important;
  background: transparent !important;
}
.custom-popup #sfcf_downloadSearch::placeholder{
  color: color-mix(in srgb, var(--sfcf-panel-text) 70%, transparent) !important;
}