/* Slide Vergleich: Faktoren einzeln dazunehmen, Einzelheiten auf Klick.
   Oben ausgerichtet, flach, ohne Zierrat. */

.vergleichbody { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; justify-content: flex-start; }

.vergleichwahl { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vergleichwahl label { font-weight: 700; color: var(--color-text-primary); }
.vergleichwahl select, .vergleichwahl button { font: inherit; padding: .35em .7em; border: 1px solid var(--color-text-primary); background: var(--color-surface); color: var(--color-text-primary); }
.vergleichwahl button { cursor: pointer; font-weight: 700; }
.vergleichwahl button:disabled { opacity: .35; cursor: default; }
.vergleichwahl .leeren { margin-left: auto; font-weight: 400; color: var(--color-text-muted); border-color: var(--color-border); }
.vergleichwahl select:focus-visible, .vergleichwahl button:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 2px; }
.vergleichwahl .hinweis { margin: 0; color: #b02a37; font-weight: 700; font-size: .85rem; flex-basis: 100%; }
.vergleichwahl .hinweis.hidden { display: none; }

.vergleichtabelle { width: 100%; border-collapse: collapse; font-size: clamp(.78rem, .92vw, 1rem); }
.vergleichtabelle th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 700; padding: 0 .6em .3em 0; border-bottom: 2px solid var(--color-text-primary); }
.vergleichtabelle td { padding: .45em .6em .45em 0; border-top: 1px solid var(--color-border); color: var(--color-text-primary); vertical-align: top; line-height: 1.35; }
.vergleichtabelle .spalte-faktor { width: 20ch; font-weight: 700; }

.faktorzeile { cursor: pointer; }
.faktorzeile:hover .spalte-faktor { text-decoration: underline; }
.faktorzeile.offen .spalte-faktor { text-decoration: underline; }
.faktorzeile .weg { float: right; font: inherit; font-size: .9em; line-height: 1; padding: 0 .3em; border: 0; background: none; color: var(--color-text-muted); cursor: pointer; }
.faktorzeile .weg:hover { color: #b02a37; }

.einzelheiten td { border-top: 0; padding-top: 0; padding-bottom: .9em; }
.einzelheiten .worumgeht { margin: 0 0 .5em; color: var(--color-text-secondary); font-size: .92em; }
.einzelheiten .detailspalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.einzelheiten .detail { margin: 0; font-size: .92em; line-height: 1.4; }
.einzelheiten .beschriftung { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 700; }
.einzelheiten .wsw { margin: .6em 0 0; font-size: .92em; line-height: 1.4; font-weight: 600; }
.einzelheiten .quelle { margin: .3em 0 0; font-size: .78em; color: var(--color-text-muted); }

.leerhinweis { color: var(--color-text-muted); font-size: .9rem; margin: 0; }
.leerhinweis.hidden { display: none; }