/* VIVA Tabelle - Masse gemessen an der Tabelle von The Plus auf der Altseite
   (/de/designer/indesign-user/). */
.viva-tabelle-huelle {
	overflow-x: auto;
	overflow-y: hidden;
}
/* Zellenschrift wie im Original: die Grundschrift von Twenty Seventeen
   (16/24 px, auf dem Handy 15 px / 1.66). Polster und Kopfschrift setzt das
   Widget je Geraet. */
.viva-tabelle {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: inherit;
	line-height: inherit;
	color: #333;
}
.viva-tabelle th,
.viva-tabelle td {
	border: 0;
	text-align: left;
	vertical-align: middle;
}
.viva-tabelle thead tr {
	border: 1px solid #bbb;
}
.viva-tabelle th {
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 1px;
	text-align: center;
}
.viva-tabelle tbody tr:nth-child(odd) {
	background: #eaeaea;
}
.viva-tabelle tbody tr:nth-child(even) {
	background: #fff;
}
/* Kopfzellen im Rumpf (Gruppenzeilen "als Kopfzelle") rahmt The Plus wie den Kopf
   und setzt sie mittig; Gruppenzeilen als Textzelle stehen links. Fett ist eine
   Gruppenzeile nur, wenn ihr Text <strong> traegt - wie im Original. */
.viva-tabelle tbody th {
	border: 1px solid #bbb;
}
.viva-tabelle .viva-gruppe td {
	text-align: left;
}
.viva-tabelle .viva-zelltext {
	display: inline-block;
}
.viva-tabelle .viva-wert {
	text-align: center;
}
.viva-tabelle a {
	color: var(--e-global-color-68ab1e4, #aa1313);
	text-decoration: none;
	box-shadow: none;
}
.viva-tabelle svg {
	width: 18px;
	height: 18px;
	vertical-align: -3px;
	fill: currentColor;
}
.viva-tabelle .viva-ja {
	color: var(--e-global-color-78647e9, #00a63e);
}
.viva-tabelle .viva-nein {
	color: var(--e-global-color-68ab1e4, #aa1313);
}
.viva-tabelle .viva-zusatz {
	margin-left: 10px;
}

/* Rotes Info-Symbol. Der Tooltip selbst haengt am <body> (tabelle.js). */
.viva-hinweis {
	display: inline-block;
	margin-left: 5px;
	color: var(--e-global-color-68ab1e4, #aa1313);
	cursor: help;
}
.viva-tooltip {
	position: absolute;
	z-index: 99999;
	width: max-content;
	max-width: min(25em, calc(100vw - 16px));
	padding: 6px 10px;
	border-radius: 4px;
	background: #222;
	color: #fff;
	font-family: "Libre Franklin", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: left;
	white-space: normal;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s;
}
.viva-tooltip.sichtbar {
	opacity: 1;
	visibility: visible;
}
/* Pfeil zum Symbol - --viva-pfeil setzt tabelle.js. */
.viva-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--viva-pfeil, 50%);
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: #222;
}
.viva-tooltip.unten::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: #222;
}