/* ============================================================
   PAGE — Anmelden (Sign Up)  (Figma node 0:1642, design width 1920)
   One two-column module (Frame 0:1690, 1589w, gap 100, vertically
   centred): LEFT = "Students Testimonials" (heading + intro + one
   testimonial card with avatar/name/Read-More + a prev/next carousel)
   — structurally identical to the Login page's left column; RIGHT = a
   white Sign Up form card (full name, email, password w/ eye-toggle, an
   "I agree with Terms of Use and Privacy Policy" checkbox whose two
   policy names are inline underlined links, Sign Up, OR divider, Sign-
   Up-with-Google, "Already have an account? Login" link). All values come
   from docs/anmelden/figma-audit.json (section 0:1690) via
   docs/anmelden/blueprint-module.txt.
   Prefix: .anmelden-  ·  new tokens in docs/anmelden/token-delta.txt
   (--color-or-text #98989A, --color-divider #E4E4E7, --radius-xs 4px,
   --radius-input 10px) — each used with a literal fallback so this file
   stands alone until Wave B merges them into style.css :root. The SAME
   four tokens the Login page needs — Wave B de-duplicates.
   Inter (used only for "OR") is a webfont this page shares with Login;
   the static preview loads it via <link>. NOTE: the bottom
   "Already have an account? Login" line is Be Vietnam Pro (per-character
   style overrides on 0:1752 override the node's Inter default) — only
   "OR" is Inter on this page.

   REUSE (nothing here redefines a shared class):
   - :root tokens + fonts from style.css; grey-field technique + the
     card/input/#FCFCFD/#F1F1F3 visual language match the siblings.
   - Header / Footer are shared chrome (verbatim).
   ============================================================ */

/* The module sits on the light-grey field (#F7F7F8) between the white
   shared header and white shared footer — same :has() scoping the
   siblings use, so only this page's stack is affected. */
.site-main:has(.anmelden-auth) {
	background: var(--color-surface); /* #F7F7F8 */
}

/* Shared footer carries a top-margin from the home rhythm; cancel it here
   so the module's own 150px bottom margin is the exact block→footer gap. */
.site-main:has(.anmelden-auth) + .site-footer {
	margin-top: 0;
}

/* ---------- Module wrapper (0:1690) ----------
   header-bottom(119) → module-top(274) = 155px (same header→first-section
   gap as the home hero). module-bottom(1271) → footer-top(1421) = 150px.
   Inner row is 1589 wide (side gutters at 1920), centred; the two columns
   are vertically centred (align-items:center) — the 593-tall left column
   sits centred against the 997-tall sign-up card. */
.anmelden-auth {
	width: 100%;
	margin-top: 155px;
	margin-bottom: 150px;
}

.anmelden-auth__inner {
	width: calc(100% - 48px);
	max-width: 1589px;
	margin-inline: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 100px;
}

/* ============================================================
   LEFT COLUMN — Students Testimonials  (Sub Container 0:1691)
   FILL width, VERTICAL, gap 80. Children are full-width.
   ============================================================ */
.anmelden-testimonials {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/* Text Container 0:1692 (V gap 6) */
.anmelden-testimonials__intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.anmelden-testimonials__title {
	font-family: var(--font-body);
	font-size: 38px;
	line-height: 57px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
}

.anmelden-testimonials__text {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text-muted); /* #59595A */
}

/* Container 0:1695 (V gap 30) — card + carousel nav */
.anmelden-testimonials__carousel {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* ----- Testimonial card 0:1696 (FILL, #FFF, 1px #F1F1F3, cr12, clipped) ----- */
.anmelden-testimonial {
	width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--color-white); /* #FFFFFF */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border-radius: var(--radius-lg); /* 12px */
	overflow: hidden;
}

/* Quote row 0:1697 (H, pad 50, gap 10) */
.anmelden-testimonial__quote-row {
	display: flex;
	flex-direction: row;
	gap: 10px;
	padding: 50px;
}

.anmelden-testimonial__quote {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text); /* #4C4C4D */
}

/* Line 0:1699 — full-width 1px divider (#F1F1F3) */
.anmelden-testimonial__divider {
	width: 100%;
	height: 1px;
	background: var(--color-border); /* #F1F1F3 */
}

/* Author bar 0:1700 (H, pad 30/50, align center, #FCFCFD) */
.anmelden-testimonial__author {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 30px 50px;
	background: var(--color-card); /* #FCFCFD */
}

/* Sub Container 0:1701 (FILL, H gap 15, align center) — pushes button right */
.anmelden-testimonial__author-info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.anmelden-testimonial__avatar {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-md); /* 8px */
	object-fit: cover;
}

