/* ============================================================
   Schiffahoi - Kontaktseite (Kontakt-Paket v1, 21.10.2026; v2 Danke-Seite 22.10.2026)
   Template: templates/page/kontakt.htpl (laedt diese Datei NACH
             bausteine-2026.css - die Farb-Variablen :root kommen von dort,
             EINE Quelle, hier nichts neu erfinden)
   Formular: form2mail "Kontakt-Schiffahoi" (CMS, Datenbank) - das
             Formular-HTML dort nutzt die kx-Klassen aus dieser Datei
   Skript:   js/kontakt-2026.js (Platzhalter, Feldtypen, Angebots-URL)
   Kaskade (am lebenden Objekt gemessen, 21.10.2026):
             - my_layout.css: h2 color/font-weight/margin-bottom !important
               -> .kx-ueberschrift ebenfalls !important
             - my_layout.css: .form-control { font-size: 14px !important }
               -> Schriftgroesse der Felder hier !important
             - Theme: *, ::before, ::after { box-shadow: none !important }
               -> Karte, Fokus-Ring und Knopf-Schatten hier !important
             - design-2026.css stylt .page-content h2/a - unsere Regeln sind
               spezifischer (.kx .page-content ...).
   ============================================================ */

.kx {
	padding: 124px 0 48px; /* Platz fuer den festen Kopf (92 px), wie Angebotsseite */
	background: #ffffff;
	color: var(--ang-text);
	font-family: "Source Sans Pro", Arial, sans-serif;
}
.kx *, .kx *::before, .kx *::after { box-sizing: border-box; }
.kx-spalte { max-width: 780px; margin: 0 auto; }

/* ---------- Seitentitel ---------- */
.kx .kx-titel {
	margin: 0 0 22px;
	font-family: "Source Sans Pro", Arial, sans-serif !important;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.2px;
	color: var(--ang-dunkel);
	text-transform: none;
}
.kx .page-content.kx-inhalt { padding: 0; }

/* ---------- Karte ---------- */
.kx-karte {
	background: #ffffff;
	border: 1px solid var(--ang-linie);
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(11, 31, 51, .06) !important;
	padding: 26px 26px 20px;
}
.kx .kx-ueberschrift {
	margin: 0 0 18px !important;
	font-family: "Source Sans Pro", Arial, sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.25;
	color: var(--ang-dunkel) !important;
	text-align: left;
	text-transform: none;
}

/* Hinweis unter der Ueberschrift (im CMS-HTML, kann dort entfernt werden) */
.kx-pflicht { margin: -10px 0 16px; font-size: 13.5px; color: var(--ang-grau); }

/* ---------- Felder (Markup kommt vom CMS-Widget: div.type-text > label + input) ---------- */
.kx-feld { margin: 0 0 14px; }
.kx-feld .type-text,
.kx-feld .type-select { margin: 0; }
.kx-feld label {
	display: block;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ang-text);
}
.kx .contact-form .form-control {
	display: block;
	width: 100%;
	height: auto;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var(--ang-linie);
	border-radius: 10px;
	background: #ffffff;
	color: var(--ang-text);
	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;
}
.kx .contact-form .form-control::placeholder { color: #8a97a5; opacity: 1; }
.kx .contact-form .form-control:focus {
	border-color: var(--ang-blau);
	box-shadow: 0 0 0 3px rgba(0, 90, 165, .12) !important;
	outline: none;
}
.kx .contact-form textarea.form-control { min-height: 120px; resize: vertical; }
.kx .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;
}
.kx .contact-form select.form-control::-ms-expand { display: none; }

/* ---------- Gruppe "Ihre Wunschreise" ---------- */
.kx-gruppe {
	margin: 22px 0 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ang-linie);
}
.kx-gruppe-titel {
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ang-dunkel);
}
.kx-gruppe-unter { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ang-grau); }

/* ---------- Hinweise ---------- */
.kx-datenschutz,
.kx-hinweis,
.kx-vertrauen { font-size: 13.5px; line-height: 1.45; color: var(--ang-grau); }
.kx-datenschutz { margin: 18px 0 14px; }
.kx .page-content .kx-datenschutz a { color: var(--ang-blau); text-decoration: underline; }
.kx-hinweis { margin: 12px 0 0; text-align: center; }
.kx-vertrauen { margin: 18px 0 0; text-align: center; }

