:root{
  --sfcf-accent:#51A253;
  --sfcf-radius:12px;
  --sfcf-shadow:0 10px 30px rgba(0,0,0,.12);
  --sfcf-border:1px solid rgba(17,17,17,.08);
  --sfcf-font:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* === Popup: Geometrie & Form wie Cookie-Modal === */
body > .custom-popup{
  display:none; position:fixed; inset:0; z-index:2147483640;
  align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  background:transparent; /* Farbe kommt aus Variante */
  padding:24px; overflow:auto;
}
body > .custom-popup.active{ display:flex; }

body > .custom-popup .popup-inner{
  width:min(90%,900px); max-width:900px; max-height:90vh; overflow:auto;
  background:rgba(255,255,255,.72);
  color:#111;
  backdrop-filter:blur(10px);
  border-radius:var(--sfcf-radius); border:var(--sfcf-border);
  box-shadow:var(--sfcf-shadow);
  padding:16px; position:relative; text-align:left;
  font-family:var(--sfcf-font);
}
@media (max-width:640px){
  body > .custom-popup .popup-inner{ max-height:88vh; }
}

/* Struktur/Typo innen */
body > .custom-popup .popup-head{ padding:0 0 8px; }
body > .custom-popup .popup-title{ margin:0 0 6px; font:600 18px/1.2 var(--sfcf-font); }
body > .custom-popup .popup-sub{ font-size:13px; color:#333; }
body > .custom-popup .popup-body{ display:grid; gap:10px; }
body > .custom-popup .popup-card{ background:rgba(255,255,255,.6); border:1px solid rgba(17,17,17,.08); border-radius:10px; padding:12px; }
body > .custom-popup .popup-list{ display:grid; gap:8px; }
body > .custom-popup .popup-item{ background:rgba(255,255,255,.6); border:1px solid rgba(17,17,17,.08); border-radius:8px; padding:10px; font-size:14px; }
body > .custom-popup .popup-meta{ font-size:12px; color:#333; margin-top:4px; }

/* Close */
body > .custom-popup .sfcf-close{
  position:absolute; top:12px; right:16px;
  background:none; border:none; cursor:pointer; font-size:2rem; line-height:1; color:currentColor;
}

/* Inputs */
body > .custom-popup .popup-inner input[type="text"],
body > .custom-popup .popup-inner input[type="search"],
body > .custom-popup .popup-inner textarea{
  width:100%; background:transparent; border:1px solid currentColor; border-radius:8px;
  padding:.6rem .8rem; color:currentColor; outline:none;
}
body > .custom-popup .popup-inner input::placeholder,
body > .custom-popup .popup-inner textarea::placeholder{
  color: color-mix(in srgb, currentColor 70%, transparent);
}

/* Buttons */
body > .custom-popup .sfcf-btn{
  appearance:none; border:none; cursor:pointer; border-radius:10px; padding:10px 14px;
  font:600 14px/1 var(--sfcf-font);
}
body > .custom-popup .sfcf-btn.primary{ background:var(--sfcf-btn-primary); color:var(--sfcf-btn-primary-text); }
body > .custom-popup .sfcf-btn.ghost{ background:var(--sfcf-btn-ghost-bg); color:currentColor; }

/* Scrollbar */
body > .custom-popup .popup-inner::-webkit-scrollbar{ width:8px; }
body > .custom-popup .popup-inner::-webkit-scrollbar-thumb{ background-color:currentColor; border-radius:6px; }

/* === Varianten (nur Backdrop, Schrift, Buttons) === */
body > .custom-popup.sfcf-variant-hell{
  background:rgba(0,0,0,.45);
  color:#111;
  --sfcf-btn-primary:#51A253; --sfcf-btn-primary-text:#fff; --sfcf-btn-ghost-bg:rgba(17,17,17,.06);
}
body > .custom-popup.sfcf-variant-hell .popup-inner,
body > .custom-popup.sfcf-variant-hell .popup-inner *{ color:#111; }
body > .custom-popup.sfcf-variant-hell .popup-sub,
body > .custom-popup.sfcf-variant-hell .popup-meta{ color:#333; }

body > .custom-popup.sfcf-variant-medium{
  background:rgba(36,36,36,.72);
  color:#fff;
  --sfcf-btn-primary:#51A253; --sfcf-btn-primary-text:#fff; --sfcf-btn-ghost-bg:rgba(255,255,255,.12);
}
body > .custom-popup.sfcf-variant-medium .popup-inner,
body > .custom-popup.sfcf-variant-medium .popup-inner *{ color:#fff; }
body > .custom-popup.sfcf-variant-medium .popup-sub,
body > .custom-popup.sfcf-variant-medium .popup-meta{ color:rgba(255,255,255,.82); }

body > .custom-popup.sfcf-variant-dunkel{
  background:rgba(18,18,18,.72);
  color:#fff;
  --sfcf-btn-primary:#51A253; --sfcf-btn-primary-text:#fff; --sfcf-btn-ghost-bg:rgba(255,255,255,.14);
}
body > .custom-popup.sfcf-variant-dunkel .popup-inner,
body > .custom-popup.sfcf-variant-dunkel .popup-inner *{ color:#fff; }
body > .custom-popup.sfcf-variant-dunkel .popup-sub,
body > .custom-popup.sfcf-variant-dunkel .popup-meta{ color:rgba(255,255,255,.78); }

/* === Links: übernehmen Textfarbe, Hover dunkelgrau === */
#custom-footer .footer-left a,
#custom-footer .footer-right a,
body > .custom-popup .popup-inner a{ color:currentColor; }
#custom-footer .footer-left a:hover,
#custom-footer .footer-right a:hover,
body > .custom-popup .popup-inner a:hover{ color:#333 !important; }

/* Schrift im Custom Footer: schwarz, Hover leicht aufgehellt */
#custom-footer.custom-footer-section{
  color:#000;
}
#custom-footer .footer-left p,
#custom-footer .footer-left a,
#custom-footer .footer-right a{
  color:#000 !important;
  text-decoration:none;
}

/* Hover leicht heller (von schwarz → dunkles Grau) */
#custom-footer .footer-left a:hover,
#custom-footer .footer-right a:hover{
  color:#444 !important; /* alternativ #3a3a3a, wenn du noch minimal heller willst */
}

/* Footer-Left: linksbündig ausrichten (Footer-Right bleibt wie ist) */
#custom-footer .footer-left{
  text-align: left !important;
  align-self: flex-start; /* falls Builder zentriert */
}

#custom-footer .footer-left p,
#custom-footer .footer-left a,
#custom-footer .footer-left li,
#custom-footer .footer-left h1,
#custom-footer .footer-left h2,
#custom-footer .footer-left h3,
#custom-footer .footer-left h4,
#custom-footer .footer-left h5,
#custom-footer .footer-left h6{
  text-align: left !important;
}