/* =========================================================================
 * ueber-uns.css  —  /ueber-uns
 *
 * HTML-Seite (§2): WordPress-Seite + freies Markup im Code-Block,
 * eingehängt per is_page('ueber-uns') im Enqueue. Kein Template, kein Loop.
 *
 * Lädt zusätzlich zu root.css. Buttons (.t-btn*) und alle Tokens kommen
 * von dort — hier nur Kopf, Textspalte, Punkte, Signatur, Hinweis.
 *
 * Die Seite trägt kein .t-mass (HTML-Seiten setzen ihr Maß selbst, wie
 * reisen.css / liste.css). Deshalb steht die Breite an jedem Block.
 * ====================================================================== */


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

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

.t-ueber-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-ueber-kopf h1 { margin-bottom: var(--t-space-4); }

.t-ueber-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;
}


/* --- Rumpf --------------------------------------------------------------- */

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


/* --- Fließtext ----------------------------------------------------------- */

.t-ueber__prosa { max-width: var(--t-breite-text); }
.t-ueber__prosa h2 { margin-bottom: var(--t-space-4); }
.t-ueber__prosa > :last-child { margin-bottom: 0; }


/* --- Drei Punkte ---------------------------------------------------------
 * Keine Nummerierung: das ist keine Reihenfolge, sondern drei gleichwertige
 * Aussagen. Die Marke oben links ist deshalb der Kennwert selbst.
 * ---------------------------------------------------------------------- */

.t-ueber__punkte {
	list-style: none;
	margin: var(--t-space-8) 0 0;
	padding: 0;
	display: grid;
	gap: var(--t-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.t-ueber__punkt {
	padding-top: var(--t-space-4);
	border-top: 2px solid var(--t-tuerkis);
}

.t-ueber__punkt-zahl {
	display: block;
	margin-bottom: var(--t-space-2);
	font-family: var(--t-font-titel);
	font-size: var(--t-fs-700);
	line-height: 1;
	color: var(--t-blau-900);
}

.t-ueber__punkt h3 { margin-bottom: var(--t-space-2); }

.t-ueber__punkt p {
	color: var(--t-text-mute);
	margin-bottom: 0;
}


/* --- Signatur ------------------------------------------------------------
 * Der Schlusssatz des Reisebüros, in der Titelschrift. Ein einzelner
 * Türkis-Balken links — dieselbe Geste wie .t-leer in root.css.
 * ---------------------------------------------------------------------- */

.t-ueber__signatur {
	max-width: var(--t-breite-text);
	margin: var(--t-space-8) 0 0;
	padding: var(--t-space-4) var(--t-space-6);
	border-left: 4px solid var(--t-tuerkis);
}

.t-ueber__signatur blockquote {
	margin: 0;
	padding: 0;
}

.t-ueber__signatur blockquote p {
	margin: 0;
	font-family: var(--t-font-titel);
	font-size: var(--t-fs-700);
	line-height: 1.2;
	color: var(--t-blau-900);
}

.t-ueber__signatur figcaption {
	margin-top: var(--t-space-3);
	font-weight: 600;
	color: var(--t-text-mute);
}


/* --- Hinweisblock (analog reisen.css) ------------------------------------ */

.t-ueber__hinweis {
	margin-top: var(--t-space-8);
	padding: var(--t-space-6);
	display: grid;
	gap: var(--t-space-4);
	align-items: center;
	background: var(--t-sand);
	border-radius: var(--t-radius);
}

@media (min-width: 50rem) {
	.t-ueber__hinweis {
		grid-template-columns: 1fr auto;
		gap: var(--t-space-6);
		padding: var(--t-space-6) var(--t-space-8);
	}
}

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

.t-ueber__hinweis p {
	max-width: 52ch;
	color: var(--t-text-mute);
	margin-bottom: 0;
}

.t-ueber__hinweis-aktion {
	display: flex;
	flex-wrap: wrap;
	gap: var(--t-space-3);
	margin: 0;
}
.t-ueber__hinweis-aktion .t-btn { white-space: nowrap; }