/* ─────────────────────────────────────────────────────────────────
   Whitelabel Modelagentur · pure typography & images
   Default: schwarz auf weiß. --accent setzt der Brand-Layer.
   ───────────────────────────────────────────────────────────────── */

:root {
	--bg: #ffffff;
	--bg-soft: #f3f1ee;
	--bg-cream: #faf9f7;
	--ink: #0a0a0a;
	--ink-2: #404040;
	--ink-3: #8a8a8a;
	--ink-4: #c8c6c2;
	--line: #e9e6e1;
	--line-2: #f0eeea;
	--accent: #0a0a0a;
	--maxw: 1760px;
	--pad-x: clamp(20px, 4.5vw, 64px);
	--gap: 8px;
	--t: 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}

* {
	box-sizing: border-box;
	min-width: 0;
}
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
body {
	font-family:
		"Inter Tight",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		system-ui,
		sans-serif;
	font-weight: 400;
	color: var(--ink);
	background: var(--bg);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.005em;
}
img {
	max-width: 100%;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	font: inherit;
}
::selection {
	background: var(--ink);
	color: var(--bg);
}

/* ─── Header (zweizeilig, kein Scroll) ──────────────────────── */
.head {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.head__top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 18px var(--pad-x) 14px;
}
.head__rail {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--ink-3);
	text-transform: uppercase;
}
.head__rail--end {
	justify-self: end;
}
.head__date {
	white-space: nowrap;
}
@media (max-width: 720px) {
	.head__date {
		display: none;
	}
}

.head__brand {
	justify-self: center;
	font-weight: 400;
	font-size: clamp(18px, 2vw, 22px);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	white-space: nowrap;
}
.head__user-name {
	color: var(--ink-2);
	text-transform: none;
	letter-spacing: 0;
	font-family: inherit;
	font-size: 13px;
}
@media (max-width: 720px) {
	.head__user-name {
		display: none;
	}
}
.head__avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--bg);
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	font-family: "Inter Tight", sans-serif;
}
.head__logout {
	background: transparent;
	border: 0;
	color: var(--ink-3);
	cursor: pointer;
	padding: 4px 0;
	font: inherit;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: color var(--t);
}
.head__logout:hover {
	color: var(--ink);
}
.inline {
	display: inline;
}

.head__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 28px;
	padding: 6px var(--pad-x) 16px;
	border-top: 1px solid var(--line-2);
}
.head__nav-link {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--ink-3);
	padding: 6px 0;
	position: relative;
	transition: color var(--t);
}
.head__nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--t);
}
.head__nav-link:hover {
	color: var(--ink);
}
.head__nav-link:hover::after {
	transform: scaleX(0.8);
}
.head__nav-link.is-active {
	color: var(--ink);
}
.head__nav-link.is-active::after {
	transform: scaleX(1);
	background: var(--accent);
}

