/* ============================================================
   Schiffahoi - Newsletter (Paket 27.10.2026, v2)
   EINE Quelle fuer:
     - Newsletter-Karte auf der Startseite (templates/page/startseite.htpl,
       Platzhalter newsletter_titel / newsletter_text / newsletter_hinweis)
     - Newsletter-Seite /newsletter.html (templates/page/newsletter.htpl,
       Platzhalter newsletter_seite_titel / newsletter_seite_text;
       Formular = form2mail "Newsletter-Optin" aus dem CMS)
   Platzhalter leer = Element ausgeblendet (:empty).
   Skript: js/newsletter-2026.js
   Kaskade (am lebenden Objekt gemessen, 27.10.2026):
     - my_layout.css: input, button, select { width: 100% } -> width: auto
     - my_layout.css: .form-control { font-size: 14px !important } -> 16px !important
     - Theme: input::placeholder 14.4px -> 16px
     - Theme: *, ::before, ::after { box-shadow: none !important } -> Schatten !important
     - my_layout.css: h2 !important (Titel deshalb als p bzw. h1)
   ============================================================ */

/* ---------- Dunkle Karte (Startseite + Kopf der Newsletter-Seite) ---------- */
.nl-karte {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 32px 40px;
	border-radius: 14px;
	background:
		radial-gradient(circle at 92% 20%, rgba(255, 255, 255, .09) 0, rgba(255, 255, 255, 0) 45%),
		linear-gradient(115deg, #0b1f33 0%, #0e3a63 55%, #0a5fa8 100%);
	box-shadow: 0 10px 30px rgba(11, 31, 51, .18) !important;
	color: #ffffff;
	font-family: "Source Sans Pro", Arial, sans-serif;
}
.nl-karte .nl-text { flex: 1 1 auto; min-width: 0; }
.nl-karte .nl-form { flex: 0 0 440px; max-width: 100%; }
.nl-karte .nl-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px 0;
	color: #8fd0ff !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.nl-karte .nl-kicker svg { flex: 0 0 auto; }
.nl-karte .nl-titel {
	margin: 0 !important;
	color: #ffffff !important;
	font-family: "Source Sans Pro", Arial, sans-serif !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0;
	text-transform: none !important;
}
.nl-karte .nl-unter {
	margin: 8px 0 0 0;
	color: rgba(255, 255, 255, .85) !important;
	font-size: 16px;
	line-height: 1.5 !important;
}
.nl-karte .nl-hinweis {
	margin: 10px 0 0 0;
	color: rgba(255, 255, 255, .82) !important;
	font-size: 14px;
	line-height: 1.4 !important;
}
.nl-karte .nl-titel:empty,
.nl-karte .nl-unter:empty,
.nl-karte .nl-hinweis:empty { display: none; }

.nl-karte form { margin: 0; }
.nl-karte .nl-feld { display: flex; gap: 8px; margin: 0; }
.nl-karte .nl-feld input {
	flex: 1 1 auto;
	width: auto; /* my_layout.css: input { width: 100% } */
	min-width: 0;
	height: 50px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #ffffff;
	color: #0b1f33;
	font-size: 16px;
	box-shadow: none;
}
.nl-karte .nl-feld input::placeholder { color: #6b7a89; opacity: 1; font-size: 16px; }
.nl-karte .nl-feld input:focus {
	outline: none;
	border-color: #0d6ebd;
	box-shadow: 0 0 0 3px rgba(143, 208, 255, .45) !important;
}

/* Roter Knopf - Karte und Newsletter-Seite */
.nl-knopf,
.nl-karte .nl-feld button {
	flex: 0 0 auto;
	width: auto; /* my_layout.css: button { width: 100% } */
	height: 50px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, #ef2b4f 0%, #c2062a 100%);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}
.nl-karte .nl-feld button:hover,
.nl-karte .nl-feld button:focus-visible { background: linear-gradient(180deg, #f5466a 0%, #d10f35 100%); }
.nl-karte .nl-feld button:focus-visible { outline: 3px solid rgba(255, 255, 255, .6); outline-offset: 2px; }

/* ---------- Startseite: Band um die Karte ---------- */
/* oben kein eigenes Polster: der Highlight-Bereich darueber hat schon 36 px (Wunsch Enes 27.10.) */
.nl-band { position: relative; z-index: 0; padding: 0 0 40px; background: #eef2f6; }

@media (max-width: 991px) {
	.nl-karte { flex-direction: column; align-items: stretch; gap: 20px; padding: 28px; }
	.nl-karte .nl-form { flex: 0 0 auto; width: 100%; }
	.nl-karte .nl-titel { font-size: 24px !important; }
}
@media (max-width: 575px) {
	.nl-band { padding: 0 0 24px; }
	.nl-karte { padding: 22px 18px; }
	.nl-karte .nl-titel { font-size: 22px !important; }
	.nl-karte .nl-feld { flex-direction: column; }
	.nl-karte .nl-feld button { width: 100%; }
}

/* ---------- Newsletter-Seite (templates/page/newsletter.htpl) ---------- */
.nl-seite {
	padding: 124px 0 56px; /* Platz fuer den festen Kopf (92 px), wie Kontaktseite */
	background: #eef2f6;
	color: #22313f;
	font-family: "Source Sans Pro", Arial, sans-serif;
}
.nl-seite *, .nl-seite *::before, .nl-seite *::after { box-sizing: border-box; }
.nl-seite-spalte { max-width: 780px; margin: 0 auto; }
.nl-seite .nl-karte { display: block; padding: 32px 36px; }
.nl-seite .nl-karte .nl-titel { font-size: 32px !important; }

/* Weisse Karte mit dem CMS-Formular (bzw. der Danke-Seite) */
.nl-seite .nl-formkarte {
	margin-top: -14px;
	padding: 36px 36px 26px;
	border: 1px solid #d9e2ea;
	border-top: 0;
	border-radius: 0 0 14px 14px;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(11, 31, 51, .06) !important;
}
.nl-seite .nl-seite-kopf { position: relative; z-index: 1; }
.nl-seite .page-content.nl-inhalt { padding: 0; }
.nl-seite .nl-inhalt p { color: #22313f; font-size: 16px; line-height: 1.55; }
.nl-seite .nl-inhalt a { color: #005aa5; text-decoration: underline; }

/* Formular-Raster: Felder untereinander, Anrede + Name ab 576 px nebeneinander */
.nl-seite .contact-form .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.nl-seite .contact-form .row > [class*="col-"] {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0 8px;
	margin: 0 0 14px;
}
@media (min-width: 576px) {
	.nl-seite .contact-form .row > [class*="col-"]:has(> .type-select) { flex: 0 0 170px; max-width: 170px; }
	.nl-seite .contact-form .row > [class*="col-"]:has(> .type-select) + [class*="col-"]:has(> .type-text) { flex: 1 1 0; max-width: none; }
}
.nl-seite .contact-form .row > .clear { display: none; }
.nl-seite .contact-form .type-text,
.nl-seite .contact-form .type-select { margin: 0; }
.nl-seite .contact-form label {
	display: block;
	margin: 0 0 6px;
	color: #22313f;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.nl-seite .contact-form .form-control {
	display: block;
	width: 100%;
	height: auto;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid #c9d4df;
	border-radius: 8px;
	background-color: #ffffff;
	color: #22313f;
	font-family: "Source Sans Pro", Arial, sans-serif;
	font-size: 16px !important; /* >= 16px: kein Auto-Zoom auf dem iPhone */
	line-height: 1.4;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.nl-seite .contact-form .form-control:focus {
	border-color: #005aa5;
	box-shadow: 0 0 0 3px rgba(0, 90, 165, .12) !important;
	outline: none;
}
.nl-seite .contact-form select.form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
	cursor: pointer;
}
.nl-seite .contact-form .custom-control-label {
	font-weight: 400;
	font-size: 15px;
	line-height: 1.45;
}
.nl-seite .contact-form .custom-control-label a { color: #005aa5; text-decoration: underline; }
/* Absende-Knopf: Theme haengt "btn btn-cta-highlight ..." an -> spezifisch + !important */
.nl-seite .contact-form button[name="submit"],
.nl-seite .contact-form button[name="submit"].btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 220px;
	height: 52px;
	margin: 6px 0 0 0;
	padding: 0 28px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: linear-gradient(180deg, #ef2b4f 0%, #c2062a 100%) !important;
	color: #ffffff !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	letter-spacing: 0;
	text-transform: none !important;
	box-shadow: 0 4px 12px rgba(194, 6, 42, .25) !important;
}
.nl-seite .contact-form button[name="submit"]:hover,
.nl-seite .contact-form button[name="submit"]:focus-visible { background: linear-gradient(180deg, #f5466a 0%, #d10f35 100%) !important; }
.nl-seite .contact-form .small { color: #5b6b7b; font-size: 13.5px; }

@media (max-width: 767px) {
	.nl-seite { padding: 92px 0 40px; }
}
@media (max-width: 575px) {
	.nl-seite .nl-karte { padding: 24px 20px 30px; }
	.nl-seite .nl-karte .nl-titel { font-size: 26px !important; }
	.nl-seite .nl-formkarte { padding: 28px 18px 20px; }
	.nl-seite .contact-form button[name="submit"],
	.nl-seite .contact-form button[name="submit"].btn { width: 100% !important; min-width: 0; }
}