/* ============================================================================
   NUIT NOIRE INTERNATIONAL — profile.css
   „Your key" — die Seite des Gastes hinter der Schwelle.

   Ausschliesslich neue .nni-profile*-Bausteine. Alles andere (Hero, Eyebrow,
   Display, Rule, Button, Link) kommt unverändert aus components.css und
   private.css. Farben, Masse und Zeiten stammen ausnahmslos aus tokens.css.

   Formensprache: Felder sind Linien, keine Kästen. Sehr viel Ruhe, wenig
   Kontrast, nichts blinkt. Zweispaltig ab 64em — links das Formular,
   rechts der stille Lesebereich.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1 · Rahmen
   ------------------------------------------------------------------------ */

.nni-profile {
	--nnipf-line: var(--nni-hair) solid var(--nni-line-soft);
	--nnipf-gap: clamp(34px, 4.2vw, 58px);

	min-width: 0;
}

.nni-profile :where(p, dd, dt, li, label, span) {
	overflow-wrap: break-word;
}

.nni-profile .nni-hero .nni-lede {
	max-width: 48ch;
}

/* ---------------------------------------------------------------------------
   2 · Die beiden Spalten
   ------------------------------------------------------------------------ */

.nni-profile__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: clamp(52px, 7vw, 96px);
	width: 100%;
	min-width: 0;
	padding-block: clamp(34px, 4.5vw, 68px);
}

@media (min-width: 64em) {
	.nni-profile__cols {
		grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
		column-gap: clamp(56px, 7vw, 132px);
		row-gap: 0;
	}
}

.nni-profile__main {
	display: grid;
	align-content: start;
	gap: clamp(26px, 3.2vw, 44px);
	min-width: 0;
}

.nni-profile__aside {
	display: grid;
	align-content: start;
	gap: clamp(34px, 4.2vw, 58px);
	min-width: 0;
	padding-top: clamp(40px, 5vw, 66px);
	border-top: var(--nnipf-line);
}

@media (min-width: 64em) {
	.nni-profile__aside {
		position: sticky;
		top: calc(var(--nnip-head, 72px) + 28px);
		padding-top: 0;
		padding-inline-start: clamp(28px, 3.2vw, 56px);
		border-top: 0;
		border-inline-start: var(--nnipf-line);
	}
}

/* ---------------------------------------------------------------------------
   3 · Formular — Felder als Linien
   ------------------------------------------------------------------------ */

.nni-profile__form {
	display: grid;
	gap: clamp(26px, 3.2vw, 44px);
	width: 100%;
	max-width: 46rem;
	min-width: 0;
}

.nni-profile__field {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.nni-profile__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(26px, 3.2vw, 44px);
	min-width: 0;
}

@media (min-width: 48em) {
	.nni-profile__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.nni-profile__label {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	line-height: 1.5;
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	color: var(--nni-faint);
	transition: color var(--nni-t-fast) var(--nni-ease);
}

.nni-profile__field:focus-within .nni-profile__label {
	color: var(--nni-muted);
}

.nni-profile__input {
	width: 100%;
	max-width: 100%;
	/* Mindesthöhe für die Fingerkuppe, Mindestgrösse gegen den iOS-Zoom. */
	min-height: 46px;
	padding: 10px 0 12px;
	background-color: transparent;
	border: 0;
	border-bottom: var(--nni-hair) solid var(--nni-line);
	border-radius: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: max(1rem, 16px);
	line-height: 1.6;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-cream);
	caret-color: var(--nni-cream);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--nni-t-med) var(--nni-ease);
}

.nni-profile__input::placeholder {
	color: var(--nni-faint);
	opacity: 1;
}

.nni-profile__input:hover {
	border-bottom-color: var(--nni-muted);
}

.nni-profile__input:focus,
.nni-profile__input:focus-visible {
	border-bottom-color: var(--nni-cream);
	outline-offset: 6px;
}

.nni-profile__textarea {
	min-height: 8.5em;
	line-height: var(--nni-lh-snug);
	resize: vertical;
}

/* Feiner Winkel statt Systemsteuerung — rein aus zwei Verläufen gezeichnet. */
.nni-profile__select {
	padding-inline-end: 1.8em;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--nni-muted) 50%),
		linear-gradient(135deg, var(--nni-muted) 50%, transparent 50%);
	background-position:
		calc(100% - 11px) calc(50% - 1px),
		calc(100% - 6px) calc(50% - 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.nni-profile__select option {
	background-color: var(--nni-ink);
	color: var(--nni-cream);
}

/* Automatisch ausgefüllte Felder dürfen die Fläche nicht aufhellen. */
.nni-profile__input:-webkit-autofill,
.nni-profile__input:-webkit-autofill:hover,
.nni-profile__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--nni-cream);
	box-shadow: 0 0 0 1000px var(--nni-black) inset;
	transition: background-color 100000s ease-in-out 0s;
}

