/* =========================================================
   MEMBERLIST
   ========================================================= */

:root {

	/* -----------------------------------------------------
	   GLOBALE DESIGNVARIABLEN
	----------------------------------------------------- */

	--sidebit-bg: #0a0809;
	--sidebit-bg-deep: #070607;
	--sidebit-bg-soft: #0e0b0c;

	--sidebit-panel: #100c0e;
	--sidebit-panel-raised: #151013;
	--sidebit-panel-hover: #1b1316;

	--sidebit-text: #c6babe;
	--sidebit-text-soft: #96898e;
	--sidebit-text-muted: #685c61;
	--sidebit-text-strong: #eee5e8;

	--sidebit-accent-dark: #4e1019;
	--sidebit-accent: #741b2a;
	--sidebit-accent-medium: #92283a;
	--sidebit-accent-light: #b64356;
	--sidebit-accent-pale: #ce7180;

	--sidebit-transparent: transparent;

	--sidebit-line:
		rgba(194, 150, 161, 0.11);

	--sidebit-line-strong:
		rgba(194, 150, 161, 0.22);

	--sidebit-line-accent:
		rgba(182, 67, 86, 0.42);

	--sidebit-wash:
		rgba(116, 27, 42, 0.08);

	--sidebit-wash-medium:
		rgba(116, 27, 42, 0.12);

	--sidebit-wash-strong:
		rgba(116, 27, 42, 0.18);

	--sidebit-light-faint:
		rgba(255, 255, 255, 0.018);

	--sidebit-light-soft:
		rgba(255, 255, 255, 0.035);

	--sidebit-black:
		rgba(0, 0, 0, 0.42);


	/* -----------------------------------------------------
	   MEMBERLIST
	----------------------------------------------------- */

	--ml-font:
		var(--sidebit-font);

	--ml-display:
		var(--sidebit-display);

	--ml-bg:
		var(--sidebit-bg);

	--ml-bg-soft:
		var(--sidebit-bg-soft);

	--ml-panel:
		var(--sidebit-panel);

	--ml-panel-raised:
		var(--sidebit-panel-raised);

	--ml-text:
		var(--sidebit-text);

	--ml-text-soft:
		var(--sidebit-text-soft);

	--ml-text-muted:
		var(--sidebit-text-muted);

	--ml-text-strong:
		var(--sidebit-text-strong);

	--ml-accent:
		var(--sidebit-accent-light);

	--ml-accent-dark:
		var(--sidebit-accent-dark);

	--ml-accent-pale:
		var(--sidebit-accent-pale);

	--ml-line:
		var(--sidebit-line);

	--ml-line-strong:
		var(--sidebit-line-strong);

	--ml-line-accent:
		var(--sidebit-line-accent);


	/* -----------------------------------------------------
	   ERSATZGRAFIK
	   Diese URL später einfach austauschen.
	----------------------------------------------------- */

	--ml-guest-image:
		url(/images/memberlist_guest.jpg);


	/* -----------------------------------------------------
	   VERLÄUFE
	----------------------------------------------------- */

	--ml-card-gradient:
		linear-gradient(
			135deg,
			#100c0e,
			#0a0809 58%,
			#0d090b
		);

	--ml-card-hover:
		linear-gradient(
			135deg,
			#151013,
			#0c090a 58%,
			#110b0e
		);

	--ml-head-gradient:
		linear-gradient(
			to right,
			rgba(116, 27, 42, 0.14),
			rgba(116, 27, 42, 0.025) 58%,
			rgba(116, 27, 42, 0)
		);

	--ml-divider:
		linear-gradient(
			to right,
			rgba(182, 67, 86, 0),
			rgba(182, 67, 86, 0.5),
			rgba(182, 67, 86, 0)
		);

	--ml-vertical-divider:
		linear-gradient(
			to bottom,
			rgba(194, 150, 161, 0),
			rgba(194, 150, 161, 0.18),
			rgba(194, 150, 161, 0)
		);

	--ml-image-overlay:
		linear-gradient(
			to bottom,
			rgba(7, 6, 7, 0.01),
			rgba(7, 6, 7, 0.30)
		);


	/* -----------------------------------------------------
	   SCHATTEN
	----------------------------------------------------- */

	--ml-shadow:
		0 18px 50px rgba(0, 0, 0, 0.25);

	--ml-image-shadow:
		0 15px 36px rgba(0, 0, 0, 0.44);

	--ml-image-glow:
		0 0 28px rgba(182, 67, 86, 0.08);


	/* -----------------------------------------------------
	   GRÖSSEN
	----------------------------------------------------- */

	--ml-width: 1380px;

	--ml-image-size: 160px;
}


