/* =========================================================================
 * kontakt.css  —  /kontakt
 *
 * HTML-Seite (§2): WordPress-Seite + freies Markup im Code-Block +
 * [tortuga_anfrage], eingehängt per is_page('kontakt') im Enqueue.
 * Kein Template, kein Loop.
 *
 * Lädt zusätzlich zu root.css. Das FORMULAR selbst wird hier NICHT
 * gestylt — das ist Sache von formular.css (§8), das auf dieser Seite
 * mitgeladen werden muss. Hier nur: Kopf, Zweispaltigkeit, Infospalte.
 *
 * Die Seite trägt kein .t-mass (HTML-Seiten setzen ihr Maß selbst, wie
 * reisen.css / liste.css / ueber-uns.css).
 * ====================================================================== */


/* --- Kopf (analog reisen.css / liste.css) -------------------------------- */

.t-kontakt-kopf {
	width: min(100% - 2rem, var(--t-breite));
	margin-inline: auto;
	padding-block: var(--t-space-8) var(--t-space-4);
}

.t-kontakt-kopf__auge {
	margin: 0 0 var(--t-space-2);
	font-size: var(--t-fs-300);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--t-tuerkis);
}

.t-kontakt-kopf h1 { margin-bottom: var(--t-space-4); }

.t-kontakt-kopf__intro {
	max-width: var(--t-breite-text);
	font-size: var(--t-fs-600);
	line-height: 1.5;
	color: var(--t-text-mute);
	margin-bottom: 0;
}


/* --- Zwei Spalten --------------------------------------------------------
 * Mobil: Formular zuerst, Infos darunter. Die Quellreihenfolge stimmt
 * bereits — kein order-Wechsel, damit Fokusreihenfolge und Optik gleich
 * bleiben (WCAG 1.3.2).
 * ---------------------------------------------------------------------- */

.t-kontakt {
	width: min(100% - 2rem, var(--t-breite));
	margin-inline: auto;
	margin-block: var(--t-space-6) var(--t-space-8);
	display: grid;
	gap: var(--t-space-8);
	align-items: start;
}

@media (min-width: 60rem) {
	.t-kontakt { grid-template-columns: 1.35fr 0.85fr; gap: var(--t-space-8); }
}

.t-kontakt__formular { min-width: 0; }
.t-kontakt__formular h2 { margin-bottom: var(--t-space-4); }


/* --- Infospalte ----------------------------------------------------------
 * Sandfläche als ruhiger Gegenpol zum weißen Formularblock.
 * ---------------------------------------------------------------------- */

.t-kontakt__infos {
	padding: var(--t-space-6);
	background: var(--t-sand);
	border-radius: var(--t-radius);
}

.t-kontakt__infos h2 {
	font-size: var(--t-fs-600);
	margin-bottom: var(--t-space-4);
}

.t-kontakt__daten { margin: 0; }

.t-kontakt__block {
	padding-block: var(--t-space-4);
	border-top: 1px solid var(--t-linie);
}
.t-kontakt__block:first-child { border-top: 0; padding-top: 0; }
.t-kontakt__block:last-child  { padding-bottom: 0; }

.t-kontakt__block dt {
	margin-bottom: var(--t-space-2);
	font-size: var(--t-fs-300);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--t-text-mute);
}

.t-kontakt__block dd {
	margin: 0;
	color: var(--t-blau-900);
	font-weight: 600;
}

/* Telefon und E-Mail sind echte Bedienelemente — Touch-Ziel (2.5.8). */
.t-kontakt__block dd a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--t-blau-600);
	overflow-wrap: anywhere;
}

.t-kontakt__adresse {
	font-style: normal;
	font-weight: 400;
	line-height: 1.7;
	color: var(--t-text);
}

/* Öffnungszeiten: zweispaltig, Zeiten rechtsbündig und ziffernstabil. */
.t-kontakt__zeiten {
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: var(--t-text);
}
.t-kontakt__zeiten li {
	display: flex;
	justify-content: space-between;
	gap: var(--t-space-4);
	padding-block: var(--t-space-1);
}
.t-kontakt__zeiten li span + span {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--t-text-mute);
}

.t-kontakt__zusatz {
	margin: var(--t-space-2) 0 0;
	font-weight: 400;
	font-size: var(--t-fs-300);
	color: var(--t-text-mute);
}

.t-kontakt__hinweis {
	margin: var(--t-space-6) 0 0;
	padding-top: var(--t-space-4);
	border-top: 1px solid var(--t-linie);
	font-size: var(--t-fs-300);
	color: var(--t-text-mute);
}