/* Vorstand vCards – übernimmt Schrift und Farben des Themes */
.vv-grid {
	display: grid;
	grid-template-columns: repeat(var(--vv-spalten, 3), minmax(0, 1fr));
	gap: 2.5rem 2rem;
	margin: 2rem 0;
}
@media (max-width: 900px) { .vv-grid { grid-template-columns: repeat(min(var(--vv-spalten, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .vv-grid { grid-template-columns: 1fr; } }

.vv-person { display: flex; flex-direction: column; align-items: flex-start; }

.vv-foto {
	width: 100%;
	max-width: 260px;
	aspect-ratio: 4 / 5;
	height: auto;
	object-fit: cover;
	margin-bottom: 1rem;
	border-radius: 2px;
}
.vv-initialen {
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, currentColor 8%, transparent);
	font-size: 2.5rem;
	letter-spacing: .04em;
	opacity: .75;
}

.vv-name { margin: 0; font-size: 1.15em; line-height: 1.3; }
.vv-funktion { margin: .2rem 0 .75rem; opacity: .75; }

.vv-kontakt { list-style: none; margin: 0 0 .9rem; padding: 0; font-size: .95em; line-height: 1.6; }
.vv-kontakt a { overflow-wrap: anywhere; }

.vv-download {
	margin-top: auto;
	display: inline-block;
	padding: .45em .9em;
	border: 1px solid currentColor;
	border-radius: 2px;
	text-decoration: none;
	font-size: .9em;
}
.vv-download:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.vv-download:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Liste mit Sammel-Download */
.vv-liste { margin: 2rem 0; }
.vv-liste-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.vv-liste .vv-download { margin-top: 0; background: none; color: inherit; font: inherit; font-size: .9em; cursor: pointer; }
.vv-liste .vv-download:disabled { opacity: .4; cursor: not-allowed; }
.vv-auswahl-info { font-size: .9em; opacity: .75; }

.vv-tabelle-wrap { overflow-x: auto; }
.vv-tabelle { width: 100%; border-collapse: collapse; font-size: .95em; }
/* Selektoren mit .vv-liste, damit Theme- bzw. Elementor-Tabellenstile nicht vorgehen. */
.vv-liste .vv-tabelle th, .vv-liste .vv-tabelle td {
	text-align: left;
	vertical-align: top;
	padding: .75rem 8px;
	border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.vv-liste .vv-tabelle thead th { font-weight: 600; border-bottom-width: 2px; }
.vv-liste .vv-tabelle .vv-spalte-auswahl { width: 2rem; text-align: center; }
.vv-liste .vv-tabelle .vv-spalte-vcard { text-align: center; }
/* E-Mail und Telefon nie umbrechen – die Spalten werden dafür breiter. */
.vv-liste .vv-tabelle .vv-spalte-email,
.vv-liste .vv-tabelle .vv-spalte-telefon,
.vv-liste .vv-tabelle .vv-spalte-email a,
.vv-liste .vv-tabelle .vv-spalte-telefon a { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
.vv-tabelle .vv-kontakt { margin: 0; }
.vv-tabelle .vv-funktion { margin: 0; }
.vv-tabelle tr.vv-roh td { padding-top: 0; }
.vv-tabelle pre { font-size: .8em; white-space: pre-wrap; overflow-wrap: anywhere; margin: .5rem 0 0; }

@media (max-width: 640px) {
	.vv-tabelle thead { display: none; }
	.vv-tabelle tr { display: grid; grid-template-columns: 2rem 1fr; padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
	.vv-liste .vv-tabelle td { border: 0; padding: .2rem 8px; grid-column: 2; text-align: left; }
	.vv-liste .vv-tabelle td.vv-spalte-auswahl { grid-column: 1; grid-row: 1 / span 7; text-align: center; }
	.vv-tabelle tr.vv-roh { border: 0; padding-top: 0; }
}

/* QR-Codes
 * Viele Themes färben <button> ein (z. B. rot) – deshalb hier bewusst mit
 * höherer Spezifität und !important, damit der Code weiß und scanbar bleibt. */
.vv-karte-qr { width: 100%; margin: 0 0 1rem; }

.vv-liste button.vv-qr,
.vv-karten button.vv-qr,
.vv-liste button.vv-qr:hover,
.vv-karten button.vv-qr:hover,
.vv-liste button.vv-qr:focus,
.vv-karten button.vv-qr:focus,
.vv-liste button.vv-qr:active,
.vv-karten button.vv-qr:active {
	display: block;
	width: var(--vv-qr-groesse, 300px);
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #000 !important;
	filter: none !important;
	opacity: 1 !important;
	transform: none !important;
	line-height: 0;
	cursor: zoom-in;
}
.vv-qr svg { display: block; width: 100%; height: auto; }
.vv-liste button.vv-qr:focus-visible,
.vv-karten button.vv-qr:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.vv-liste button.vv-qr:disabled,
.vv-karten button.vv-qr:disabled { cursor: default; line-height: 1.4; padding: .5rem !important; }

.vv-qr-dialog {
	width: min(1024px + 2rem, 96vw);
	max-width: none;
	max-height: 96vh;
	padding: 0;
	border: 0;
	background: #fff !important;
	color: #1a1a1a !important;
}
.vv-qr-dialog::backdrop { background: rgba(0, 0, 0, .75); }
.vv-qr-dialog-innen { padding: 1rem; }
.vv-qr-dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.vv-qr-dialog-titel { margin: 0; font-size: 1.2em; color: inherit; }
.vv-qr-dialog button.vv-qr-schliessen {
	padding: .4em .9em;
	border: 1px solid currentColor;
	border-radius: 2px;
	background: #fff !important;
	color: #1a1a1a !important;
	font: inherit;
	cursor: pointer;
}
.vv-qr-gross { width: min(1024px, 100%, calc(96vh - 9rem)); margin: 0 auto; background: #fff; }
.vv-qr-gross svg { display: block; width: 100%; height: auto; }
.vv-qr-hinweis { margin: .75rem 0 0; text-align: center; font-size: .9em; }