/* ==========================================================================
   SI Newsletter – Frontend Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Theme-Variablen)
   -------------------------------------------------------------------------- */

.si-nl-theme--dark {
	--si-nl-color-bg:           #111111;
	--si-nl-color-text:         #ffffff;
	--si-nl-color-text-muted:   rgba(255, 255, 255, 0.55);
	--si-nl-color-accent:       #c8f241;
	--si-nl-color-btn-text:     #111111;
	--si-nl-color-input-bg:     rgba(255, 255, 255, 0.1);
	--si-nl-color-input-border: rgba(255, 255, 255, 0.35);
	--si-nl-color-placeholder:  rgba(255, 255, 255, 0.6);
	--si-nl-color-badge-bg:     rgba(255, 255, 255, 0.08);
	--si-nl-color-badge-text:   rgba(255, 255, 255, 0.65);
	--si-nl-color-error:        #ff6b6b;
	--si-nl-color-success:      #c8f241;
}

.si-nl-theme--light {
	--si-nl-color-bg:           #ffffff;
	--si-nl-color-text:         #111111;
	--si-nl-color-text-muted:   rgba(0, 0, 0, 0.5);
	--si-nl-color-accent:       #111111;
	--si-nl-color-btn-text:     #ffffff;
	--si-nl-color-input-bg:     #f5f5f5;
	--si-nl-color-input-border: #bbbbbb;
	--si-nl-color-placeholder:  rgba(0, 0, 0, 0.45);
	--si-nl-color-badge-bg:     rgba(0, 0, 0, 0.06);
	--si-nl-color-badge-text:   rgba(0, 0, 0, 0.55);
	--si-nl-color-error:        #d32f2f;
	--si-nl-color-success:      #2e7d32;
}

