/* ═══ Baustein Vergleich ════════════════════════════════════
   Vorbild: 03_Design/final/idee-appartements.html

   Eine Tabelle, alle Appartements nebeneinander. Die erste Spalte
   traegt die Beschriftung und bleibt links stehen, damit beim
   Rollen am Handy nicht Zahlen ohne Begriff dastehen.

   Die Zahlen stehen rechtsbuendig, der Begriff links. So liegen die
   Stellen untereinander und die Spalte laesst sich lesen, ohne sie
   einzeln zu vergleichen.
   ═══════════════════════════════════════════════════════════ */


.vergl__ein {
	padding-bottom: .4rem;
}

/* Am Handy rollt die Tabelle waagrecht. Der Kasten ist mit der
   Tastatur erreichbar, sonst kaeme man ohne Maus nicht an die
   rechten Spalten. */
.vergl__rolle {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.vergl__rolle:focus-visible {
	outline: 2px solid var(--ak);
	outline-offset: 3px;
}

.vergl__t {
	width: 100%;
	min-width: 42rem;
	border-collapse: collapse;
	font-size: .9375rem;
}

.vergl__t th,
.vergl__t td {
	padding: var(--s2) var(--s3) var(--s2) 0;
	border-bottom: 1px solid var(--ln);
	text-align: left;
	vertical-align: baseline;
}

/* Kopfzeile: die Namen, jeder ein Verweis auf seine Seite. */
.vergl__t thead th {
	font-weight: var(--gw-halb);
	font-size: .9375rem;
	border-bottom: 1px solid var(--tx);
	padding-bottom: var(--s2);
}

.vergl__t thead th a {
	box-shadow: inset 0 -1px 0 transparent;
	transition: box-shadow .35s var(--e);
}

.vergl__t thead th a:hover {
	box-shadow: inset 0 -1px 0 var(--tx);
}

/* Erste Spalte: der Begriff, leiser als der Wert. */
.vergl__t tbody th {
	font-weight: 400;
	color: var(--mu);
	white-space: nowrap;
	padding-right: var(--s5);
}

/* Werte rechtsbuendig, damit die Stellen untereinander liegen. */
.vergl__t thead th:not(:first-child),
.vergl__t tbody td {
	text-align: right;
	padding-right: 0;
	padding-left: var(--s3);
}

.vergl__t tbody tr:last-child th,
.vergl__t tbody tr:last-child td {
	font-size: 1.0625rem;
}

@media (max-width: 61.25rem) {

	.vergl__t {
		min-width: 34rem;
	}

	.vergl__t tbody th {
		padding-right: var(--s4);
	}

	/* Der Name in der Kopfzeile fuehrt auf seine Seite. Am Handy ist
	   das eine Tastflaeche und kein Wort im Satz: als Zeile im Fluss
	   war sie neunzehn Pixel hoch. */
	.vergl__t thead th a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}