/* =========================================================
   BASIS
   ========================================================= */

.ml-page,
.ml-page *,
.ml-user,
.ml-user * {
	box-sizing: border-box;
}


/* =========================================================
   SEITENRAHMEN
   ========================================================= */

.ml-page {
	width: min(
		calc(100% - 50px),
		var(--ml-width)
	);

	margin: 0 auto;

	padding:
		50px
		0
		100px;

	color: var(--ml-text);

	font-family: var(--ml-font);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.ml-eyebrow,
.ml-user__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;

	margin-bottom: 8px;

	color: var(--ml-accent);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.23em;
	line-height: 1.5;

	text-transform: uppercase;
}


.ml-eyebrow::before,
.ml-user__eyebrow::before {
	width: 5px;
	height: 5px;

	content: "";

	border:
		1px solid
		var(--ml-accent);

	transform: rotate(45deg);
}


/* =========================================================
   HERO
   ========================================================= */

.ml-hero {
	position: relative;

	margin-bottom: 58px;
	padding-bottom: 30px;

	border-bottom:
		1px solid
		var(--ml-line-strong);
}


.ml-hero::after {
	position: absolute;

	right: 0;
	bottom: -1px;

	width: 220px;
	height: 1px;

	content: "";

	background: var(--ml-divider);
}


.ml-hero__content {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}


.ml-hero__heading {
	min-width: 0;
}


/*
 * Globale h1-Deko hier gezielt neutralisieren,
 * weil wir einen eigenen Seitenkopf haben.
 */

.ml-hero__title {
	margin: 0;
	padding: 0;

	color: var(--ml-text-strong);

	font-family: var(--ml-display);
	font-size: clamp(52px, 6vw, 82px);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 0.92;
}


.ml-hero__title::before,
.ml-hero__title::after {
	display: none;

	content: none;
}


/* Erweiterte Suche */

.ml-hero__search {
	display: inline-flex;
	align-items: center;
	gap: 11px;

	flex-shrink: 0;

	padding:
		9px
		0;

	color: var(--ml-text-soft);

	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.11em;
	line-height: 1.4;

	text-transform: uppercase;

	border-bottom:
		1px solid
		var(--ml-line-accent);

	transition: color 0.18s ease;
}


.ml-hero__search:hover {
	color: var(--ml-accent-pale);
}


/* =========================================================
   VERZEICHNISKOPF
   ========================================================= */

.ml-directory {
	position: relative;

	margin-bottom: 72px;
}


.ml-directory__header,
.ml-search__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;

	margin-bottom: 23px;
}


.ml-section-title {
	margin: 0;
	padding: 0;

	color: var(--ml-text-strong);

	font-family: var(--ml-display);
	font-size: clamp(30px, 3vw, 42px);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1;
}


.ml-section-title::before,
.ml-section-title::after {
	display: none;

	content: none;
}


.ml-directory__pages {
	flex-shrink: 0;
}


/* =========================================================
   ALPHABET
   ========================================================= */

.ml-alphabet {
	display: grid;

	grid-template-columns:
		repeat(26, minmax(28px, 1fr));

	margin-bottom: 34px;

	background: var(--ml-bg-soft);

	border-top:
		1px solid
		var(--ml-line-strong);

	border-bottom:
		1px solid
		var(--ml-line-strong);
}


.ml-alphabet a {
	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 0;
	min-height: 45px;

	color: var(--ml-text-muted);

	font-family: var(--ml-display);
	font-size: 16px;
	font-weight: 600;

	border-right:
		1px solid
		var(--ml-line);

	transition:
		color 0.18s ease,
		background 0.18s ease;
}


.ml-alphabet a:last-child {
	border-right: 0;
}


.ml-alphabet a:hover {
	color: var(--ml-text-strong);

	background: var(--sidebit-wash);
}


/* =========================================================
   ERGEBNISSE
   ========================================================= */

.ml-results {
	display: flex;
	flex-direction: column;
	gap: 22px;

	width: 100%;
}


/* =========================================================
   EINZELNER USER
   ========================================================= */