/* Custom Theme liest direkt Inline-CSS-Variablen */
.si-nl-theme--custom {
	--si-nl-color-bg:           var(--si-nl-color-bg,           #1a1a1a);
	--si-nl-color-text:         var(--si-nl-color-text,         #ffffff);
	--si-nl-color-text-muted:   rgba(255, 255, 255, 0.55);
	--si-nl-color-accent:       var(--si-nl-color-accent,       #c8f241);
	--si-nl-color-btn-text:     var(--si-nl-color-btn-text,     #111111);
	--si-nl-color-input-bg:     var(--si-nl-color-input-bg,     rgba(255, 255, 255, 0.1));
	--si-nl-color-input-border: var(--si-nl-color-input-border, rgba(255, 255, 255, 0.35));
	--si-nl-color-placeholder:  rgba(255, 255, 255, 0.6);
	--si-nl-color-badge-bg:     rgba(255, 255, 255, 0.08);
	--si-nl-color-badge-text:   rgba(255, 255, 255, 0.5);
	--si-nl-color-error:        #ff6b6b;
	--si-nl-color-success:      #c8f241;
}

/* --------------------------------------------------------------------------
   Wrapper & Layout
   -------------------------------------------------------------------------- */

.si-nl-form-wrap {
	background-color: var(--si-nl-color-bg);
	color:            var(--si-nl-color-text);
	border-radius:    0;
	padding:          56px 48px;
	width:            100%;
	box-sizing:       border-box;
	font-family:      inherit;
}

.si-nl-form-inner {
	display:        flex;
	align-items:    center;
	gap:            48px;
	max-width:      1100px;
	margin:         0 auto;
}

.si-nl-form-copy {
	flex:    1 1 0;
	min-width: 0;
}

.si-nl-form-fields {
	flex:       0 0 380px;
	max-width:  100%;
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */

.si-nl-badge-label {
	display:         inline-block;
	background:      var(--si-nl-color-badge-bg);
	color:           var(--si-nl-color-badge-text);
	font-size:       11px;
	font-weight:     600;
	letter-spacing:  0.12em;
	text-transform:  uppercase;
	padding:         5px 10px;
	border:          1px solid var(--si-nl-color-input-border);
	border-radius:   3px;
	margin-bottom:   16px;
}

/* --------------------------------------------------------------------------
   Texte
   -------------------------------------------------------------------------- */

.si-nl-title {
	font-size:   clamp(22px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	margin:      0 0 14px;
	color:       var(--si-nl-color-text);
}

.si-nl-description {
	font-size:   14px;
	line-height: 1.65;
	color:       var(--si-nl-color-text-muted);
	margin:      0;
}

/* --------------------------------------------------------------------------
   Formular
   -------------------------------------------------------------------------- */

.si-nl-form {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.si-nl-input-row {
	display: flex;
	gap:     0;
}

.si-nl-input {
	background:  var(--si-nl-color-input-bg);
	border:      2px solid var(--si-nl-color-input-border);
	color:       var(--si-nl-color-text);
	font-size:   15px;
	padding:     0 16px;
	height:      50px;
	outline:     none;
	width:       100%;
	box-sizing:  border-box;
	transition:  border-color 0.2s, background 0.2s;
	font-family: inherit;
	box-shadow:  inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.si-nl-input::placeholder {
	color:   var(--si-nl-color-placeholder, var(--si-nl-color-text-muted));
	opacity: 1;
}

.si-nl-input:focus {
	border-color: var(--si-nl-color-accent);
	outline:      none;
}

.si-nl-input--name {
	border-radius: 3px;
	margin-bottom: 0;
}

.si-nl-input-row .si-nl-input--email {
	border-radius:       3px 0 0 3px;
	border-right:        none;
	flex:                1 1 0;
	min-width:           0;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.si-nl-btn {
	background:     var(--si-nl-color-accent);
	color:          var(--si-nl-color-btn-text);
	border:         none;
	font-size:      14px;
	font-weight:    700;
	padding:        0 22px;
	height:         50px;
	cursor:         pointer;
	white-space:    nowrap;
	border-radius:  0 3px 3px 0;
	letter-spacing: 0.02em;
	transition:     filter 0.15s, transform 0.1s;
	font-family:    inherit;
	flex-shrink:    0;
}

.si-nl-btn:hover {
	filter:    brightness(0.9);
}

.si-nl-btn:active {
	transform: scale(0.98);
}

.si-nl-btn:disabled {
	opacity: 0.6;
	cursor:  not-allowed;
}

/* --------------------------------------------------------------------------
   Nachrichten
   -------------------------------------------------------------------------- */

.si-nl-message {
	font-size:   13px;
	min-height:  20px;
	line-height: 1.5;
}

.si-nl-message--success {
	color: var(--si-nl-color-success);
}

.si-nl-message--error {
	color: var(--si-nl-color-error);
}

/* --------------------------------------------------------------------------
   Datenschutz-Hinweis
   -------------------------------------------------------------------------- */

.si-nl-privacy {
	font-size:  12px;
	color:      var(--si-nl-color-text-muted);
	margin:     8px 0 0;
	line-height: 1.5;
}

.si-nl-privacy a {
	color:           var(--si-nl-color-text-muted);
	text-decoration: underline;
}

.si-nl-privacy a:hover {
	color: var(--si-nl-color-text);
}

/* --------------------------------------------------------------------------
   Erfolgs-Overlay (nach Absenden)
   -------------------------------------------------------------------------- */

.si-nl-form-wrap.si-nl--submitted .si-nl-form {
	display: none;
}

.si-nl-success-state {
	display:     none;
	text-align:  center;
	padding:     24px 0;
}

.si-nl-form-wrap.si-nl--submitted .si-nl-success-state {
	display: block;
}

.si-nl-success-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           52px;
	height:          52px;
	border-radius:   50%;
	background:      var(--si-nl-color-accent);
	margin-bottom:   16px;
}

.si-nl-success-icon svg {
	fill: var(--si-nl-color-btn-text);
}

.si-nl-success-state h3 {
	font-size:   18px;
	font-weight: 700;
	color:       var(--si-nl-color-text);
	margin:      0 0 8px;
}

.si-nl-success-state p {
	font-size: 14px;
	color:     var(--si-nl-color-text-muted);
	margin:    0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media ( max-width: 768px ) {
	.si-nl-form-wrap {
		padding: 36px 24px;
	}

	.si-nl-form-inner {
		flex-direction: column;
		gap:            28px;
	}

	.si-nl-form-fields {
		flex:  1 1 auto;
		width: 100%;
	}
}

@media ( max-width: 480px ) {
	.si-nl-form-wrap {
		padding: 28px 16px;
	}

	.si-nl-input-row {
		flex-direction: column;
		gap:            8px;
	}

	.si-nl-input-row .si-nl-input--email {
		border-radius: 3px;
		border-right:  1px solid var(--si-nl-color-input-border);
	}

	.si-nl-btn {
		border-radius: 3px;
		width:         100%;
		height:        46px;
	}
}