/*
 * VuV Generationenplattform 2.0
 *
 * Farben ausschliesslich aus dem Theme-SCSS - hier werden keine neuen
 * Markenfarben eingefuehrt:
 *   $main-color      #5b97b1
 *   $primary-color   #84b1c4
 *   $secondary-color #ccb555
 *   $third-color     #72797f
 *   $error-color     #e85600
 *   $success-color   #32b643
 *   $warning-color   #ffb700
 *
 * Die Grid- und Button-Klassen des Themes (columns/column, btn btn-primary,
 * shadow-box) werden weiterverwendet. Dieses Stylesheet ergaenzt nur, was der
 * Marktplatz zusaetzlich braucht, und ist auf den vuvma-Praefix beschraenkt.
 */

:root {
	--vuvma-main: #5b97b1;
	--vuvma-primary: #84b1c4;
	--vuvma-secondary: #ccb555;
	--vuvma-third: #72797f;
	--vuvma-error: #e85600;
	--vuvma-success: #32b643;
	--vuvma-warning: #ffb700;

	--vuvma-surface: #fff;
	--vuvma-surface-muted: #f1f1f1;
	--vuvma-border: #e2e6e9;
	--vuvma-text: #333;
	--vuvma-text-muted: #72797f;

	--vuvma-radius: 4px;
	--vuvma-gap: 1rem;
	--vuvma-shadow: 0 1px 3px rgba(0, 0, 0, .07);
	--vuvma-shadow-hover: 0 4px 14px rgba(91, 151, 177, .18);
}

/* ---------------------------------------------------------- Meldungen ---- */

.vuvma-notice {
	border-left: 4px solid var(--vuvma-primary);
	background: var(--vuvma-surface-muted);
	padding: .85rem 1rem;
	margin: 0 0 var(--vuvma-gap);
	border-radius: 0 var(--vuvma-radius) var(--vuvma-radius) 0;
	font-size: .95rem;
}

.vuvma-notice--success {
	border-left-color: var(--vuvma-success);
	background: rgba(50, 182, 67, .08);
}

.vuvma-notice--error {
	border-left-color: var(--vuvma-error);
	background: rgba(232, 86, 0, .08);
}

.vuvma-notice--info {
	border-left-color: var(--vuvma-main);
	background: rgba(91, 151, 177, .08);
}

/* ------------------------------------------------------------ Navigation - */

.vuvma-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--vuvma-border);
}

.vuvma-nav__item { margin: 0; }

.vuvma-nav__link {
	display: block;
	padding: .6rem 1rem;
	color: var(--vuvma-third);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}

.vuvma-nav__link:hover,
.vuvma-nav__link:focus-visible {
	color: var(--vuvma-main);
	border-bottom-color: var(--vuvma-primary);
}

.vuvma-nav__link[aria-current="page"] {
	color: var(--vuvma-main);
	font-weight: 600;
	border-bottom-color: var(--vuvma-secondary);
}

/* ------------------------------------------------------------- Anzeigen -- */

.vuvma-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: var(--vuvma-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vuvma-card {
	display: flex;
	flex-direction: column;
	background: var(--vuvma-surface);
	border: 1px solid var(--vuvma-border);
	border-radius: var(--vuvma-radius);
	box-shadow: var(--vuvma-shadow);
	padding: 1.1rem 1.2rem;
	transition: box-shadow .18s ease, transform .18s ease;
}

.vuvma-card:hover,
.vuvma-card:focus-within {
	box-shadow: var(--vuvma-shadow-hover);
	transform: translateY(-2px);
}

.vuvma-card--inactive {
	background: var(--vuvma-surface-muted);
	opacity: .75;
}

.vuvma-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: .6rem;
}

.vuvma-card__title {
	margin: 0 0 .4rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

.vuvma-card__title a {
	color: var(--vuvma-main);
	text-decoration: none;
}

.vuvma-card__title a:hover,
.vuvma-card__title a:focus-visible { text-decoration: underline; }

.vuvma-card__excerpt {
	margin: 0 0 .8rem;
	color: var(--vuvma-text);
	font-size: .94rem;
	line-height: 1.55;
}

.vuvma-card__meta {
	margin: 0;
	color: var(--vuvma-text-muted);
	font-size: .85rem;
}

.vuvma-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px solid var(--vuvma-border);
	font-size: .87rem;
}