/* ─── Footer ─────────────────────────────────────────────────── */
.foot {
	border-top: 1px solid var(--line);
	color: var(--ink-3);
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 32px var(--pad-x) 48px;
	margin-top: 120px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

/* ─── Page-Head (Übersicht) ──────────────────────────────────── */
.page-head {
	padding: clamp(56px, 9vw, 128px) var(--pad-x) clamp(32px, 4vw, 56px);
	max-width: var(--maxw);
	margin: 0 auto;
}
.page-head__kicker {
	display: block;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.24em;
	color: var(--ink-3);
	text-transform: uppercase;
	margin-bottom: 18px;
}
.page-head__title {
	font-weight: 200;
	font-size: clamp(56px, 11vw, 168px);
	letter-spacing: -0.045em;
	line-height: 0.86;
	margin: 0;
}
.page-head__bar {
	margin-top: clamp(28px, 4vw, 48px);
	padding-top: 18px;
	border-top: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.page-head__count {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* Suche – nur Underline */
.search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 240px;
	max-width: 100%;
}
.search input {
	border: 0;
	outline: 0;
	background: transparent;
	border-bottom: 1px solid var(--ink);
	padding: 6px 0;
	font: inherit;
	width: 100%;
	transition: border-color var(--t);
}
.search input::placeholder {
	color: var(--ink-3);
}
.search input:focus {
	border-color: var(--accent);
}
.search__clear {
	color: var(--ink-3);
	padding: 0 4px;
	font-size: 16px;
	line-height: 1;
}
.search__clear:hover {
	color: var(--ink);
}

/* ─── Grid ───────────────────────────────────────────────────── */
.grid {
	list-style: none;
	padding: 0 var(--pad-x);
	margin: 0 auto;
	max-width: var(--maxw);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 56px var(--gap);
}
@media (min-width: 720px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1100px) {
	.grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (min-width: 1500px) {
	.grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.card {
	display: block;
}
.card__link {
	display: block;
}
.card__img {
	aspect-ratio: 3 / 4;
	background: var(--bg-cream);
	overflow: hidden;
	margin-bottom: 16px;
}
.card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 1s cubic-bezier(0.2, 0.6, 0.2, 1),
		filter 0.35s;
	filter: grayscale(0.08);
}
.card__link:hover .card__img img {
	transform: scale(1.04);
	filter: grayscale(0);
}
.card__cap {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 0 2px;
}
.card__name {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.card__id {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	color: var(--ink-3);
	letter-spacing: 0.06em;
}

.empty {
	color: var(--ink-3);
	padding: 160px 24px;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-family: "JetBrains Mono", monospace;
}

/* ─── Filter-Bar / Chips / Drawer ────────────────────────────── */
.bar-actions {
	display: flex;
	align-items: center;
	gap: 24px;
}

.filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
	font: inherit;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	transition:
		color var(--t),
		border-color var(--t);
}
.filter-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.filter-btn__n {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	background: var(--accent);
	color: var(--bg);
	border-radius: 999px;
	padding: 1px 6px;
	letter-spacing: 0.04em;
}

.chips {
	list-style: none;
	padding: 16px 0 0;
	margin: 16px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	border-top: 1px dashed var(--line);
}
.chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	background: var(--bg-cream);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-2);
	transition:
		background var(--t),
		color var(--t);
}
.chips a span {
	color: var(--ink-3);
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
}
.chips a:hover {
	background: var(--ink);
	color: var(--bg);
}
.chips a:hover span {
	color: var(--bg);
}
.chips__reset a {
	background: transparent;
	color: var(--accent);
	font-family: "JetBrains Mono", monospace;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 10px;
}
.chips__reset a:hover {
	background: transparent;
	color: var(--ink);
}

/* Drawer (Off-Canvas rechts) */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 50;
}
.drawer[hidden] {
	display: none;
}
.drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.5);
	border: 0;
	cursor: pointer;
	animation: dr-fade 0.25s ease;
}
.drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 92vw);
	background: var(--bg);
	overflow-y: auto;
	animation: dr-slide 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
	display: flex;
	flex-direction: column;
    z-index: 100;
}
@keyframes dr-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes dr-slide {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 28px;
	border-bottom: 1px solid var(--ink);
	position: sticky;
	top: 0;
	background: var(--bg);
	z-index: 1;
}
.drawer__kicker {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.drawer__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	width: 32px;
	height: 32px;
	line-height: 1;
	font-size: 22px;
	color: var(--ink);
	transition: color var(--t);
}
.drawer__close:hover {
	color: var(--accent);
}