/* ---------- Absende-Knopf (das Theme haengt per periphery.htpl
   "btn btn-cta-highlight-color btn-cta-highlight text-light" an den Knopf,
   deshalb hier spezifisch und mit !important gegen die Theme-Buttons) ---------- */
.kx .contact-form button[name="submit"],
.kx .contact-form button[name="submit"].btn {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 12px 18px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: linear-gradient(180deg, var(--ang-rot1), var(--ang-rot2)) !important;
	color: #ffffff !important;
	font-family: "Source Sans Pro", Arial, sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: 0;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: 0 8px 20px rgba(194, 6, 42, .28) !important;
	cursor: pointer;
	transition: box-shadow .15s ease, transform .15s ease;
}
.kx .contact-form button[name="submit"]:hover,
.kx .contact-form button[name="submit"]:focus-visible {
	box-shadow: 0 10px 26px rgba(194, 6, 42, .38) !important;
	transform: translateY(-1px);
}
.kx .contact-form button[name="submit"]:focus-visible { outline: 3px solid rgba(0, 90, 165, .35); outline-offset: 2px; }

/* ---------- Schritte (JS: kontakt-2026.js, ohne JS alles sichtbar) ---------- */
.kx-schritt[hidden] { display: none !important; }
.kx-unter { margin: -12px 0 18px; font-size: 13.5px; line-height: 1.45; color: var(--ang-grau); }
.kx-fortschritt {
	display: flex;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}
.kx-fortschritt-punkt {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 10px;
	border-bottom: 3px solid var(--ang-linie);
	font-size: 14px;
	font-weight: 600;
	color: var(--ang-grau);
}
.kx-fortschritt-nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid var(--ang-linie);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--ang-grau);
	background: #ffffff;
}
.kx-fortschritt-punkt.ist-aktiv { border-bottom-color: var(--ang-blau); color: var(--ang-dunkel); }
.kx-fortschritt-punkt.ist-aktiv .kx-fortschritt-nr { border-color: var(--ang-blau); background: var(--ang-blau); color: #ffffff; }
.kx-fortschritt-punkt.ist-fertig { border-bottom-color: var(--ang-blau); color: var(--ang-dunkel); }
.kx-fortschritt-punkt.ist-fertig .kx-fortschritt-nr { border-color: var(--ang-blau); color: var(--ang-blau); }
.kx-weiter-zeile { margin: 6px 0 0; }
.kx-weiter,
.kx-zurueck {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: 12px 18px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, #1278d2, var(--ang-blau));
	color: #ffffff;
	font-family: "Source Sans Pro", Arial, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(0, 90, 165, .25) !important;
	transition: box-shadow .15s ease, transform .15s ease;
}
.kx-weiter:hover,
.kx-weiter:focus-visible { box-shadow: 0 10px 26px rgba(0, 90, 165, .35) !important; transform: translateY(-1px); }
.kx-weiter:focus-visible,
.kx-zurueck:focus-visible { outline: 3px solid rgba(0, 90, 165, .35); outline-offset: 2px; }
.kx-zusammenfassung {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 14px;
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--ang-linie);
	border-radius: 12px;
	background: var(--ang-hell);
}
.kx-zusammenfassung-text { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ang-text); }
.kx-zusammenfassung .kx-zurueck {
	display: inline-block;
	width: auto;
	min-height: 0;
	padding: 7px 12px;
	border: 2px solid var(--ang-blau);
	border-radius: 10px;
	background: #ffffff;
	color: var(--ang-blau);
	font-size: 14px;
	box-shadow: none !important;
}
.kx-zusammenfassung .kx-zurueck:hover { background: var(--ang-blau); color: #ffffff; }

/* ---------- Angebotsfeld hervorgehoben ---------- */
.kx-feld-angebot .form-control { background: var(--ang-hell); font-weight: 600; }

/* ---------- Kabine: Kacheln ---------- */
.kx-kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kx-kachel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 70px;
	padding: 10px 6px;
	border: 1px solid var(--ang-linie);
	border-radius: 12px;
	background: #ffffff;
	color: var(--ang-text);
	font-family: "Source Sans Pro", Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.kx-kachel svg { color: var(--ang-blau); }
.kx-kachel:hover { border-color: var(--ang-blau); }
.kx-kachel.ist-gewaehlt { border-color: var(--ang-blau); background: var(--ang-blau); color: #ffffff; }
.kx-kachel.ist-gewaehlt svg { color: #ffffff; }
.kx-kachel:focus-visible { outline: 3px solid rgba(0, 90, 165, .35); outline-offset: 1px; }
.kx .contact-form select.kx-versteckt { display: none !important; }
@media (max-width: 575.98px) {
	.kx-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.kx-fortschritt-text { font-size: 13px; }
}
@media (max-width: 359.98px) {
	.kx-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Danke-Seite / Meldungen (v2, 22.10.2026) ---------- */
.kx-danke { padding-bottom: 26px; }
.kx-danke-kopf { text-align: center; padding: 6px 0 4px; }
.kx-danke-haken {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 0 14px;
	border-radius: 50%;
	background: #e6f6ec;
	color: #1e8f4e;
	box-shadow: 0 0 0 8px #f2faf5 !important;
}
.kx .kx-karte .kx-danke-titel { margin: 0 0 10px !important; text-align: center !important; font-size: 26px !important; }
.kx-danke-lead { max-width: 560px; margin: 0 auto; font-size: 16px; line-height: 1.5; color: var(--ang-text); }
.kx .kx-karte .kx-danke-zwischen {
	margin: 26px 0 12px !important;
	font-family: "Source Sans Pro", Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--ang-grau) !important;
}
.kx-danke-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kx-danke-schritte li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--ang-linie);
	border-radius: 12px;
	background: var(--ang-hell);
}
.kx-danke-nr {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ang-blau);
	color: #ffffff;
	font-weight: 700;
	font-size: 15px;
	line-height: 32px;
	text-align: center;
}
.kx-danke-schritte strong { display: block; font-size: 16px; color: var(--ang-dunkel); margin-bottom: 2px; }
.kx-danke-schritte div > span { display: block; font-size: 14.5px; line-height: 1.45; color: var(--ang-grau); }
.kx-danke-kontakt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	margin: 22px 0 0;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px dashed var(--ang-linie);
	text-align: center;
}
.kx-danke-kontakt-text { font-size: 15px; color: var(--ang-text); }
.kx .page-content .kx-danke-tel { font-size: 18px; font-weight: 700; color: var(--ang-blau) !important; text-decoration: none; white-space: nowrap; }
.kx .page-content .kx-danke-tel:hover { text-decoration: underline; }
.kx-danke-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 0; }
.kx-danke-link {
	display: inline-block;
	padding: 11px 20px;
	border: 2px solid var(--ang-blau);
	border-radius: 10px;
	color: var(--ang-blau);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}
