/* com Version */

/* --- 1. BASIS SETUP & RESET --- */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
	background-color: #ffffff;
	color: #3C4858;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	text-align: center;
}

.container {
	max-width: 500px;
	width: 100%;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
}

/* --- 2. FORMULAR LAYOUT (Die Symmetrie-Logik) --- */

/* Verhindert, dass Brevo-Abstände das Layout verzerren */
#sib-form {
	display: flex;
	flex-direction: column;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

.sib-text-form-block p {
	font-size: 8px;
}

/* Die neuen Container-Klassen für dein HTML */
.input-row-split {
	display: flex;
	/*gap: 10px;*/
	width: 100%;
	font-size: 16px;
}

.input-row-full {
	width: 100%;
	/*font-size: 12px;*/
}

/* WICHTIG: Neutralisiert Brevos interne Verschachtelung für Flexbox */
.input-row-split > .sib-input {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* --- 3. BREVO OVERRIDES (Breite & Design) --- */

/* Erzwingt 100% Breite und hebt Brevos calc() auf */
#sib-container .input {
	width: 100% !important;
	max-width: 100% !important;
	outline: none;
	transition: border-color 0.3s;
}

#sib-container .input:focus {
	border-color: #3E4857 !important;
}

/* Entfernt Padding-Reste von Brevo-Containern */
#sib-container .sib-input, {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Sicherstellen, dass die Gruppen-Container nicht durch Padding schrumpfen */
.entry_block, .entry__field {
	width: 100%;
}

/* --- 4. CHECKBOX & OPT-IN --- */
.sib-optin {
	text-align: left;
	margin: 15px 0;
	width: 100%;
}

#sib-form .checkbox-label,
#sib-form label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	/*cursor: pointer;*/
	font-size: 12px;
	color: #666;
}

/* --- 5. BUTTON (NOTIFY ME) --- */
#sib-container .sib-form-block__button {
	width: 100% !important;
	padding: 16px !important;
	background-color: #3E4857 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	cursor: pointer;
	transition: background-color 0.3s;
	margin-top: 10px !important;
}

.sib-form .entry__field {
	border-radius: 8px !important;
}
#sib-container .sib-form-block__button:hover {
	background-color: #2c343f !important;
}

//* --- 6. FEHLERMELDUNGEN (Korrektur) --- */

/* Versteckt die rote Box standardmäßig */
.entry__error {
	display: none;
	font-size: 11px !important;
	margin: 5px 0 !important;
	padding: 8px !important;
	border-radius: 5px !important;
	/* Die Farben werden meist von Brevo geliefert,
	   wir stellen nur sicher, dass sie nicht stören wenn leer */
}

/* Verhindert, dass leere Fehlermeldungen Platz einnehmen */
.entry__error:empty {
	display: none !important;
}

/* Erlaubt dem Brevo-Script das Einblenden bei Fehlern */
.sib-form-block .entry__error.entry__error--primary {
	text-align: left;
	font-family: Helvetica, sans-serif;
}

/* --- 7. FOOTER & RECHTLICHES --- */
footer {
	margin-top: 40px;
	width: 100%;
}

footer a {
	color: #b7babe;
	text-decoration: none;
	font-size: 12px;
}

footer a:hover { color: #333; }

/* --- 8. RESPONSIVE ANPASSUNG --- */
@media (max-width: 480px) {
	.input-row-split {
		flex-direction: column;
		gap: 0;
	}

	h1 { font-size: 32px; }
}

/* form styling */

.sib-form-block {
	padding: 0 16px !important;
	word-wrap: break-word;
	outline: none;
}

.headline-content {
	text-align: center;
}

.subtitle {
	font-size: 22px;
	color: #888;
	margin-bottom: 5px;
}

.description {
	font-size: 16px;
	margin-bottom: 40px;
	color: #aaa;
}

h1 {
	font-size: 42px;
	font-weight: 700;
	text-transform: lowercase;
	margin-bottom: 10px;
	letter-spacing: -1px;
}