.anmelden-testimonial__name {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 600;
	color: var(--color-text-dark); /* #333333 */
}

/* Read More button 0:1704 (HUG, pad 18/24, gap 8, #F7F7F8, 1px #F1F1F3, cr8) */
.anmelden-testimonial__more {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 24px;
	background: var(--color-surface); /* #F7F7F8 */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-md); /* 8px */
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
	white-space: nowrap;
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.anmelden-testimonial__more:hover {
	opacity: 0.85;
}

/* Carousel nav 0:1706 (FILL, H, justify flex-end, gap 15) */
.anmelden-testimonial__nav {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
}

/* Arrow buttons 0:1707 / 0:1710 (62x62, #FFF, 1px #F1F1F3, cr8, pad 14) */
.anmelden-testimonial__arrow {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	padding: 14px;
	background: var(--color-white); /* #FFFFFF */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-md); /* 8px */
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.anmelden-testimonial__arrow:hover {
	opacity: 0.85;
}

.anmelden-testimonial__arrow img {
	display: block;
	width: 34px;
	height: 34px;
}

/* ============================================================
   RIGHT COLUMN — Sign Up form card  (Sign Up 0:1713)
   FIXED 660, VERTICAL, pad 50, gap 50, #FFF, cr12. Inner 560.
   ============================================================ */
.anmelden-card {
	flex: none;
	width: 660px;
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding: 50px;
	background: var(--color-white); /* #FFFFFF */
	border-radius: var(--radius-lg); /* 12px */
}

/* Text Container 0:1714 (V gap 12, centred) */
.anmelden-card__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}

.anmelden-card__title {
	font-family: var(--font-body);
	font-size: 48px;
	line-height: 60.72px;
	font-weight: 600;
	color: var(--color-heading); /* #262626 */
}

.anmelden-card__subtitle {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 22.77px;
	font-weight: 400;
	color: var(--color-text); /* #4C4C4D */
}

/* Form 0:1717 (V gap 30) */
.anmelden-form {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Container 0:1718 (V gap 24) — field stack + Sign Up button */
.anmelden-form__fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Name / Email / Password field 0:1719 / 0:1723 / 0:1727 (V gap 14) */
.anmelden-field {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.anmelden-field__label {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
}

/* Input face 0:1721 / 0:1725 (h75, #FCFCFD, 1px #F1F1F3, cr10, pad 24) */
.anmelden-input {
	box-sizing: border-box;
	width: 100%;
	height: 75px;
	padding: 0 24px;
	background: var(--color-card); /* #FCFCFD */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-input, 10px);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-heading); /* #262626 (typed value) */
}

.anmelden-input::placeholder {
	color: var(--color-text-light); /* #656567 */
	opacity: 1;
}

.anmelden-input:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--color-text-light);
}

/* Password face 0:1729 — same face, holds a bare input + eye toggle (gap 10) */
.anmelden-input-wrap {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 75px;
	padding: 0 24px;
	background: var(--color-card); /* #FCFCFD */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border-radius: var(--radius-input, 10px);
}

.anmelden-input-wrap:focus-within {
	box-shadow: inset 0 0 0 1px var(--color-text-light);
}