/* --------------------------------------------------------------- Badges -- */

.vuvma-badge {
	display: inline-block;
	padding: .18rem .6rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.5;
}

.vuvma-badge--angebot {
	background: var(--vuvma-main);
	color: #fff;
}

.vuvma-badge--gesuch {
	background: var(--vuvma-secondary);
	color: #fff;
}

.vuvma-badge--public {
	background: transparent;
	color: var(--vuvma-third);
	border: 1px solid var(--vuvma-border);
}

.vuvma-badge--offline {
	background: var(--vuvma-error);
	color: #fff;
}

.vuvma-card__date {
	margin-left: auto;
	color: var(--vuvma-text-muted);
	font-size: .82rem;
	white-space: nowrap;
}

/* -------------------------------------------------------------- Detail --- */

.vuvma-detail__title {
	margin: .3rem 0 .8rem;
	color: var(--vuvma-main);
}

.vuvma-detail__body {
	line-height: 1.65;
	margin-bottom: 2rem;
}

.vuvma-panel {
	background: var(--vuvma-surface-muted);
	border-radius: var(--vuvma-radius);
	padding: 1.25rem 1.4rem;
	margin: 1.5rem 0;
}

.vuvma-panel__title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--vuvma-main);
}

/* -------------------------------------------------------------- Formular - */

.vuvma-form { margin: 0; }

.vuvma-field { margin-bottom: 1.1rem; }

.vuvma-field__label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 600;
	font-size: .92rem;
	color: var(--vuvma-text);
}

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

.vuvma-field__hint {
	display: block;
	margin-top: .35rem;
	color: var(--vuvma-text-muted);
	font-size: .84rem;
	line-height: 1.5;
}

.vuvma-field__error {
	display: block;
	margin-top: .35rem;
	color: var(--vuvma-error);
	font-size: .85rem;
}