.drawer__form {
	padding: 8px 28px 32px;
	flex: 1;
}
.fset {
	border: 0;
	padding: 22px 0;
	margin: 0;
	border-bottom: 1px dashed var(--line);
}
.fset:last-of-type {
	border-bottom: 0;
}
.fset > legend {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding: 0;
	margin-bottom: 12px;
}
.fset select {
	width: 100%;
	padding: 10px 12px;
	background: var(--bg-cream);
	border: 0;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 50%,
		calc(100% - 13px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}
.fset select:focus {
	outline: 1px solid var(--ink);
	outline-offset: 2px;
}

.range {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.range label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-3);
}
.range input {
	background: var(--bg-cream);
	border: 0;
	padding: 10px 12px;
	font: inherit;
	font-size: 14px;
	font-family: "JetBrains Mono", monospace;
	color: var(--ink);
	-moz-appearance: textfield;
}
.range input:focus {
	outline: 1px solid var(--ink);
	outline-offset: 2px;
}

.opts {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.opts--wrap {
	gap: 6px;
}

.pill {
	position: relative;
	display: inline-block;
	cursor: pointer;
}
.pill input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.pill > span {
	display: inline-block;
	padding: 7px 12px;
	background: var(--bg-cream);
	font-size: 12px;
	color: var(--ink-2);
	transition:
		background var(--t),
		color var(--t);
}
.pill > span em {
	font-style: normal;
	color: var(--ink-3);
	margin-left: 4px;
	font-size: 10px;
}
.pill:hover > span {
	color: var(--ink);
}
.pill input:checked + span {
	background: var(--ink);
	color: var(--bg);
}
.pill input:checked + span em {
	color: rgba(255, 255, 255, 0.6);
}
.pill input:focus-visible + span {
	outline: 1px solid var(--accent);
	outline-offset: 2px;
}
.pill--sm > span {
	padding: 4px 9px;
	font-size: 11px;
}

.row {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 12px;
	align-items: center;
	padding: 6px 0;
}
.row__lbl {
	font-size: 12px;
	color: var(--ink-2);
}

.drawer__actions {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding-top: 24px;
	margin-top: 24px;
	border-top: 1px solid var(--ink);
	position: sticky;
	bottom: 0;
	background: var(--bg);
	padding-bottom: 8px;
}
.drawer__actions .btn {
	padding: 12px 20px;
	flex: 1;
	text-align: center;
	justify-content: center;
}
.drawer__actions .btn--ghost {
	background: transparent;
	border-top: 1px solid var(--ink-4);
	border-bottom: 1px solid var(--ink-4);
	color: var(--ink-2);
}
.drawer__actions .btn--ghost:hover {
	background: var(--bg-cream);
	color: var(--ink);
}

/* Pager */
.pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 56px;
	margin: 96px 0 24px;
	color: var(--ink-3);
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.pager a {
	color: var(--ink);
	position: relative;
	padding: 4px 0;
}
.pager a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0.4);
	transform-origin: left;
	transition: transform var(--t);
}
.pager a:hover::after {
	transform: scaleX(1);
	background: var(--accent);
}
.pager__off {
	opacity: 0.25;
}
.pager__pos {
	color: var(--ink);
}

/* ─── Profile ────────────────────────────────────────────────── */
.profile {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 32px var(--pad-x) 0;
}
.profile__topbar {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 32px;
}
.profile__back {
	color: var(--ink-3);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-family: "JetBrains Mono", monospace;
}
.profile__back:hover {
	color: var(--ink);
}
.profile__edit-link {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink-3);
	padding: 6px 14px;
	border: 1px solid var(--line);
	transition: color .3s, border-color .3s;
}
.profile__edit-link:hover { color: var(--ink); border-color: var(--ink); }

.profile__hero {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
	padding: 12px 0 120px;
	border-bottom: 1px solid var(--line);
}
@media (max-width: 980px) {
	.profile__hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

.profile__hero-img {
	aspect-ratio: 3 / 4;
	background: var(--bg-cream);
	overflow: hidden;
}
.profile__hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile__intro {
	padding-top: 0;
}
.profile__id {
	display: inline-block;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--ink-3);
	text-transform: uppercase;
	margin-bottom: 24px;
}
.profile__name {
	font-weight: 200;
	font-size: clamp(72px, 13vw, 196px);
	line-height: 0.85;
	letter-spacing: -0.06em;
	margin: 0 0 32px;
}
.profile__line {
	color: var(--ink-2);
	font-size: 13px;
	letter-spacing: 0.06em;
	margin: 0 0 14px;
	text-transform: lowercase;
}