/* the bare <input> inside the wrap — drops the face styling, keeps type */
.anmelden-input--bare {
	flex: 1 1 0;
	min-width: 0;
	height: auto;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.anmelden-input--bare:focus {
	box-shadow: none;
}

/* Eye toggle 0:1731 (24x24, #4C4C4D icon) */
.anmelden-eye {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.anmelden-eye img {
	display: block;
	width: 24px;
	height: 24px;
}

/* Terms row 0:1733 (H gap 10, align center) — checkbox + agreement text */
.anmelden-terms {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

/* Checkbox 0:1734 (30x30, #F7F7F8, 1px #F1F1F3, cr4, UNCHECKED) */
.anmelden-terms__box {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 30px;
	height: 30px;
	margin: 0;
	background: var(--color-surface); /* #F7F7F8 */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-xs, 4px);
	cursor: pointer;
}

.anmelden-terms__box:checked {
	background: var(--color-primary); /* #FF9500 (functional; design ships unchecked) */
}

/* Agreement text 0:1737 (BVP 400 18/27, #59595A) — "Terms of Use" +
   "Privacy Policy" are inline underlined links (style overrides 3). */
.anmelden-terms__text {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text-muted); /* #59595A */
	cursor: pointer;
}

.anmelden-terms__link {
	color: inherit;
	text-decoration: underline;
}

/* Sign Up button 0:1738 (FILL, #FF9500, cr10, pad 18/20 -> h63) */
.anmelden-submit {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 20px;
	background: var(--color-primary); /* #FF9500 */
	border: 0;
	border-radius: var(--radius-input, 10px);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-white); /* #FFFFFF */
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.anmelden-submit:hover {
	opacity: 0.9;
}

/* OR divider 0:1740 (H gap 12, center) */
.anmelden-or {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.anmelden-or__line {
	flex: 1 1 0;
	height: 1px;
	background: var(--color-divider, #E4E4E7);
}

.anmelden-or__text {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-or-text, #98989A);
}

/* Google button 0:1744 (FILL, #F7F7F8, 1px #F1F1F3, cr10, pad 20/24, gap 14 -> h70) */
.anmelden-google {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px 24px;
	background: var(--color-surface); /* #F7F7F8 */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-input, 10px);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.anmelden-google:hover {
	opacity: 0.9;
}

.anmelden-google img {
	display: block;
	width: 30px;
	height: 30px;
}

/* Login link 0:1751 (H center gap 6) — Be Vietnam Pro (per-char overrides
   on 0:1752 override the node's Inter default), NOT Inter. */
.anmelden-login {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.anmelden-login__text {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-heading); /* #262626 */
}

/* "Login" segment — Medium 500, underlined (0:1752 style override 30) */
.anmelden-login__cta {
	font-weight: 500;
	text-decoration: underline;
}

.anmelden-login__arrow {
	display: block;
	width: 24px;
	height: 24px;
}

/* ============================================================
   RESPONSIVE — page-scoped `.anmelden-` rules only. Breakpoints mirror
   the sibling pages (1024 first shift, 768/480 proportional). Shared
   chrome (nav -> hamburger, footer stacking) is handled by main.css at
   the same breakpoints — nothing here touches it. No Figma frame exists
   below 1920, so narrow values are derived (same scale as siblings).
   The 1920 -> ~1024 desktop zone already flexes: the left column is FILL
   and the inner row is width calc(100% - 48px), so no @media is needed
   until the FIXED 660 card + testimonials no longer share a row.
   ============================================================ */

/* ---------- TABLET  max-width: 1200px ---------- */
@media (max-width: 1200px) {
	/* The FIXED 660 sign-up card + the FILL testimonials column stop
	   fitting side by side once the viewport drops below ~1194px: the
	   compressed left column can no longer hold the author row (avatar +
	   name + Read More) without the name colliding with the button.
	   Stack the two columns and centre each at its natural 660 width so
	   the form inputs never stretch to an unreadable width. */
	.anmelden-auth__inner {
		flex-direction: column;
		align-items: center;
		gap: 60px;
	}

	.anmelden-testimonials {
		flex: none;
		width: 100%;
		max-width: 660px;
	}

	.anmelden-card {
		flex: none;
		width: 100%;
		max-width: 660px;
	}
}

/* ---------- MOBILE  max-width: 768px ---------- */
@media (max-width: 768px) {
	/* Tighten the section-to-section rhythm for phone height. */
	.anmelden-auth {
		margin-top: 100px;
		margin-bottom: 100px;
	}

	/* Shrink the 50px card padding + 50px inner gap for narrow width. */
	.anmelden-card {
		padding: 40px;
		gap: 40px;
	}

	/* Proportional type scale-down (no Figma mobile frame). */
	.anmelden-card__title {
		font-size: 38px;
		line-height: 48px;
	}

	.anmelden-testimonials {
		gap: 60px;
	}

	.anmelden-testimonials__title {
		font-size: 30px;
		line-height: 44px;
	}

	/* Card quote/author padding eases in from 50 -> 30. */
	.anmelden-testimonial__quote-row {
		padding: 30px;
	}

	.anmelden-testimonial__author {
		padding: 24px 30px;
	}
}

/* ---------- SMALL MOBILE  max-width: 480px ---------- */
@media (max-width: 480px) {
	.anmelden-auth {
		margin-top: 80px;
		margin-bottom: 80px;
	}

	.anmelden-card {
		padding: 24px;
		gap: 32px;
	}

	.anmelden-card__title {
		font-size: 32px;
		line-height: 40px;
	}

	.anmelden-input,
	.anmelden-input-wrap {
		height: 64px;
		padding-inline: 18px;
	}

	/* Author bar: the avatar + name + Read More get tight — stack the
	   Read More button below the avatar/name row so nothing gets squeezed. */
	.anmelden-testimonial__author {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.anmelden-testimonial__author-info {
		flex: 0 1 auto;
		width: 100%;
	}

	.anmelden-testimonial__quote-row {
		padding: 24px;
	}
}