.ml-user {
	position: relative;

	display: grid;

	/*
	 * WICHTIG:
	 * identity + summary = exakt 1fr
	 * details            = exakt 1fr
	 *
	 * Dadurch liegt die feste Portraitspalte mathematisch
	 * genau in der Mitte der gesamten Karte.
	 */
	grid-template-columns:
		minmax(0, 0.56fr)
		minmax(0, 0.44fr)
		var(--ml-image-size)
		minmax(0, 1fr);

	grid-template-areas:
		"identity summary portrait details";

	align-items: stretch;

	width: 100%;
	min-height: 230px;

	color: var(--ml-text);

	background: var(--ml-card-gradient);

	border:
		1px solid
		var(--ml-line);

	box-shadow: var(--ml-shadow);

	transition:
		background 0.2s ease,
		border-color 0.2s ease;
}


.ml-user:hover {
	background: var(--ml-card-hover);

	border-color: var(--ml-line-strong);
}


/* rote Linie oben links */

.ml-user::before {
	position: absolute;

	top: -1px;
	left: 36px;

	width: 88px;
	height: 1px;

	content: "";

	background: var(--ml-accent);
}


/* zweite kleine Linie */

.ml-user::after {
	position: absolute;

	top: -1px;
	right: 36px;

	width: 44px;
	height: 1px;

	content: "";

	background: var(--ml-accent-dark);
}

/* =========================================================
   CHARAKTER-KURZTEXT
   ========================================================= */

.ml-user__summary {
	position: relative;

	grid-area: summary;

	display: flex;
	flex-direction: column;
	justify-content: center;

	min-width: 0;

	padding:
		30px
		22px;

	border-left:
		1px solid
		var(--ml-line);
}


/* dezente Trennlinie nach rechts */

.ml-user__summary::after {
	position: absolute;

	top: 28px;
	right: 0;
	bottom: 28px;

	width: 1px;

	content: "";

	background: var(--ml-vertical-divider);
}


/* kleine Überschrift */

.ml-user__summary-label {
	display: flex;
	align-items: center;
	gap: 8px;

	margin-bottom: 12px;

	color: var(--ml-accent);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.5;

	text-transform: uppercase;
}


.ml-user__summary-label::before {
	width: 4px;
	height: 4px;

	content: "";

	background: var(--ml-accent-dark);

	transform: rotate(45deg);
}


/* eigentlicher Fließtext */

.ml-user__summary-text {
	max-height: 118px;

	padding-right: 8px;

	overflow-x: hidden;
	overflow-y: auto;

	color: var(--ml-text-soft);

	font-size: 13px;
	font-weight: 400;
	line-height: 1.68;

	text-align: justify;

	scrollbar-width: thin;
	scrollbar-color:
		var(--ml-accent-dark)
		var(--sidebit-transparent);
}


/* Webkit Scrollbar */

.ml-user__summary-text::-webkit-scrollbar {
	width: 3px;
}


.ml-user__summary-text::-webkit-scrollbar-track {
	background: var(--sidebit-transparent);
}


.ml-user__summary-text::-webkit-scrollbar-thumb {
	background: var(--ml-accent-dark);
}

/* =========================================================
   IDENTITÄT LINKS
   ========================================================= */

.ml-user__identity {
	grid-area: identity;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	min-width: 0;

	padding:
		34px
		clamp(28px, 3vw, 42px);
}