.profile__sedcard {
	display: inline-flex;
	margin: 0 0 44px;
}

/* Sektionen in der Profil-Sidebar */
.sec {
	margin: 0 0 36px;
	padding-top: 24px;
	border-top: 1px solid var(--ink);
}
.sec:last-of-type {
	margin-bottom: 0;
}
.sec__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 18px;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--ink);
}
.sec__head span {
	color: var(--ink-3);
	font-size: 10px;
}
.sec__note {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--ink-2);
	line-height: 1.55;
}
.sec__note strong {
	font-family: "JetBrains Mono", monospace;
	font-weight: 400;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-3);
	margin-right: 4px;
}
.sec__note a {
	border-bottom: 1px solid currentColor;
}
div.sec__note p { margin: 0 0 0.6em; }
div.sec__note p:last-child { margin-bottom: 0; }
div.sec__note ul,
div.sec__note ol {
	margin: 0 0 0.6em;
	padding-left: 1.2em;
}

/* Tech-Sheet (Key-Value-Liste) */
.specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 48px;
	margin: 0;
	padding: 0;
	border: 0;
}
.specs > div {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	padding: 7px 0;
	border-bottom: 1px dotted var(--line);
}
.specs > div:last-child,
.specs > div:nth-last-child(2):nth-child(odd) {
	border-bottom: 0;
}
.specs dt {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--ink-3);
}
.specs dd {
	margin: 0;
	font-family: "JetBrains Mono", monospace;
	font-weight: 400;
	font-size: 13px;
	color: var(--ink);
}

/* Video-Embed (16:9) */
.video {
	margin-top: 16px;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}
.video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Internal Toggle */
.contact summary {
	cursor: pointer;
	list-style: none;
	color: var(--ink);
	margin: 0 0 18px;
}
.contact summary::-webkit-details-marker {
	display: none;
}
.contact[open] summary {
	color: var(--accent);
}
.contact summary::after {
	content: "+";
	float: right;
	color: var(--accent);
	font-family: "JetBrains Mono", monospace;
}
.contact[open] summary::after {
	content: "−";
}
.contact ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.contact li {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px dotted var(--line);
	font-size: 13px;
}
.contact li:last-child {
	border-bottom: 0;
}
.contact li > span {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-3);
	padding-top: 2px;
}
.contact li a {
	border-bottom: 1px solid currentColor;
}

/* Sets (Galerien) */
.set {
	padding: 120px 0 8px;
}
.set__head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 36px;
	font-weight: 200;
	font-size: clamp(32px, 5vw, 56px);
	letter-spacing: -0.025em;
}
.set__n {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: var(--ink-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.set__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}
@media (min-width: 720px) {
	.set__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1100px) {
	.set__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}
.set__item {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--bg-cream);
}
.set__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.set__item:hover img {
	transform: scale(1.04);
}

.notes {
	padding: 120px 0;
	max-width: 760px;
}
.notes h2 {
	font-weight: 200;
	font-size: 36px;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
}
.notes p {
	font-size: 15px;
	color: var(--ink-2);
}
.notes__body p { margin: 0 0 0.8em; }
.notes__body p:last-child { margin-bottom: 0; }
.notes__body ul,
.notes__body ol {
	font-size: 15px;
	color: var(--ink-2);
	margin: 0 0 0.8em;
	padding-left: 1.2em;
}
.notes__body li + li { margin-top: 0.2em; }
.notes__body a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.notes__body strong,
.notes__body b { color: var(--ink); font-weight: 500; }

