/* ==========================================================================
   soulmate.de — ueber-mich.inc.css
   Regeln, die ausschliesslich die Seite "Ueber mich" braucht.
   Wird nach assets/css/style.css eingebunden.
   ========================================================================== */

/* Dritte Verzoegerungsstufe der Einblendung — nur hier im Einsatz */
.reveal--d2 {
  transition-delay: 180ms;
}

:root {
		--ht-bg:        #2e2622;
		--ht-text:      #ede6dc;
		--ht-muted:     #a89684;
		--ht-rule:      rgba(237, 230, 220, .18);
		--ht-icon:      #c9b7a2;

		--ht-col-max:   34rem;
		--ht-gap-icon:  1.5rem;
		--ht-row-pad:   1.5rem;
	}


	.haltung {
		padding: 6rem 1.5rem 7rem;
	}

	.haltung__inner {
		max-width: var(--ht-col-max);
		margin: 0 auto;
	}

	.haltung__label {
		margin: 0 0 1.75rem;
		font-family: system-ui, sans-serif;
		font-size: .7rem;
		font-weight: 400;
		letter-spacing: .25em;
		text-transform: uppercase;
		color: var(--ht-muted);
	}

	.haltung__title {
		margin: 0 0 3.5rem;
		font-size: clamp(2rem, 5vw, 3.25rem);
		font-weight: 400;
		line-height: 1.15;
	}

	.haltung__list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid var(--ht-rule);
	}

	.haltung__item {
		display: flex;
		align-items: center;
		gap: var(--ht-gap-icon);
		padding: var(--ht-row-pad) 0;
		border-bottom: 1px solid var(--ht-rule);
	}

	.haltung__icon {
		flex: 0 0 auto;
		width: 2rem;
		height: 2rem;
		color: var(--ht-icon);
	}

	.haltung__icon svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.haltung__text {
		font-size: clamp(1.15rem, 2.5vw, 1.4rem);
		line-height: 1.35;
	}

	@media (max-width: 30rem) {
		:root {
			--ht-gap-icon: 1.1rem;
			--ht-row-pad:  1.15rem;
		}

		.haltung { padding: 4rem 1.25rem 5rem; }
		.haltung__icon { width: 1.65rem; height: 1.65rem; }
	}