.ml-user__name {
	margin: 0;
	padding: 0;

	color: var(--ml-text-strong);

	font-family: var(--ml-display);
	font-size: clamp(31px, 2.8vw, 43px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.02;
	text-transform: none;

	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}


.ml-user__name::before,
.ml-user__name::after {
	display: none;

	content: none;
}


.ml-user__name a {
	display: block;

	max-width: 100%;

	color: inherit;

	font-family: inherit;
	font-weight: inherit;

	text-decoration: none;

	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}


.ml-user__name a:hover {
	color: var(--ml-accent-pale);
}


/* Spieler */

.ml-user__player {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;

	margin-top: 14px;
	padding-bottom: 15px;

	color: var(--ml-text-muted);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;

	text-transform: uppercase;

	border-bottom:
		1px solid
		var(--ml-line);
}


.ml-user__player span {
	color: var(--ml-text-muted);
}


.ml-user__player strong {
	color: var(--ml-text-soft);

	font-size: inherit;
	font-style: normal;
	font-weight: 700;
}


.ml-user__player strong:empty::before {
	content: "nicht angegeben";

	color: var(--ml-text-muted);

	font-style: italic;
	font-weight: 400;
}


/* Profillink */

.ml-user__profile {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	margin-top: 18px;

	color: var(--ml-accent-pale);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.5;

	text-transform: uppercase;
}


.ml-user__profile:hover {
	color: var(--ml-text-strong);
}


/* =========================================================
   PORTRAIT MITTE
   ========================================================= */

.ml-user__portrait-wrap {
	position: relative;

	grid-area: portrait;

	display: flex;
	align-items: center;
	justify-content: center;

	padding:
		28px
		0;
}


/* vertikale Trennlinien */

.ml-user__portrait-wrap::before,
.ml-user__portrait-wrap::after {
	position: absolute;

	top: 28px;
	bottom: 28px;

	width: 1px;

	content: "";

	background: var(--ml-vertical-divider);
}


.ml-user__portrait-wrap::before {
	left: 0;
}


.ml-user__portrait-wrap::after {
	right: 0;
}


.ml-user__portrait {
	position: relative;

	display: block;

	width: calc(var(--ml-image-size) - 28px);
	height: calc(var(--ml-image-size) - 28px);

	overflow: hidden;

	background: var(--ml-panel);

	border:
		1px solid
		var(--ml-line-strong);

	border-radius: 50%;

	box-shadow:
		var(--ml-image-shadow),
		var(--ml-image-glow);
}


/* Bild */

.ml-user__portrait img,
.ml-user__guestimage {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


.ml-user__portrait img {
	object-fit: cover;
	object-position: center 25%;

	filter:
		saturate(0.72)
		contrast(1.04)
		brightness(0.82);
}


/* GÄSTE / KEIN PROFILBILD */

.ml-user__guestimage {
	background-image:
		var(--ml-image-overlay),
		var(--ml-guest-image);
}


/* leichte Abdunklung */

.ml-user__portrait::before {
	position: absolute;
	z-index: 2;

	inset: 0;

	content: "";

	pointer-events: none;

	background: var(--ml-image-overlay);
}


/* Innenring */

.ml-user__portrait-ring {
	position: absolute;
	z-index: 3;

	inset: 7px;

	pointer-events: none;

	border:
		1px solid
		var(--ml-line);

	border-radius: 50%;
}


/* =========================================================
   DETAILS RECHTS
   ========================================================= */

.ml-user__details {
	grid-area: details;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;

	min-width: 0;

	padding:
		34px
		clamp(30px, 3.5vw, 48px);
}


/* =========================================================
   AKTIVITÄT
   ========================================================= */

.ml-user__activity {
	display: flex;
	flex-direction: column;
	align-items: flex-end;

	min-width: 120px;

	text-align: right;
}


.ml-user__activity-label {
	margin-bottom: 7px;

	color: var(--ml-text-muted);

	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.17em;
	line-height: 1.4;

	text-transform: uppercase;
}


.ml-user__activity-value {
	color: var(--ml-text-strong);

	font-family: var(--ml-display);
	font-size: 48px;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 0.85;
}


.ml-user__activity-unit {
	margin-top: 7px;

	color: var(--ml-text-soft);

	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.5;

	text-transform: uppercase;
}


/* =========================================================
   TRENNER
   ========================================================= */

.ml-user__divider {
	align-self: stretch;

	width: 1px;
	min-height: 80px;

	background: var(--ml-vertical-divider);
}


/* =========================================================
   WANDSHARE / EXTRAS
   ========================================================= */

.ml-user__extras {
	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 100px;

	color: var(--ml-text-soft);

	font-size: 12px;
	line-height: 1.6;

	text-align: center;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.ml-pagination {
	display: flex;
	justify-content: flex-end;

	margin-top: 28px;
	padding-top: 22px;

	border-top:
		1px solid
		var(--ml-line);
}


.ml-pagination:empty,
.ml-directory__pages:empty {
	display: none;
}


/* =========================================================
   SUCHE
   ========================================================= */

.ml-search {
	position: relative;

	padding-top: 38px;

	border-top:
		1px solid
		var(--ml-line-strong);
}


.ml-search__advanced {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	padding-bottom: 7px;

	color: var(--ml-text-soft);

	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;

	text-transform: uppercase;

	border-bottom:
		1px solid
		var(--ml-line-accent);
}


.ml-search__advanced:hover {
	color: var(--ml-accent-pale);
}


.ml-search__form {
	margin-top: 27px;
}


.ml-search__grid {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(0, 1fr)
		minmax(300px, 1.1fr);

	background: var(--ml-bg-soft);

	border-top:
		1px solid
		var(--ml-line-strong);

	border-bottom:
		1px solid
		var(--ml-line-strong);
}


.ml-field {
	min-width: 0;

	padding: 25px;

	border-right:
		1px solid
		var(--ml-line);
}


.ml-field:last-child {
	border-right: 0;
}


.ml-field > label {
	display: block;

	margin-bottom: 14px;
}


.ml-field__label {
	display: block;

	color: var(--ml-accent);

	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	line-height: 1.5;

	text-transform: uppercase;
}


.ml-field__hint {
	display: block;

	margin-top: 4px;

	color: var(--ml-text-muted);

	font-size: 11px;
	line-height: 1.5;
}


.ml-field input.textbox,
.ml-field select {
	width: 100%;

	margin: 0;
}


/* Radio */

.ml-order {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px 18px;

	margin-bottom: 14px;
}


.ml-order label {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	color: var(--ml-text-soft);

	font-size: 12px;

	cursor: pointer;
}


.ml-order input[type="radio"] {
	width: 14px;
	height: 14px;

	margin: 0;

	accent-color:
		var(--ml-accent);
}


/* Footer */

.ml-search__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;

	padding-top: 20px;
}


.ml-search__footer p {
	max-width: 570px;

	color: var(--ml-text-muted);

	font-size: 12px;
	line-height: 1.65;
}


.ml-search__submit {
	display: inline-flex;
	align-items: center;
	gap: 11px;

	margin: 0;
}


/* =========================================================
   SELECT2
   ========================================================= */

.ml-page .select2-container {
	width: 100% !important;
}


.ml-page .select2-container .select2-choice {
	height: 39px;

	padding:
		0
		36px
		0
		10px;

	color: var(--ml-text-strong);

	font-size: 15px;
	line-height: 37px;

	background: var(--ml-panel);

	border:
		1px solid
		var(--ml-line-strong);

	border-radius: 0;

	box-shadow: none;
}


.ml-page
.select2-container
.select2-choice
.select2-arrow {
	width: 32px;

	background: var(--ml-bg-soft);

	border-left:
		1px solid
		var(--ml-line);
}


.ml-page
.select2-container-active
.select2-choice,
.ml-page
.select2-container-active
.select2-choices {
	background: var(--ml-panel-raised);

	border-color: var(--ml-line-accent);

	box-shadow: none;
}


/* =========================================================
   MITTLERE BREITEN
   ========================================================= */

@media (max-width: 1050px) {

	:root {
		--ml-image-size: 142px;
	}


	.ml-page {
		width: calc(100% - 36px);
	}


.ml-user {
	grid-template-columns:
		minmax(0, 0.56fr)
		minmax(0, 0.44fr)
		var(--ml-image-size)
		minmax(0, 1fr);

	grid-template-areas:
		"identity summary portrait details";
}


.ml-user__summary {
	padding:
		28px
		19px;
}


.ml-user__summary-text {
	max-height: 112px;

	padding-right: 7px;

	font-size: 13px;
	line-height: 1.65;
}


	.ml-user__identity {
		padding-right: 24px;
		padding-left: 24px;
	}


	.ml-user__details {
		padding-right: 28px;
		padding-left: 28px;
	}


	.ml-search__grid {
		grid-template-columns:
			1fr
			1fr;
	}


	.ml-field--sort {
		grid-column: 1 / -1;

		border-top:
			1px solid
			var(--ml-line);

		border-right: 0;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px), (max-device-width: 820px) {

	:root {
		--ml-image-size: 144px;
	}
	
	.ml-user__summary {
	display: none;
}


	.ml-page {
		width: 100%;

		padding:
			35px
			20px
			70px;

		font-size: 17px;
	}


	/* Hero */

	.ml-hero {
		margin-bottom: 45px;
	}


	.ml-hero__content {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
	}


	.ml-eyebrow,
	.ml-user__eyebrow {
		font-size: 12px;
	}


	.ml-hero__title {
		font-size: clamp(48px, 13vw, 66px);
	}


	.ml-hero__search {
		font-size: 13px;
	}


	/* Directory */

	.ml-directory__header,
	.ml-search__header {
		align-items: flex-start;
		flex-direction: column;

		gap: 15px;
	}


	.ml-section-title {
		font-size: 36px;
	}


	/* Alphabet scrollbar */

	.ml-alphabet {
		display: flex;

		overflow-x: auto;

		scrollbar-width: thin;
	}


	.ml-alphabet a {
		flex: 0 0 45px;

		min-width: 45px;
		min-height: 47px;

		font-size: 18px;
	}


	/* User */

	.ml-user {
		grid-template-columns:
			minmax(0, 1fr)
			var(--ml-image-size);

		grid-template-areas:
			"identity portrait"
			"details details";

		min-height: 0;
	}


	.ml-user__identity {
		padding:
			27px
			22px;
	}


	.ml-user__name {
		font-size: clamp(35px, 8vw, 44px);
	}


	.ml-user__player {
		font-size: 13px;
	}


	.ml-user__profile {
		font-size: 13px;
	}


	.ml-user__portrait-wrap {
		padding:
			26px
			10px;
	}


	.ml-user__portrait-wrap::after {
		display: none;
	}


	.ml-user__portrait {
		width: 116px;
		height: 116px;
	}


	.ml-user__details {
		justify-content: flex-start;

		padding:
			21px
			22px;

		border-top:
			1px solid
			var(--ml-line);
	}


	.ml-user__activity {
		align-items: flex-start;

		text-align: left;
	}


	.ml-user__activity-label {
		font-size: 12px;
	}


	.ml-user__activity-value {
		font-size: 48px;
	}


	.ml-user__activity-unit {
		font-size: 12px;
	}


	.ml-user__extras {
		font-size: 15px;
		line-height: 1.65;
	}


	/* Suche */

	.ml-search__advanced {
		font-size: 13px;
	}


	.ml-search__grid {
		display: block;
	}


	.ml-field {
		padding:
			22px
			20px;

		border-right: 0;
		border-bottom:
			1px solid
			var(--ml-line);
	}


	.ml-field:last-child {
		border-bottom: 0;
	}


	.ml-field__label {
		font-size: 13px;
	}


	.ml-field__hint,
	.ml-order label {
		font-size: 14px;
	}


	.ml-search__footer {
		align-items: flex-start;
		flex-direction: column;

		gap: 18px;
	}


	.ml-search__footer p {
		font-size: 15px;
		line-height: 1.7;
	}


	.ml-page
	.select2-container
	.select2-choice {
		height: 45px;

		font-size: 16px;
		line-height: 43px;
	}
}


/* =========================================================
   KLEINE HANDYS
   ========================================================= */

@media (max-width: 560px), (max-device-width: 560px) {

	.ml-page {
		padding:
			30px
			15px
			60px;
	}


	.ml-hero__title {
		font-size: clamp(45px, 14vw, 59px);
	}


	.ml-user {
		display: flex;
		flex-direction: column;
	}


	/* Bild bewusst zwischen Name und Details */

	.ml-user__identity {
		order: 1;

		padding:
			25px
			18px
			18px;
	}


	.ml-user__portrait-wrap {
		order: 2;

		padding:
			5px
			18px
			25px;
	}


	.ml-user__portrait-wrap::before,
	.ml-user__portrait-wrap::after {
		display: none;
	}


	.ml-user__portrait {
		width: 138px;
		height: 138px;
	}


	.ml-user__details {
		order: 3;

		align-items: flex-start;
		flex-direction: column;

		gap: 19px;

		padding:
			21px
			18px
			24px;
	}


	.ml-user__divider {
		width: 100%;
		height: 1px;
		min-height: 1px;

		background: var(--ml-divider);
	}


	.ml-user__activity-value {
		font-size: 52px;
	}


	.ml-user__player {
		font-size: 14px;
	}


	.ml-user__profile {
		font-size: 14px;
	}


	.ml-user__extras {
		justify-content: flex-start;

		width: 100%;

		font-size: 16px;

		text-align: left;
	}


	.ml-section-title {
		font-size: 34px;
	}


	.ml-field {
		padding:
			20px
			17px;
	}


	.ml-field__label {
		font-size: 14px;
	}


	.ml-field__hint,
	.ml-order label {
		font-size: 15px;
	}


	.ml-search__footer p {
		font-size: 16px;
	}


	.ml-page
	.select2-container
	.select2-choice {
		font-size: 17px;
	}
}