/* ─── Login ──────────────────────────────────────────────────── */
body.page-login {
	background: var(--bg);
	min-height: 100vh;
	display: grid;
	place-items: center;
}
body.page-login .foot {
	display: none;
}
.login {
	width: 100%;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px;
}
.login__panel {
	width: 100%;
	max-width: 320px;
	text-align: left;
}
.login__brand {
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin-bottom: 80px;
	color: var(--ink-3);
}
.login__title {
	font-weight: 200;
	font-size: 64px;
	letter-spacing: -0.045em;
	line-height: 1;
	margin: 0 0 36px;
}
.login__alert {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	color: var(--accent);
	margin: 0 0 24px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 8px 0;
	border-top: 1px solid var(--accent);
	border-bottom: 1px solid var(--accent);
}
.login__form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.field span {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--ink-3);
}
.field input {
	background: transparent;
	color: var(--ink);
	border: 0;
	border-bottom: 1px solid var(--ink-4);
	padding: 10px 0;
	font-size: 16px;
	font-family: inherit;
	transition: border-color var(--t);
}
.field input:focus {
	outline: 0;
	border-color: var(--accent);
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	padding: 16px 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	border: 0;
	background: transparent;
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	color: var(--ink);
	margin-top: 16px;
	transition:
		background var(--t),
		color var(--t),
		letter-spacing var(--t);
}
.btn:hover {
	background: var(--ink);
	color: var(--bg);
	letter-spacing: 0.28em;
}
.login__foot {
	margin-top: 80px;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* ─── Shortlist-Button auf Karten ────────────────────────────── */
.card { position: relative; }
.card__fav { position: absolute; top: 8px; right: 8px; z-index: 2; }
.card__fav-btn {
	background: rgba(255,255,255,0.85); border: 0; cursor: pointer;
	width: 32px; height: 32px; border-radius: 50%;
	font-size: 16px; line-height: 1; color: var(--ink-3);
	backdrop-filter: blur(4px);
	transition: color var(--t), transform var(--t), background var(--t);
	opacity: 0; transform: scale(0.8);
}
.card:hover .card__fav-btn,
.card__fav-btn.is-on { opacity: 1; transform: scale(1); }
.card__fav-btn.is-on { color: #d32f2f; background: rgba(255,255,255,0.95); }
.card__fav-btn:hover { transform: scale(1.15); }

.card__remove { position: absolute; top: 8px; right: 8px; }
.card__remove button {
	background: rgba(0,0,0,0.6); border: 0; cursor: pointer;
	width: 28px; height: 28px; border-radius: 50%;
	color: #fff; font-size: 14px;
	transition: background var(--t);
}
.card__remove button:hover { background: #d32f2f; }

.head__shortlist-link {
	font-size: 18px; color: var(--ink-2);
	transition: color var(--t), transform var(--t);
	display: inline-block;
}
.head__shortlist-link:hover { color: #d32f2f; transform: scale(1.2); }

/* Share-Form + Result */
.share-form { display: inline-flex; gap: 12px; align-items: center; font-size: 13px; }
.share-form input { width: 60px; padding: 6px 8px; border: 1px solid var(--line); font: inherit; text-align: center; }
.share-result {
	margin-top: 16px; padding: 16px; background: var(--bg-cream);
	border: 1px dashed var(--line); font-size: 13px;
}
.share-url {
	width: 100%; padding: 10px; border: 1px solid var(--ink-4);
	font-family: 'JetBrains Mono', monospace; font-size: 13px;
	margin-top: 8px; background: var(--bg);
}

.head__admin-link {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink-3);
	transition: color var(--t);
}
.head__admin-link:hover { color: var(--ink); }

/* Admin-Navigation (Tabs) */
.adm-nav {
	max-width: 1100px; margin: 0 auto;
	padding: 24px var(--pad-x) 0;
	display: flex; gap: 28px;
	border-bottom: 1px solid var(--line);
}
.adm-nav__link {
	font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em;
	color: var(--ink-3); padding: 8px 0 12px;
	position: relative; transition: color var(--t);
}
.adm-nav__link::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
	height: 2px; background: var(--ink);
	transform: scaleX(0); transition: transform var(--t);
}
.adm-nav__link:hover { color: var(--ink); }
.adm-nav__link.is-active { color: var(--ink); }
.adm-nav__link.is-active::after { transform: scaleX(1); }

/* ─── Admin-Bereich ──────────────────────────────────────────── */
.adm { max-width: 1100px; margin: 0 auto; padding: 48px var(--pad-x); }
.adm__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	margin-bottom: 36px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--ink);
}
.adm__head h1 { font-weight: 200; font-size: 36px; letter-spacing: -0.02em; margin: 0; }
.adm__head h1 small { font-size: 14px; color: var(--ink-3); margin-left: 8px; }
.adm__back {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--ink-3);
}
.adm__back:hover { color: var(--ink); }
.adm__section h2 { font-weight: 200; font-size: 28px; letter-spacing: -0.02em; margin: 0 0 24px; }

