Newsletter

/* --- Grundlegendes Styling für das Formular --- */ form { background: #f9f9f9; /* Heller Hintergrund */ border: 1px solid #e0e0e0; border-radius: 12px; padding: 30px; max-width: 480px; margin: 40px auto; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); font-family: "Arial", sans-serif; color: #555; /* Dunkles Grau für Text */ text-align: left; /* Linksbündig für Labels */ box-sizing: border-box; } /* --- Styling für die -Elemente, die die Felder umschließen --- */ form p { margin: 0; /* Entfernt Standard-Margen */ padding: 0 0 16px 0; /* Abstand nur nach unten */ display: flex; /* Flexbox für bessere Ausrichtung */ flex-direction: column; /* Stellt sicher, dass Label und Eingabefeld untereinander stehen */ } /* --- Eingabefelder (E-Mail, Vorname, Nachname) --- */ form input[type="email"], form input[type="text"] { width: 100%; /* Volle Breite */ padding: 12px 14px; border: 1px solid #bbbbbb; border-radius: 6px; font-size: 15px; background: #ffffff; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; /* Korrekte Berechnung von Breite und Padding */ } /* Fokus-Effekt für Eingabefelder */ form input[type="email"]:focus, form input[type="text"]:focus { border-color: #e0007d; /* Nexxt Gastro Magenta für Fokus */ box-shadow: 0 0 6px rgba(224, 0, 125, 0.3); /* Leichter Schimmer in Magenta */ outline: none; } /* --- Zentrierter Button --- */ form .sib-default-btn { background: #e0007d; /* Nexxt Gastro Magenta */ color: #fff; /* Weißer Text */ border: none; border-radius: 6px; padding: 10px 24px; font-size: 15px; font-weight: 600; cursor: pointer; margin: 20px auto 0 auto; display: block; width: auto; text-align: center; transition: all 0.3s ease; } /* Hover-Effekt für Button */ form .sib-default-btn:hover { background: #b90063; /* Dunkleres Magenta für Hover */ transform: translateY(-2px); } /* --- Zusätzlicher Text unter dem Button --- */ form p:last-of-type { font-size: 14px; color: #555; /* Dezentes Grau */ line-height: 1.6; margin-top: 15px; text-align: center; } /* --- Mobil-Optimierung --- */ @media (max-width: 600px) { form { padding: 20px; } form input[type="email"], form input[type="text"] { width: 100%; } form .sib-default-btn { width: 100%; } }form#sib_signup_form_1 p.sib-alert-message { padding: 6px 12px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } form#sib_signup_form_1 p.sib-alert-message-error { background-color: #f2dede; border-color: #ebccd1; color: #a94442; } form#sib_signup_form_1 p.sib-alert-message-success { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } form#sib_signup_form_1 p.sib-alert-message-warning { background-color: #fcf8e3; border-color: #faebcc; color: #8a6d3b; }