/* Klara Survey — homepage layout.
   Variables live in base.css. */

main {
	width: min(var(--page-max), 100%);
	margin: 0 auto;
	padding: clamp(1rem, 3vw, 2rem) var(--page-gutter) 4rem;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
	width: min(var(--page-max), 100%);
	margin: 0 auto;
	padding: max(var(--page-gutter-compact), var(--safe-area-top)) var(--page-gutter) 1.25rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.brand {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* .eyebrow ist in base.css zentral definiert (wird von ALLEN Seiten
   geladen). Vorher wurde sie hier mit anderen Werten überschrieben,
   was Eyebrows zwischen Homepage (lädt home.css) und Impressum
   (lädt home.css NICHT) unterschiedlich aussehen ließ. */

.page-title {
	margin: 0;
	font-size: clamp(1.5rem, 3.2vw, 2.4rem);
	letter-spacing: -0.025em;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
	position: relative;
	margin-bottom: clamp(2rem, 5vw, 3rem);
	padding: clamp(2rem, 6vw, 4rem) clamp(1.75rem, 4vw, 3rem);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(circle at 88% 14%, var(--accent-glow), transparent 55%),
		var(--bg-elevated);
	/* Stronger shadow stack so the hero clearly "lifts" off the page
	   bg even in the dark theme (where #000 body bg makes the original
	   subtle shadow invisible). */
	box-shadow:
		0 1px 0 0 color-mix(in srgb, var(--text) 4%, transparent),
		0 12px 32px -8px rgba(0, 0, 0, 0.35),
		0 4px 12px -4px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

[data-theme='dark'] .hero {
	background:
		radial-gradient(circle at 88% 14%, var(--accent-glow), transparent 55%),
		var(--bg-elevated);
	border-color: var(--border-strong, var(--border));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--accent-strong) 18%, transparent),
		0 16px 40px -10px rgba(0, 0, 0, 0.7),
		0 4px 14px -4px rgba(0, 0, 0, 0.5);
}

.hero-copy {
	max-width: 680px;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.hero .eyebrow {
	color: var(--accent);
}

.hero-title {
	margin: 0;
	font-size: clamp(1.6rem, 4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.hero-subtitle {
	margin: 0.25rem 0 0;
	max-width: 56ch;
	color: var(--text-muted);
	font-size: clamp(0.95rem, 1.4vw, 1.05rem);
	line-height: 1.55;
}

.trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.trust-badges li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	color: var(--text);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.trust-badges svg {
	width: 1rem;
	height: 1rem;
	min-width: 1rem;
	max-width: 1rem;
	min-height: 1rem;
	max-height: 1rem;
	color: var(--accent-strong);
	flex-shrink: 0;
	display: inline-block;
	vertical-align: middle;
}

/* ============================================================
   Trust block — Über mich
   ============================================================ */
.about-section,
.data-flow-section,
.results-section,
.faq-section {
	/* Tightened from clamp(2,4.5vw,3) — the gap between the surveys
	   list (which is short when only one is active) and "Über die
	   Studienleitung" was looking unused. */
	margin-top: clamp(1.5rem, 3.5vw, 2.4rem);
	/* Centered block: heading is centered, content cards are centered as
	   blocks, but paragraph text inside cards stays left-aligned for
	   readability. */
	text-align: center;
}

.about-section .section-heading,
.data-flow-section .section-heading,
.results-section .section-heading,
.faq-section .section-heading {
	justify-content: center;
	text-align: center;
}

.about-section .section-heading > div,
.data-flow-section .section-heading > div,
.results-section .section-heading > div,
.faq-section .section-heading > div {
	align-items: center;
}

.about-card {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
	max-width: 720px;
	margin: 0 auto;
	color: var(--text);
	line-height: 1.6;
	text-align: left;
}

.about-card a {
	color: var(--accent);
}

.about-card em {
	color: var(--text-muted);
	font-style: italic;
}

/* ============================================================
   Data flow — was passiert mit den Antworten
   ============================================================ */
.data-flow-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: grid;
	gap: 0.85rem;
	max-width: 760px;
	text-align: left;
}

.data-flow-list > li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
	padding: 1rem 1.1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
}

.data-flow-step {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent-deep);
	font-weight: 700;
	font-size: 0.95rem;
	flex-shrink: 0;
}

.data-flow-list h4 {
	margin: 0 0 0.3rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
}

.data-flow-list p {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.92rem;
	line-height: 1.55;
}

.data-flow-list a {
	color: var(--accent);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
	display: grid;
	gap: 0.6rem;
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
}

.faq-item {
	padding: 0.95rem 1.1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
	/* Force a local stacking + paint context so the <details> close paint
	   never lets the page bg (pure #000 in dark theme) bleed through during
	   reflow. Was causing a brief "black flash" on close in Chromium. */
	contain: layout paint;
	isolation: isolate;
}

.faq-item[open] {
	border-color: var(--border-strong);
}

.faq-item summary {
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-right: 0.25rem;
	/* Prevent text selection on rapid open/close taps (mobile). */
	-webkit-user-select: none;
	user-select: none;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: '+';
	font-size: 1.3rem;
	color: var(--text-muted);
	line-height: 1;
}

.faq-item[open] summary::after {
	content: '−';
	color: var(--accent);
}

.faq-item p {
	margin: 0.6rem 0 0;
	color: var(--text-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

.faq-item a {
	color: var(--accent);
}

@media (max-width: 720px) {
	.trust-badges li {
		font-size: 0.8rem;
		padding: 0.3rem 0.65rem;
	}
	.data-flow-list > li {
		grid-template-columns: auto 1fr;
		padding: 0.85rem 0.9rem;
		gap: 0.75rem;
	}
	.about-card {
		padding: 1.1rem 1.1rem;
	}
	.survey-card-badges {
		gap: 0.3rem;
	}
	.survey-card-badge {
		font-size: 0.74rem;
		padding: 0.22rem 0.55rem;
	}
	.survey-card-warning {
		font-size: 0.78rem;
		padding: 0.5rem 0.6rem;
	}
	/* On mobile, FAQ summary marker stays visible while text wraps. */
	.faq-item summary {
		gap: 0.6rem;
	}
}

@media (max-width: 480px) {
	.surveys-grid {
		grid-template-columns: 1fr;
	}
	.surveys-grid .survey-card {
		padding: 1rem;
		min-height: 0;
	}
}

/* ============================================================
   Section heading
   ============================================================ */
/* .section-heading + .section-heading h3 sind in base.css zentral
   definiert. */

/* ============================================================
   Survey grid + cards
   ============================================================ */
.surveys-grid {
	display: grid;
	/* 3 columns on laptop+, 2 on tablet, 1 on mobile. Using fixed-fr
	   columns instead of auto-fit so we don't dynamically rebalance
	   into 4 cols on huge monitors (the user wants a consistent 3). */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	align-content: start;
}

@media (max-width: 980px) {
	.surveys-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 620px) {
	.surveys-grid {
		grid-template-columns: 1fr;
	}
}

/* Reserve space only while skeleton placeholders are showing — once
   the real cards render (or fallback message), collapse naturally. */
.surveys-grid.is-loading {
	min-height: 220px;
}

/* Once cards have rendered (is-loading removed), allow the grid to be
   compact even on the homepage. */
.surveys-grid:not(.is-loading) {
	min-height: 0;
}

.surveys-grid .survey-card {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	min-height: 180px;
	padding: 1.25rem;
}

.surveys-fallback {
	grid-column: 1 / -1;
	color: var(--text-muted);
	margin: 0;
	padding: 1rem 0;
	font-size: 0.95rem;
}

/* Cold-start hint shown when the backend takes >5s (Render free tier
   wakes from sleep on first request). Sits below the skeleton so the
   skeleton itself doesn't shift. */
.surveys-cold-start-hint {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.85rem 0 0;
	padding: 0.7rem 0.9rem;
	border-radius: var(--radius-md);
	border: 1px solid color-mix(in srgb, var(--accent, currentColor) 25%, var(--border));
	background: color-mix(in srgb, var(--accent-glow, var(--bg-muted)) 35%, var(--bg-elevated));
	color: var(--text);
	font-size: 0.88rem;
	line-height: 1.4;
}

.surveys-cold-start-hint svg {
	flex-shrink: 0;
	color: var(--accent);
	animation: cold-start-pulse 1.4s ease-in-out infinite;
}

@keyframes cold-start-pulse {
	0%, 100% { opacity: 0.45; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.surveys-cold-start-hint svg {
		animation: none;
		opacity: 0.85;
	}
}

.survey-card h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.3em * 2);
}

.survey-date {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	min-height: 1.2em;
}

/* ---- Card metadata badges (duration, content warning, …) ---- */
.survey-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.15rem 0 0.1rem;
}

.survey-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg-muted, var(--bg-elevated));
	color: var(--text-muted);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.1;
	max-width: 100%;
}