/* Tabelle */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
	text-align: left; padding: 10px 12px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
	color: var(--ink-3); border-bottom: 1px solid var(--ink);
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tbl a { border-bottom: 1px solid currentColor; }
.tbl__off { opacity: 0.4; }
.tbl__actions { display: flex; gap: 12px; white-space: nowrap; }
.tbl__actions .link { background: none; border: 0; cursor: pointer; color: inherit; padding: 0; font-size: inherit; border-bottom: 1px solid currentColor; }

.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.04em; }
.dim { color: var(--ink-3); }
.badge {
	display: inline-block; padding: 2px 8px;
	font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
	background: var(--bg-cream); color: var(--ink-2);
}
.badge--agentur { background: var(--ink); color: var(--bg); }
.badge--extern { background: var(--accent); color: var(--bg); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot--on { background: #4caf50; }
.dot--off { background: var(--ink-4); }

/* Admin-Formulare */
.form-grid { display: flex; flex-direction: column; gap: 8px; }
.form-grid .fset {
	border: 0; padding: 24px 0; margin: 0;
	border-bottom: 1px dashed var(--line);
}
.form-grid .fset > legend {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--ink-3); padding: 0; margin-bottom: 16px;
}
.fg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fg3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 720px) { .fg2, .fg3 { grid-template-columns: 1fr; } }

.form-grid .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.form-grid .field span {
	font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-3);
}
.form-grid .field input,
.form-grid .field select,
.form-grid .field textarea {
	padding: 10px 12px; border: 1px solid var(--line);
	font: inherit; font-size: 14px; background: var(--bg);
	transition: border-color var(--t);
}
.form-grid .field input:focus,
.form-grid .field select:focus,
.form-grid .field textarea:focus { outline: 0; border-color: var(--ink); }