.vuvma-field input[type="text"],
.vuvma-field input[type="email"],
.vuvma-field input[type="password"],
.vuvma-field input[type="tel"],
.vuvma-field select,
.vuvma-field textarea {
	width: 100%;
	padding: .6rem .75rem;
	border: 1px solid var(--vuvma-border);
	border-radius: var(--vuvma-radius);
	background: var(--vuvma-surface);
	font: inherit;
	color: var(--vuvma-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vuvma-field input:focus,
.vuvma-field select:focus,
.vuvma-field textarea:focus {
	outline: none;
	border-color: var(--vuvma-primary);
	box-shadow: 0 0 0 3px rgba(132, 177, 196, .25);
}

.vuvma-field--invalid input,
.vuvma-field--invalid select,
.vuvma-field--invalid textarea {
	border-color: var(--vuvma-error);
}

.vuvma-field textarea { min-height: 9rem; resize: vertical; }

.vuvma-checkbox {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .92rem;
	line-height: 1.55;
}

.vuvma-checkbox input { margin-top: .25rem; flex: 0 0 auto; }

.vuvma-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	margin-top: 1.5rem;
}

/* -------------------------------------------------------------- Buttons -- */

.vuvma-btn {
	display: inline-block;
	padding: .6rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--vuvma-radius);
	background: var(--vuvma-main);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.vuvma-btn:hover,
.vuvma-btn:focus-visible { background: #4d8299; color: #fff; }

.vuvma-btn--secondary {
	background: transparent;
	border-color: var(--vuvma-main);
	color: var(--vuvma-main);
}

.vuvma-btn--secondary:hover,
.vuvma-btn--secondary:focus-visible {
	background: var(--vuvma-main);
	color: #fff;
}

.vuvma-btn--danger {
	background: transparent;
	border-color: var(--vuvma-error);
	color: var(--vuvma-error);
}

.vuvma-btn--danger:hover,
.vuvma-btn--danger:focus-visible { background: var(--vuvma-error); color: #fff; }

/*
 * Aktionen wie Loeschen laufen ueber echte Formular-Buttons statt der frueheren
 * <span onclick="...">. Damit funktionieren Tastatur und Screenreader, und die
 * Aktion traegt einen Nonce.
 */
.vuvma-btn--link {
	padding: 0;
	background: none;
	border: none;
	color: var(--vuvma-main);
	font-weight: 400;
	text-decoration: underline;
	cursor: pointer;
}

.vuvma-btn--link:hover,
.vuvma-btn--link:focus-visible { background: none; color: var(--vuvma-secondary); }

.vuvma-btn--link.is-danger { color: var(--vuvma-error); }

.vuvma-btn[disabled],
.vuvma-btn[aria-busy="true"] { opacity: .6; cursor: default; }

/* ------------------------------------------------------------ Zustaende -- */

.vuvma-empty {
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--vuvma-text-muted);
	background: var(--vuvma-surface-muted);
	border-radius: var(--vuvma-radius);
}

.vuvma-meta-list {
	margin: 0;
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: .5rem 1.25rem;
	font-size: .93rem;
}

.vuvma-meta-list dt { font-weight: 600; color: var(--vuvma-text-muted); }
.vuvma-meta-list dd { margin: 0; }

.vuvma-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------- Mobile -- */

@media (max-width: 600px) {
	.vuvma-list { grid-template-columns: 1fr; }
	.vuvma-meta-list { grid-template-columns: 1fr; gap: .2rem; }
	.vuvma-meta-list dd { margin-bottom: .6rem; }
	.vuvma-card__date { margin-left: 0; width: 100%; }
	.vuvma-form__actions .vuvma-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.vuvma-card,
	.vuvma-btn,
	.vuvma-nav__link,
	.vuvma-field input,
	.vuvma-field select,
	.vuvma-field textarea { transition: none; }

	.vuvma-card:hover { transform: none; }
}

/* --------------------------------------------------- Moderationsleiste --- */
/*
 * Nur fuer WordPress-Administratoren sichtbar. Bewusst anders gestaltet als
 * die uebrige Oberflaeche, damit auf einen Blick erkennbar ist, dass es sich
 * um ein Verwaltungswerkzeug handelt und nicht um Funktionen fuer Nutzer.
 */

.vuvma-modbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.25rem;
	margin: 0 0 1.5rem;
	padding: .6rem 1rem;
	border-radius: var(--vuvma-radius);
	background: #32373c;
	color: #f0f0f1;
	font-size: .86rem;
	line-height: 1.5;
}

.vuvma-modbar__label {
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	font-size: .74rem;
	color: var(--vuvma-secondary);
	white-space: nowrap;
}

.vuvma-modbar__meta {
	color: #c3c4c7;
	font-variant-numeric: tabular-nums;
}

.vuvma-modbar__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}

.vuvma-modbar__form { margin: 0; }

.vuvma-modbar__link {
	padding: 0;
	border: 0;
	background: none;
	color: #f0f0f1;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.vuvma-modbar__link:hover,
.vuvma-modbar__link:focus-visible { color: var(--vuvma-secondary); }

.vuvma-modbar__link.is-danger { color: #ff8a80; }
.vuvma-modbar__link.is-danger:hover,
.vuvma-modbar__link.is-danger:focus-visible { color: #ffb3ab; }

@media (max-width: 600px) {
	.vuvma-modbar__actions { margin-left: 0; width: 100%; }
}

/* ----------------------------------------------- Redaktionelle Texte ---- */
/*
 * Inhalte aus der zentralen Textverwaltung (Support\Texts). Bewusst
 * zurueckhaltend gestaltet - die Typografie kommt aus dem Theme.
 */

.vuvma-intro { margin-bottom: 1.5rem; }
.vuvma-intro > :first-child { margin-top: 0; }
.vuvma-intro > :last-child { margin-bottom: 0; }
.vuvma-intro h3 { margin: 1.5rem 0 .4rem; font-size: 1.05rem; color: var(--vuvma-main); }
.vuvma-intro p { margin: 0 0 .8rem; line-height: 1.6; }
.vuvma-intro a { color: var(--vuvma-main); }

.vuvma-notice > :first-child { margin-top: 0; }
.vuvma-notice > :last-child { margin-bottom: 0; }