/* Honigtopf — unsichtbar, aber im Fluss der Seite. */
.nni-profile .nni-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   4 · Absenden und Rückmeldung
   ------------------------------------------------------------------------ */

.nni-profile__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 3vw, 34px);
	padding-top: clamp(4px, 1vw, 12px);
	min-width: 0;
}

.nni-profile__actions .nni-btn {
	min-height: 46px;
}

.nni-profile__form.is-busy .nni-btn,
.nni-profile__actions .nni-btn[disabled] {
	opacity: 0.5;
	pointer-events: none;
}

.nni-profile__msg {
	flex: 1 1 16ch;
	min-width: 0;
	min-height: 1.4em;
	margin: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.6;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-muted);
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity var(--nni-t-med) var(--nni-ease),
		transform var(--nni-t-med) var(--nni-ease);
}

.nni-profile__msg.is-in,
.nni-profile__msg.is-ok,
.nni-profile__msg.is-error {
	opacity: 1;
	transform: translateY(0);
}

.nni-profile__msg.is-ok {
	color: var(--nni-cream-soft);
}

.nni-profile__msg.is-error {
	color: var(--nni-danger);
}

/* ---------------------------------------------------------------------------
   5 · Beiläufige Zeilen (Hinweis unter dem Feld, Fussnote des Formulars)
   ------------------------------------------------------------------------ */

.nni-profile__hint,
.nni-profile__note {
	margin: 0;
	max-width: 46ch;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.75;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-faint);
}

.nni-profile__note {
	padding-top: clamp(6px, 1vw, 14px);
}

/* ---------------------------------------------------------------------------
   6 · Lesebereich — zwei stille Zahlen
   ------------------------------------------------------------------------ */

.nni-profile__panel {
	display: grid;
	align-content: start;
	gap: clamp(16px, 2vw, 26px);
	min-width: 0;
}

.nni-profile__panel + .nni-profile__panel {
	padding-top: clamp(30px, 3.6vw, 48px);
	border-top: var(--nnipf-line);
}

.nni-profile__meta {
	display: grid;
	gap: 0;
	margin: 0;
	min-width: 0;
}

.nni-profile__meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: clamp(10px, 1.6vw, 20px);
	padding-block: clamp(12px, 1.6vw, 18px);
	border-bottom: var(--nnipf-line);
}

.nni-profile__meta-row:last-child {
	border-bottom: 0;
}

.nni-profile__meta-label {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	line-height: 1.5;
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	color: var(--nni-faint);
}

.nni-profile__meta-value {
	margin: 0;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: var(--nni-fs-lg);
	line-height: var(--nni-lh-tight);
	letter-spacing: var(--nni-ls-display);
	color: var(--nni-cream);
	font-variant-numeric: lining-nums tabular-nums;
}

/* ---------------------------------------------------------------------------
   7 · Die eigenen Anfragen
   ------------------------------------------------------------------------ */

.nni-profile__notes {
	display: grid;
	gap: clamp(22px, 2.6vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.nni-profile__note-item {
	display: grid;
	gap: 8px;
	padding-inline-start: clamp(16px, 1.8vw, 24px);
	border-inline-start: var(--nni-hair) solid var(--nni-line);
	min-width: 0;
}

.nni-profile__note-date {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	line-height: 1.5;
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	color: var(--nni-muted);
}

.nni-profile__note-text {
	margin: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.75;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-cream-soft);
	hyphens: auto;
}

/* ---------------------------------------------------------------------------
   8 · Ruhiger Hinweis statt Formular (Betreiberschlüssel, verschlossen)
   ------------------------------------------------------------------------ */

.nni-profile__quiet {
	display: grid;
	gap: clamp(12px, 1.6vw, 20px);
	max-width: 46ch;
	min-width: 0;
}

.nni-profile__quiet-title {
	margin: 0;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: var(--nni-fs-xl);
	line-height: var(--nni-lh-tight);
	letter-spacing: var(--nni-ls-display);
	color: var(--nni-cream);
}

.nni-profile__quiet-text {
	margin: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-base);
	line-height: var(--nni-lh-body);
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-cream-soft);
}

/* ---------------------------------------------------------------------------
   9 · Abgang
   ------------------------------------------------------------------------ */

.nni-profile__after {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 3vw, 34px);
	padding-top: clamp(8px, 1.4vw, 18px);
}

.nni-profile__after .nni-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------------------------------------------------------------------------
   10 · Weniger Bewegung
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.nni-profile__label,
	.nni-profile__input,
	.nni-profile__msg {
		transition: none;
	}

	.nni-profile__msg {
		transform: none;
	}
}