.form-actions { display: flex; gap: 16px; padding-top: 32px; }
.form-actions .btn { padding: 14px 24px; }
.btn--ghost {
	background: transparent; color: var(--ink-2);
	border-top: 1px solid var(--ink-4); border-bottom: 1px solid var(--ink-4);
}
.btn--ghost:hover { background: var(--bg-cream); color: var(--ink); }
.btn--danger {
	background: transparent; color: #d32f2f;
	border: 0; border-top: 1px solid #d32f2f; border-bottom: 1px solid #d32f2f;
	padding: 12px 20px;
}
.btn--danger:hover { background: #d32f2f; color: #fff; }

.alert { padding: 12px 16px; background: #ffebee; border-left: 3px solid #d32f2f; font-size: 13px; margin-bottom: 16px; }
.alert--ok { background: #e8f5e9; border-left-color: #4caf50; }

/* Upload-Form */
.upload-form { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; padding: 24px 0; border-bottom: 1px dashed var(--line); }
.upload-form .btn { align-self: end; }

/* Bild-Admin-Grid */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.img-card { position: relative; background: var(--bg-cream); overflow: hidden; }
.img-card img { aspect-ratio: 3/4; width: 100%; object-fit: cover; display: block; }
.img-card__meta {
	padding: 8px; display: flex; gap: 8px; align-items: center;
	font-size: 11px; color: var(--ink-3);
}
.img-card__del { position: absolute; top: 6px; right: 6px; }
.img-card__del button {
	background: rgba(0,0,0,0.65); border: 0; cursor: pointer;
	width: 24px; height: 24px; border-radius: 50%;
	color: #fff; font-size: 14px;
	opacity: 0; transition: opacity var(--t), background var(--t);
}
.img-card:hover .img-card__del button { opacity: 1; }
.img-card__del button:hover { background: #d32f2f; }

/* ─── Lightbox ───────────────────────────────────────────────── */
.lb {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(0,0,0,0.95);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; pointer-events: none;
	transition: opacity .25s;
}
.lb.is-open { opacity: 1; pointer-events: auto; }
.lb__stage {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	padding: 48px 80px;
	cursor: pointer;
}
.lb__img {
	max-width: 100%; max-height: 100%;
	object-fit: contain;
	transition: opacity .2s;
	cursor: default;
	user-select: none;
	-webkit-user-drag: none;
}
.lb__close {
	position: absolute; top: 16px; right: 20px; z-index: 2;
	background: transparent; border: 0; cursor: pointer;
	color: rgba(255,255,255,0.7); font-size: 32px; line-height: 1;
	transition: color .2s;
}
.lb__close:hover { color: #fff; }
.lb__prev, .lb__next {
	position: absolute; top: 50%; z-index: 2;
	transform: translateY(-50%);
	background: transparent; border: 0; cursor: pointer;
	color: rgba(255,255,255,0.5); font-size: 48px; line-height: 1;
	padding: 16px;
	transition: color .2s;
}
.lb__prev:hover, .lb__next:hover { color: #fff; }
.lb__prev { left: 12px; }
.lb__next { right: 12px; }
.lb__counter {
	position: absolute; bottom: 20px; left: 50%;
	transform: translateX(-50%);
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px; letter-spacing: 0.2em;
	color: rgba(255,255,255,0.5);
}

/* ─── Casting Self-Signup (öffentlich) ────────────────────────── */
.cast {
	min-height: calc(100vh - 60px - 80px);
	display: grid;
	place-items: center;
	padding: 64px 24px;
}
.cast__inner {
	width: 100%;
	max-width: 560px;
}
.cast__kicker {
	font: 400 11px/1 "JetBrains Mono", monospace;
	color: var(--accent, #e40614);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	margin: 0 0 22px;
}
.cast__title {
	font: 300 56px/1.04 "Fraunces", "Inter Tight", serif;
	letter-spacing: -0.035em;
	margin: 0 0 18px;
	color: var(--ink);
}
.cast__lead {
	font: 300 17px/1.5 "Inter Tight", sans-serif;
	color: var(--ink-2, #333);
	margin: 0 0 36px;
}
.cast__alert {
	background: #fff3f3;
	border-left: 3px solid var(--accent, #e40614);
	padding: 14px 18px;
	font-size: 14px;
	color: #6b1414;
	margin: 0 0 22px;
}
.cast__form { display: grid; gap: 22px; }
.cast__field { display: grid; gap: 6px; }
.cast__field > span {
	font: 400 11px/1 "JetBrains Mono", monospace;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-3, #888);
}
.cast__field input[type=text],
.cast__field input[type=tel],
.cast__field input[type=email] {
	font: 400 18px/1.4 "Inter Tight", sans-serif;
	border: 0;
	border-bottom: 1px solid var(--ink);
	padding: 10px 0 8px;
	background: transparent;
	color: var(--ink);
	border-radius: 0;
	-webkit-appearance: none;
}
.cast__field input:focus {
	outline: none;
	border-bottom-color: var(--accent, #e40614);
}
.cast__field--file input[type=file] {
	font: 300 14px/1.4 "Inter Tight", sans-serif;
	padding: 6px 0;
}
.cast__field small {
	font-size: 12px;
	color: var(--ink-3, #888);
	line-height: 1.5;
}
.cast__submit {
	margin-top: 10px;
	background: var(--ink);
	color: #fff;
	border: 0;
	padding: 18px 22px;
	font: 500 13px/1 "Inter Tight", sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s;
}
.cast__submit:hover { background: var(--accent, #e40614); }
.cast__hint {
	font-size: 12px;
	color: var(--ink-3, #888);
	line-height: 1.6;
	margin-top: 6px;
}
.cast__details {
	margin: 18px 0;
	font-size: 14px;
	color: var(--ink-2, #333);
}
.cast__details summary {
	cursor: pointer;
	color: var(--ink);
	font-weight: 500;
	padding: 6px 0;
}
.cast--ok .cast__title,
.cast--invalid .cast__title { color: var(--ink); }
.cast--invalid .cast__kicker { color: var(--ink-3, #888); }

/* ─── Admin: Tabs (Talente/Casting-Pending) ───────────────────── */
.adm-tabs {
	display: flex;
	gap: 32px;
	margin: -16px 0 24px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--line);
}
.adm-tabs__link {
	font: 500 12px/1 "Inter Tight", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--ink-3);
	padding: 8px 0 12px;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color var(--t);
}
.adm-tabs__link::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
	height: 2px; background: var(--ink);
	transform: scaleX(0); transition: transform var(--t);
}
.adm-tabs__link:hover { color: var(--ink); }
.adm-tabs__link.is-active { color: var(--ink); }
.adm-tabs__link.is-active::after { transform: scaleX(1); }

/* Badges + Tags */
.badge {
	display: inline-flex; align-items: center;
	font: 500 10px/1 "JetBrains Mono", monospace;
	letter-spacing: 0.1em; text-transform: uppercase;
	padding: 4px 8px; border-radius: 99px;
	background: var(--bg-cream); color: var(--ink-2);
}
.badge--warn { background: #fff3e0; color: #8c4a00; }

.tag {
	font: 400 10px/1 "JetBrains Mono", monospace;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ink-3);
}
.tag--casting { color: var(--accent); font-weight: 500; }
.tag--migration { color: var(--ink-3); }
.tag--self_service { color: var(--ink-2); }

.tbl__pending { background: rgba(255, 244, 217, 0.4); }
.tbl__pending td { font-weight: 500; }

/* ─── Source-Box (Talent-Edit · Anmeldungsquelle) ───────────── */
.source-box {
	max-width: 1100px; margin: 0 auto 24px; padding: 0 var(--pad-x);
}
.source-box {
	background: var(--bg-cream); border-left: 3px solid var(--accent);
	padding: 16px 20px; margin-bottom: 28px;
	display: grid; gap: 6px;
}
.source-box__label {
	font: 500 10px/1 "JetBrains Mono", monospace;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--ink-3);
}
.source-box__title {
	font: 400 16px/1.3 "Inter Tight", sans-serif;
	color: var(--ink);
}
.source-box__title small { color: var(--ink-3); font-weight: 300; }
.source-box__title a { border-bottom: 1px solid currentColor; }
.source-box__meta {
	font: 400 11px/1.4 "JetBrains Mono", monospace;
	color: var(--ink-3); letter-spacing: 0.04em;
}
.source-box__pending {
	display: flex; align-items: center; gap: 14px;
	margin-top: 8px;
}
.btn--small {
	padding: 8px 12px; font-size: 10px;
	border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
	cursor: pointer; letter-spacing: 0.18em; text-transform: uppercase;
	transition: background var(--t);
}
.btn--small:hover { background: var(--accent); border-color: var(--accent); }