.survey-card-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.9rem;
	height: 0.9rem;
	flex-shrink: 0;
	color: var(--accent-strong, var(--accent));
}

.survey-card-badge-icon svg {
	width: 100%;
	height: 100%;
}

.survey-card-badge--warning {
	color: var(--warning, #b45309);
	border-color: color-mix(in srgb, var(--warning, #b45309) 35%, var(--border));
	background: color-mix(in srgb, var(--warning, #b45309) 10%, var(--bg-elevated));
}

.survey-card-badge--warning .survey-card-badge-icon {
	color: var(--warning, #b45309);
}

/* ---- Duration tone variants ----
   Short surveys read "easy" (green), medium read "moderate" (amber),
   long read "more involved" (red). Mirrors road-sign conventions so the
   colour is immediately legible without a legend.
   `color-mix` is supported in all current evergreen browsers; the bare
   colour is the fallback declaration if the engine doesn't grok it. */
.survey-card-badge--good {
	color: var(--success, #15803d);
	border-color: var(--success, #15803d);
	border-color: color-mix(in srgb, var(--success, #15803d) 40%, var(--border));
	background: var(--bg-elevated);
	background: color-mix(in srgb, var(--success, #15803d) 12%, var(--bg-elevated));
}
.survey-card-badge--good .survey-card-badge-icon { color: var(--success, #15803d); }

.survey-card-badge--warn {
	color: var(--warning, #b45309);
	border-color: var(--warning, #b45309);
	border-color: color-mix(in srgb, var(--warning, #b45309) 40%, var(--border));
	background: var(--bg-elevated);
	background: color-mix(in srgb, var(--warning, #b45309) 12%, var(--bg-elevated));
}
.survey-card-badge--warn .survey-card-badge-icon { color: var(--warning, #b45309); }

.survey-card-badge--bad {
	color: var(--error, #b91c1c);
	border-color: var(--error, #b91c1c);
	border-color: color-mix(in srgb, var(--error, #b91c1c) 40%, var(--border));
	background: var(--bg-elevated);
	background: color-mix(in srgb, var(--error, #b91c1c) 12%, var(--bg-elevated));
}
.survey-card-badge--bad .survey-card-badge-icon { color: var(--error, #b91c1c); }

/* ---- Trigger-warning callout (own row, bigger) ---- */
.survey-card-warning {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 0.55rem 0.7rem;
	border-radius: var(--radius-md);
	border: 1px solid color-mix(in srgb, var(--warning, #b45309) 40%, var(--border));
	background: color-mix(in srgb, var(--warning, #b45309) 9%, var(--bg-elevated));
	color: var(--text);
	font-size: 0.82rem;
	line-height: 1.4;
	margin: 0.1rem 0 0.15rem;
}

.survey-card-warning-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--warning, #b45309);
	margin-top: 0.15rem;
}

.survey-card-warning-icon svg {
	width: 100%;
	height: 100%;
}

.survey-card-warning-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.survey-card-warning-text strong {
	font-weight: 700;
	color: var(--warning, #b45309);
	letter-spacing: 0.01em;
	font-size: 0.78rem;
	text-transform: uppercase;
}

/* survey-link-btn inherits the .btn / .btn-primary look 1:1 from style.css.
   Only positional and disabled-state overrides remain here. */
.survey-link-btn {
	margin-top: auto;
	align-self: flex-start;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.survey-link-btn-arrow {
	flex-shrink: 0;
	transition: transform 160ms ease;
	opacity: 0.85;
}

.survey-link-btn:hover .survey-link-btn-arrow,
.survey-link-btn:focus-visible .survey-link-btn-arrow {
	transform: translateX(3px);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.survey-link-btn-arrow { transition: none; }
}

/* No hover-lift or shadow change — keep it visually quiet. */
.survey-link-btn:hover,
.survey-link-btn:focus-visible {
	transform: none;
	border-color: var(--border);
	box-shadow: var(--shadow);
}

.survey-link-btn:active {
	transform: none;
	box-shadow: var(--shadow);
}

.survey-link-btn.is-disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

/* "Teilnahme bestätigt" button — positive confirmation state, NOT a
   greyed-out disabled state. Green tinted to mirror the duration-good
   badge so participants see "thanks, you've done it" instead of "this
   is broken". Sized identical to the primary CTA so the card height
   doesn't jump. */
.survey-link-btn--done {
	cursor: default;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--success, #15803d);
	border: 1px solid color-mix(in srgb, var(--success, #15803d) 45%, var(--border));
	background: color-mix(in srgb, var(--success, #15803d) 12%, var(--bg-elevated));
	box-shadow: none;
	font-weight: 600;
}

.survey-link-btn--done:hover,
.survey-link-btn--done:focus-visible,
.survey-link-btn--done:active {
	transform: none;
	color: var(--success, #15803d);
	border-color: color-mix(in srgb, var(--success, #15803d) 45%, var(--border));
	background: color-mix(in srgb, var(--success, #15803d) 12%, var(--bg-elevated));
	box-shadow: none;
}

.survey-link-btn-check {
	flex-shrink: 0;
	color: var(--success, #15803d);
}

.survey-card.is-disabled {
	/* Keep the card readable — don't grey it out — but show subtle
	   visual de-emphasis. The "Teilnahme bestätigt" button carries
	   the real state communication. */
	opacity: 0.92;
	pointer-events: auto;
}

.survey-card.is-disabled h3,
.survey-card.is-disabled .survey-date,
.survey-card.is-disabled .survey-card-badges,
.survey-card.is-disabled .survey-card-warning {
	opacity: 0.7;
}

/* ---- Skeleton loaders ---- */
.survey-card.is-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--bg-elevated);
}

.survey-card.is-skeleton .skeleton-line,
.survey-card.is-skeleton .skeleton-button {
	border-radius: 999px;
	background: var(--bg-muted);
}

.survey-card.is-skeleton .skeleton-title {
	width: 78%;
	height: 1.1rem;
}

.survey-card.is-skeleton .skeleton-date {
	width: 55%;
	height: 0.85rem;
}

.survey-card.is-skeleton .skeleton-button {
	width: 60%;
	height: 2.25rem;
	margin-top: auto;
	border-radius: var(--radius-sm);
}

.survey-card.is-skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
	animation: shimmer 1.6s ease-in-out infinite;
}

[data-theme='light'] .survey-card.is-skeleton::after,
[data-theme='pink'] .survey-card.is-skeleton::after {
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

@keyframes shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.survey-card.is-skeleton::after { animation: none; }
}

.error {
	color: var(--error);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	width: min(var(--page-max), 100%);
	margin: 0 auto;
	padding: 2.5rem var(--page-gutter) 2rem;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	color: var(--text-muted);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
}

.site-footer a {
	color: var(--text-muted);
}

.site-footer a:hover {
	color: var(--accent);
}

.admin-link {
	font-size: 0.65rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-dim);
	opacity: 0.55;
	transition: opacity var(--transition-fast), color var(--transition-fast);
}

.admin-link:hover,
.admin-link:focus-visible {
	opacity: 1;
	color: var(--accent);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
	.site-header,
	main,
	.site-footer {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}

	.header-actions {
		width: auto;
		margin-left: auto;
		justify-content: flex-end;
	}

	.hero {
		padding: 1.75rem 1.25rem;
		border-radius: var(--radius-lg);
	}

	.surveys-grid {
		grid-template-columns: 1fr;
		gap: 0.85rem;
	}
}

@media (max-width: 480px) {
	.brand {
		gap: 0.25rem;
	}

	/* .eyebrow- und .section-heading-Mobile-Overrides leben jetzt
	   zentral in base.css. */

	.header-actions .login_btn {
		width: 100%;
		text-align: center;
	}
}

/* ============================================================
   Bisherige Ergebnisse — concluded studies summary section
   ============================================================
   Sits at the bottom of the homepage (before the FAQ), hidden by JS
   when no published results exist. Visual tone is intentionally calmer
   than the active-surveys grid — the participants who land here are
   either curious returnees or researchers checking transparency, not
   the primary "take a survey now" audience. */

.results-section {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.results-intro {
	margin: 0 auto 1.1rem;
	max-width: 640px;
	color: var(--text-muted);
	font-size: 0.92rem;
	line-height: 1.55;
	text-align: center;
}

.results-list {
	display: grid;
	gap: 0.9rem;
	max-width: 760px;
	margin: 0 auto;
	text-align: left;
}

/* Empty-state shown when no concluded studies have a published summary
   yet — kept friendly and non-judgmental ("transparency placeholder",
   not "we have nothing"). */
.results-empty {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 1rem 1.1rem;
	border-radius: var(--radius-md);
	border: 1px dashed var(--border);
	background: transparent;
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

.results-empty svg {
	flex-shrink: 0;
	color: var(--accent);
	margin-top: 0.1rem;
}

.results-empty p {
	margin: 0;
}

.results-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.1rem 1.2rem 1.15rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	box-shadow: var(--shadow);
	/* Subtle left-edge accent in success/accent color to differentiate
	   from the active-surveys cards. "Concluded" = positive close. */
	overflow: hidden;
}

.results-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: color-mix(in srgb, var(--success, var(--accent)) 60%, var(--accent));
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.results-card-titlerow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.55rem;
	margin-bottom: 0.1rem;
}

.results-card-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.results-card-date {
	font-size: 0.76rem;
	color: var(--text-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 500;
	white-space: nowrap;
}

.results-card-meta {
	margin: 0;
	font-size: 0.82rem;
	color: var(--text-muted);
	letter-spacing: 0.01em;
}

.results-card-summary {
	margin: 0;
	color: var(--text);
	font-size: 0.92rem;
	line-height: 1.6;
	white-space: pre-line;
}

/* Image gallery — small thumbs that open the original on click. */
.results-card-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 0.4rem;
	margin-top: 0.4rem;
}

.results-card-image {
	display: block;
	border-radius: var(--radius-sm, 8px);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--bg-muted);
	aspect-ratio: 1 / 1;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.results-card-image:hover {
	box-shadow: var(--shadow-hover);
	border-color: var(--border-strong);
}

.results-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Link chips for non-image attachments (PDFs, repos, preprints, …). */
.results-card-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.3rem;
}

.results-card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg-muted, var(--bg-elevated));
	color: var(--accent);
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.results-card-link:hover,
.results-card-link:focus-visible {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
	color: var(--accent-strong, var(--accent));
	text-decoration: none;
}

.results-card-link svg {
	flex-shrink: 0;
	opacity: 0.85;
}

@media (max-width: 720px) {
	.results-card {
		padding: 0.95rem 1.05rem 1rem;
	}
	.results-card-title {
		font-size: 0.95rem;
	}
	.results-card-summary {
		font-size: 0.88rem;
	}
}

/* ============================================================
   Survey-card: study-type pill, description, requirements
   ============================================================ */

/* The study_type pill sits ABOVE the title so it reads as a tag/label
   for the whole card. Each enum value gets its own colour tone via the
   --studytype-* CSS custom properties — fall back to accent. */
.survey-card-studytype {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	align-self: flex-start;
	padding: 0.2rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 999px;
	border: 1px solid var(--studytype-border, var(--border));
	background: var(--studytype-bg, var(--bg-muted));
	color: var(--studytype-fg, var(--text-muted));
}

.survey-card-studytype-icon {
	display: inline-flex;
	width: 0.85rem;
	height: 0.85rem;
}

.survey-card-studytype-icon svg {
	width: 100%;
	height: 100%;
}

/* Tone colours: pick hues that read distinctly side-by-side and
   work across the 3 themes. We layer color-mix() on theme tokens
   so the pills inherit theme palette automatically. */
.survey-card-studytype--bachelor {
	--studytype-fg: var(--accent-strong, var(--accent));
	--studytype-border: color-mix(in srgb, var(--accent-strong, var(--accent)) 45%, var(--border));
	--studytype-bg: color-mix(in srgb, var(--accent-strong, var(--accent)) 12%, var(--bg-elevated));
}
.survey-card-studytype--master {
	--studytype-fg: var(--success, #15803d);
	--studytype-border: color-mix(in srgb, var(--success, #15803d) 45%, var(--border));
	--studytype-bg: color-mix(in srgb, var(--success, #15803d) 12%, var(--bg-elevated));
}
.survey-card-studytype--seminar {
	--studytype-fg: var(--warning, #b45309);
	--studytype-border: color-mix(in srgb, var(--warning, #b45309) 45%, var(--border));
	--studytype-bg: color-mix(in srgb, var(--warning, #b45309) 12%, var(--bg-elevated));
}
.survey-card-studytype--praktikum {
	--studytype-fg: var(--accent-deep, var(--accent-strong));
	--studytype-border: color-mix(in srgb, var(--accent-deep, var(--accent-strong)) 45%, var(--border));
	--studytype-bg: color-mix(in srgb, var(--accent-deep, var(--accent-strong)) 12%, var(--bg-elevated));
}
.survey-card-studytype--forschung {
	--studytype-fg: var(--text);
	--studytype-border: var(--border-strong, var(--border));
	--studytype-bg: var(--bg-contrast, var(--bg-muted));
}
.survey-card-studytype--other {
	--studytype-fg: var(--text-muted);
	--studytype-border: var(--border);
	--studytype-bg: var(--bg-muted);
}

/* Description: prominent 2-line subtitle directly under the title.
   Limited to 3 lines with a fade so cards stay equal-height. */
.survey-card-description {
	margin: 0.1rem 0 0.15rem;
	color: var(--text);
	font-size: 0.88rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Incentive pill — gift-icon, accent-toned so it pops. */
.survey-card-badge--incentive {
	color: var(--accent-strong, var(--accent));
	border-color: color-mix(in srgb, var(--accent-strong, var(--accent)) 40%, var(--border));
	background: color-mix(in srgb, var(--accent-strong, var(--accent)) 10%, var(--bg-elevated));
}
.survey-card-badge--incentive .survey-card-badge-icon {
	color: var(--accent-strong, var(--accent));
}

/* Requirements callout — own row, neutral but visible. */
.survey-card-requirements {
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
	padding: 0.5rem 0.7rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--bg-muted, var(--bg-elevated));
	color: var(--text);
	font-size: 0.82rem;
	line-height: 1.4;
	margin: 0.1rem 0 0.15rem;
}

.survey-card-requirements-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--success, var(--accent));
	margin-top: 0.15rem;
}

.survey-card-requirements-icon svg {
	width: 100%;
	height: 100%;
}

.survey-card-requirements-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.survey-card-requirements-text strong {
	font-weight: 700;
	color: var(--text-muted);
	letter-spacing: 0.04em;
	font-size: 0.7rem;
	text-transform: uppercase;
}

@media (max-width: 720px) {
	.survey-card-description {
		font-size: 0.85rem;
	}
	.survey-card-requirements {
		font-size: 0.78rem;
	}
	.survey-card-studytype {
		font-size: 0.68rem;
	}
}