/* Club20 Upload – bewusst neutral gehalten, erbt Schrift und Farbe vom Theme.
   Zum Anpassen reichen die Variablen unten. */

.c20 {
	--c20-accent: currentColor;
	--c20-border: rgba(128, 128, 128, 0.35);
	--c20-border-strong: rgba(128, 128, 128, 0.6);
	--c20-bg-soft: rgba(128, 128, 128, 0.06);
	--c20-radius: 10px;
	--c20-ok: #2e9e5b;
	--c20-err: #c8372d;

	max-width: 720px;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.55;
}

.c20 *,
.c20 *::before,
.c20 *::after { box-sizing: border-box; }

/* Manche Themes setzen display auf form/div und überschreiben damit [hidden]. */
.c20 [hidden] { display: none !important; }

.c20__title { margin: 0 0 .5em; }
.c20__intro { margin-bottom: 2em; }

/* Honeypot */
.c20__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.c20__section {
	margin: 0 0 2.25rem;
	padding: 0 0 2.25rem;
	border-bottom: 1px solid var(--c20-border);
}
.c20__section:last-of-type { border-bottom: 0; }

.c20__h3 {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0 0 .35em;
	font-size: 1.15rem;
}

.c20__step {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border: 1px solid var(--c20-border-strong);
	border-radius: 50%;
	font-size: .72em;
	font-weight: 700;
	opacity: .8;
}

.c20__hint {
	margin: 0 0 1em;
	font-size: .9rem;
	opacity: .75;
}
.c20__hint--tight { margin: .4em 0 0; }
.c20__hint--warn {
	color: var(--c20-err);
	opacity: 1;
	font-weight: 500;
}

/* Erklärender Zusatz unter einer Auswahloption */
.c20__check-sub {
	display: block;
	margin-top: .3em;
	font-size: .82rem;
	line-height: 1.45;
	opacity: .7;
}

.c20__input.is-required {
	border-color: var(--c20-err);
}

.c20__label {
	display: block;
	margin: 0 0 .35em;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	opacity: .8;
}

.c20__input,
.c20__textarea {
	width: 100%;
	padding: .7em .85em;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--c20-border-strong);
	border-radius: var(--c20-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.c20__input:focus,
.c20__textarea:focus {
	outline: 0;
	border-color: var(--c20-accent);
	box-shadow: 0 0 0 3px var(--c20-bg-soft);
}

.c20__textarea { resize: vertical; min-height: 8em; }
.c20__textarea--small { min-height: 4em; }

.c20__counter {
	margin-top: .35em;
	font-size: .78rem;
	text-align: right;
	opacity: .55;
}

.c20__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 1.25rem;
}
@media (max-width: 560px) {
	.c20__grid { grid-template-columns: 1fr; }
}

/* --- Dropzone --- */
.c20__drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .2em;
	padding: 2.25rem 1rem;
	text-align: center;
	border: 2px dashed var(--c20-border-strong);
	border-radius: var(--c20-radius);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.c20__drop:hover,
.c20__drop:focus-visible { background: var(--c20-bg-soft); }
.c20__drop:focus-visible { outline: 2px solid var(--c20-accent); outline-offset: 2px; }
.c20__drop.is-over {
	background: var(--c20-bg-soft);
	border-color: var(--c20-accent);
	border-style: solid;
	transform: scale(1.01);
}

.c20__drop-icon { opacity: .55; margin-bottom: .3em; }
.c20__drop-main { margin: 0; font-weight: 600; font-size: 1.05rem; }
.c20__drop-sub  { margin: 0; font-size: .85rem; opacity: .6; }

.c20__file-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/* --- Dateiliste --- */
.c20__files { list-style: none; margin: 1rem 0 0; padding: 0; }

.c20__file {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--c20-border);
	font-size: .9rem;
}

.c20__file-thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 6px;
	background: var(--c20-bg-soft) center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .03em;
	opacity: .8;
}

.c20__file-body { flex: 1 1 auto; min-width: 0; }

.c20__file-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c20__file-meta { font-size: .78rem; opacity: .6; }
.c20__file.is-done  .c20__file-meta { color: var(--c20-ok); opacity: 1; }
.c20__file.is-error .c20__file-meta { color: var(--c20-err); opacity: 1; }

.c20__file-track {
	height: 3px;
	margin-top: .35em;
	background: var(--c20-bg-soft);
	border-radius: 2px;
	overflow: hidden;
}
.c20__file-track > span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--c20-accent);
	transition: width .2s ease;
}

.c20__file-remove {
	flex: 0 0 auto;
	padding: .2em .5em;
	font: inherit;
	font-size: 1.1rem;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	opacity: .45;
	cursor: pointer;
}
.c20__file-remove:hover { opacity: 1; }

.c20__files-sum { margin-top: .75rem; font-size: .85rem; opacity: .7; }

/* --- Checkboxen --- */
.c20__check {
	display: flex;
	align-items: flex-start;
	gap: .7em;
	padding: .6em .8em;
	margin-bottom: .5em;
	border: 1px solid var(--c20-border);
	border-radius: var(--c20-radius);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.c20__check:hover { background: var(--c20-bg-soft); }
.c20__check input { margin-top: .28em; flex: 0 0 auto; width: 1.05em; height: 1.05em; accent-color: currentColor; }
.c20__check span { font-size: .92rem; }
.c20__check:has(input:checked) { border-color: var(--c20-border-strong); background: var(--c20-bg-soft); }

.c20__rule { margin: 1.25em 0; border: 0; border-top: 1px solid var(--c20-border); }

/* --- Aktionen --- */
.c20__actions { margin-top: 1.5rem; }

.c20__submit,
.c20__again {
	display: inline-block;
	padding: .85em 1.9em;
	font: inherit;
	font-weight: 600;
	color: inherit;
	background: transparent;
	border: 2px solid currentColor;
	border-radius: var(--c20-radius);
	cursor: pointer;
	transition: opacity .15s ease, transform .1s ease;
}
.c20__submit:hover:not(:disabled),
.c20__again:hover { opacity: .7; }
.c20__submit:active:not(:disabled) { transform: translateY(1px); }
.c20__submit:disabled { opacity: .45; cursor: progress; }

.c20__progress { margin-top: 1rem; }
.c20__progress-bar {
	height: 6px;
	background: var(--c20-bg-soft);
	border-radius: 3px;
	overflow: hidden;
}
.c20__progress-bar > span {
	display: block;
	height: 100%;
	width: 0;
	background: currentColor;
	transition: width .25s ease;
}
.c20__progress-text { margin-top: .5em; font-size: .85rem; opacity: .75; }

.c20__error {
	margin: 1rem 0;
	padding: .8em 1em;
	font-size: .9rem;
	color: var(--c20-err);
	border: 1px solid currentColor;
	border-radius: var(--c20-radius);
}

/* --- Erfolg --- */
.c20__success { padding: 2.5rem 1rem; text-align: center; }
.c20__success-icon { color: var(--c20-ok); margin-bottom: .5rem; }
.c20__success-title { margin: 0 0 .5em; }
.c20__success-id { margin: 0 0 .5em; font-size: 1.1rem; }
.c20__success-id strong { letter-spacing: .12em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.c20__again { margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
	.c20 *, .c20 *::before, .c20 *::after { transition: none !important; }
}