.kx .page-content .kx-danke-link { color: var(--ang-blau) !important; }
.kx .page-content .kx-danke-link-voll { background: var(--ang-blau); color: #ffffff !important; }
.kx .page-content .kx-danke-link:hover,
.kx .page-content .kx-danke-link:focus-visible { background: var(--ang-blau-dunkel); border-color: var(--ang-blau-dunkel); color: #ffffff !important; text-decoration: none; }
.kx .alert { border-radius: 12px; margin-bottom: 16px; }
@media (max-width: 575.98px) {
	.kx .kx-karte .kx-danke-titel { font-size: 22px !important; }
	.kx-danke-knoepfe { flex-direction: column; }
	.kx-danke-link { display: block; }
}

/* ---------- Honeypot bleibt unsichtbar (kommt vom Plugin mit display:none) ---------- */

/* ---------- Breiten ---------- */
@media (max-width: 1199.98px) {
	.kx { padding-top: 87px; } /* Kopf 55 px */
	.kx .kx-titel { font-size: 30px; }
}
@media (max-width: 767.98px) {
	.kx { padding-top: 67px; padding-bottom: 36px; } /* Kopf 47 px */
	.kx .kx-titel { font-size: 26px; margin-bottom: 16px; }
	.kx-karte { padding: 20px 16px 16px; border-radius: 14px; }
	.kx .kx-ueberschrift { font-size: 20px !important; margin-bottom: 14px !important; }
}
@media (max-width: 359.98px) {
	.kx .kx-titel { font-size: 23px; }
	.kx-karte { padding: 16px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.kx .contact-form .form-control,
	.kx .contact-form button[name="submit"] { transition: none; }
	.kx .contact-form button[name="submit"]:hover { transform: none; }
	.kx-weiter, .kx-kachel { transition: none; }
	.kx-weiter:hover { transform: none; }
}