.neo-sff-container {
  width: 75%;
  max-width: 75%;
}
@media (max-width: 767px) {
  .neo-sff-container {
    width: 100%;
    max-width: 100%;
  }
}

.neo-sff-field-group {
  margin-bottom: 15px;
}

.neo-sff-field-group label {
  font-family: "Open Sans", Sans-serif;
  font-weight: 700;
  color: var(--e-global-color-text);
  padding-bottom: 15px;
  cursor: pointer;
}

.neo-sff-field-group input,
.neo-sff-field-group textarea,
.neo-sff-field-group input:focus,
.neo-sff-field-group textarea:focus,
.neo-sff-field-group input:focus-visible,
.neo-sff-field-group textarea:focus-visible {
  font-family: "Open Sans", Sans-serif;
  font-weight: 400;
  background-color: #dbdbdb;
  border: none !important;
  border-radius: 0 !important;
  border-color: transparent !important;
  outline: none;
}

.neo-sff-field-group textarea {
  min-height: 40px;
}

.neo-sff-field-group-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.neo-sff-field-group-inline label {
  font-weight: 400;
  padding-bottom: 0;
  margin-left: 5px;
}

.neo-sff-field-group label .required {
  color: red;
  padding-left: 0.2em;
}

.neo-sff-field-group input[type="submit"] {
  margin-top: 30px;
  background-color: var(--e-global-color-secondary);
  color: #ffffff;
  border-radius: 0;
  display: inline-block;
  line-height: 1;
  font-size: 15px;
  padding: 12px 24px;
  fill: #fff;
  text-align: center;
  transition: all 0.3s;
}

.neo-sff-field-group input[type="submit"]:hover {
  background-color: var(--e-global-color-primary);
  color: #ffffff;
}

.neo-sff-field-group input[type="submit"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Zaehler der 1.000 Zeichen Grenze bei der Anfrage stylen */
.neo-sff-field-group .char-count {
  font-size: 0.875rem;
  color: #666;               /* Standard: Grau */
  margin-top: 0.25rem;
  text-align: right;
}
.neo-sff-field-group .char-count.warning-orange {
  color: #e67e22;            /* Orange bei 80–<90% */
}
.neo-sff-field-group .char-count.warning-red {
  color: #e74c3c;            /* Rot ab 90% */
}


/* Umbau der Formularfelder auf Mehrspaltigkeit - Basis: alle Zeilen als Flex-Container */
.neo-sff-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Abstand zwischen den Spalten */
  margin-bottom: 15px; /* wie bisher */
}

/* 1-Spalten-Zeile (Interest und Your request) */
.neo-sff-row.full > .neo-sff-field-group {
  flex: 1 1 100%;
}

/* 2-Spalten-Zeile (Salutation + Prefix, First + Last) */
.neo-sff-row.two > .neo-sff-field-group {
  flex: 1 1 calc(50% - 15px);
}

/* 3-Spalten-Zeile (Company + Email + Phone) */
.neo-sff-row.three > .neo-sff-field-group {
  flex: 1 1 calc(33.333% - 10px);
}

/* Optional: Responsive Anpassung für kleine Bildschirme */
@media (max-width: 767px) {
  .neo-sff-row.two > .neo-sff-field-group,
  .neo-sff-row.three > .neo-sff-field-group {
    flex: 1 1 100%;
  }
}


/* Umbau des Absenden-Buttons von Input auf Button */
button.new-ghost.pat-red {
  position: relative;
  display: inline-block;
  background: #fff;
  color: var(--patrizia-rot);
  border: 2px solid var(--patrizia-rot);
  cursor: pointer;
  overflow: visible;                      /* für die Spitzen */
  z-index: 0;

  /* pill with spikes left & right */
  -webkit-clip-path: polygon(
    15px 0,                         /* oben links 15px einrücken */
    calc(100% - 15px) 0,            /* oben rechts 15px einrücken */
    100% 50%,                       /* Spitze rechts in der Mitte */
    calc(100% - 15px) 100%,         /* unten rechts einrücken */
    15px 100%,                      /* unten links einrücken */
    0 50%                           /* Spitze links in der Mitte */
  );
  clip-path: polygon(
    15px 0,
    calc(100% - 15px) 0,
    100% 50%,
    calc(100% - 15px) 100%,
    15px 100%,
    0 50%
  );
}




/* linke Spitze */
button.new-ghost.pat-red::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -16px;                            /* halb so breit wie die Spitze */
  width: 32px;                            
  height: 32px;                           
  transform: translateY(-50%);
  background: #fff;                       /* füllt das Dreieck weiß */
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  border: 2px solid var(--patrizia-rot);  /* Rahmen um die Spitze */
  z-index: -1;
}

/* rechte Spitze */
button.new-ghost.pat-red::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -16px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  border: 2px solid var(--patrizia-rot);
  z-index: -1;
}

/* Hover-Zustand (Text- und Border-Farbe wechseln) */
button.new-ghost.pat-red:hover {
  color: #fff;
  border-color: var(--e-global-color-primary);
}
button.new-ghost.pat-red:hover::before,
button.new-ghost.pat-red:hover::after {
  border-color: var(--e-global-color-primary);
}

/* Disabled */
button.new-ghost.pat-red:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button.new-ghost.pat-red:disabled::before,
button.new-ghost.pat-red:disabled::after {
  opacity: 0.5;
}





button.pat-red::before, button.pat-red::after {
  /* andere Regel ausschließen */
  border: 0 !important;
}
button.pat-red:hover::before, button.pat-red:hover::after {
  height: 19.5px;
  background: transparent;
}
button.new-ghost.pat-red:hover {
  color: #ffffff !important;
  background: var(--patrizia-rot);
  border: 0;
}

/* Optional: deaktivierter Zustand */
button.new-ghost.pat-red:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}