/* Gesamttabelle auf /feldbett-vergleich/ (templates/_gesamttabelle.html, static/js/vergleich.js).
   Wird nur auf dieser Seite geladen. Farben und Schriften aus site.css (:root). */

.gesamt [hidden] { display: none !important; }
/* Breiter als die Textspalte, damit die Tabelle am Desktop ohne Scrollen passt; am Handy genau Spaltenbreite */
.gesamt {
  --gw: max(100%, min(76rem, calc(100vw - 2 * var(--rand) - 20px)));
  width: var(--gw); margin-left: calc((100% - var(--gw)) / 2);
  margin-block: 2rem 2.6rem !important;
  background: var(--papier); border: 2px solid var(--kiefer); border-radius: 6px;
  padding: clamp(1rem, 2.6vw, 1.8rem);
}
.gesamt > * + * { margin-top: 1rem; }
.gesamt h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.gesamt-intro { margin: .6rem 0 0; color: var(--daemmerung); font-size: 1rem; max-width: 70ch; }

/* Filter */
/* Raster: bis 560 px zwei Spalten, bis 1099 px (68,75em) drei, darüber vier. Das Sortierfeld ist immer mindestens zwei Spalten
   breit, damit der längste Eintrag („Breite, breiteste zuerst“) ganz zu lesen ist. */
.gesamt-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.2rem; align-items: end;
  background: var(--nebel); border-radius: 5px; padding: 1rem 1.1rem; margin-top: 1.2rem !important; }
.gesamt-feld { display: grid; gap: .3rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.gesamt-feld label, .gesamt-feld legend { font: 700 1.02rem/1.2 var(--display); padding: 0; }
.gesamt-feld select { font: 400 1rem var(--text); color: var(--granit); background: var(--papier); border: 2px solid var(--linie);
  border-radius: 4px; padding: .5rem .6rem; min-height: 44px; width: 100%; }
.gesamt-feld select:hover { border-color: var(--kiefer); }
.gesamt-preis legend { margin-bottom: .3rem; float: left; width: 100%; }
.gesamt-preis div { display: flex; gap: .4rem; clear: both; }
.gesamt-preis label { position: relative; cursor: pointer; font: 700 1.05rem var(--display); }
.gesamt-preis input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gesamt-preis label > span[aria-hidden] { display: grid; place-items: center; min-width: 3.2rem; min-height: 44px; padding: 0 .6rem;
  border: 2px solid var(--linie); border-radius: 4px; background: var(--papier); }
.gesamt-preis label:hover > span[aria-hidden] { border-color: var(--kiefer); }
.gesamt-preis input:checked + span { background: var(--kiefer); color: var(--nebel); border-color: var(--kiefer); }
.gesamt-preis input:focus-visible + span { outline: 3px solid var(--wegweiser); outline-offset: 2px; box-shadow: 0 0 0 3px var(--granit); }
.gesamt-sort { grid-column: span 2; }
.gesamt-status { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; grid-column: span 2; }
.gesamt-status p { margin: 0; font: 700 1.1rem var(--display); }
.gesamt-link { font: 700 1.02rem var(--display); background: none; border: 0; padding: .5rem 0; min-height: 44px; color: var(--daemmerung);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.gesamt-knopf { font: 700 1.08rem var(--display); background: var(--kiefer); color: var(--nebel); border: 2px solid var(--kiefer);
  border-radius: 4px; padding: .55rem 1.1rem; min-height: 44px; cursor: pointer; }
.gesamt-knopf:disabled { opacity: .45; cursor: default; }

/* Tabelle */
.gesamt-rahmen { overflow-x: auto; max-width: 100%; }
.gesamt-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.gesamt-tabelle *:is(th, td) { text-align: left; vertical-align: middle; padding: .6rem .5rem; border-bottom: 1px solid var(--linie); }
.gesamt-tabelle thead th { background: var(--kiefer); color: var(--nebel); font: 700 1.02rem/1.15 var(--display); vertical-align: bottom; hyphens: manual; }
.gesamt-tabelle thead th.gt-wahl { font-size: .82rem; font-weight: 700; padding-inline: .3rem; }
.gesamt-tabelle thead th:first-child { border-radius: 4px 0 0 0; }
.gesamt-tabelle thead th:last-child { border-radius: 0 4px 0 0; }
.gesamt-tabelle thead button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem 0; border-bottom: 2px solid transparent; }
.gesamt-tabelle thead button:hover { border-bottom-color: currentColor; }
.gesamt-tabelle thead button:focus-visible { outline: 3px solid var(--wegweiser); outline-offset: 2px; }
.gesamt-tabelle thead button::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .35; }
.gesamt-tabelle th[aria-sort="ascending"] button::after { transform: rotate(-135deg) translateY(-1px); opacity: 1; }
.gesamt-tabelle th[aria-sort="descending"] button::after { opacity: 1; }
.gesamt-tabelle tbody tr:hover { background: var(--nebel); }
.gesamt-tabelle tbody tr:target { background: var(--flechte-hell); }
.gesamt-tabelle tbody tr.gewaehlt { background: var(--flechte-hell); }
/* Alle Modellnamen gleich gefärbt (auch ohne eigene Seite, sonst wirkt der Name wie ein fehlender Link); Link-Hinweis nur die Unterstreichung */
.gt-modell { font: 800 1.12rem/1.1 var(--display); min-width: 9rem; color: var(--kiefer); }
/* Modellname als Link erkennbar: unterstrichen, beim Zeigen/Fokus Farbwechsel und kräftigere Linie */
.gt-modell a { color: var(--kiefer); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: var(--flechte); }
.gt-modell a:hover, .gt-modell a:focus-visible { color: var(--daemmerung); text-decoration-color: currentColor; }
.gt-wahl { width: 2.6rem; text-align: center !important; }
.gt-wahl label { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.gt-wahl input { width: 1.25rem; height: 1.25rem; accent-color: var(--kiefer); margin: 0; cursor: pointer; }
/* Gesperrt, sobald 3 Modelle gewählt sind: Kästchen ausgegraut, kurz „Auswahl voll“ als ruhiger Hinweis (kein Fehler-Look; in den
   Karten sichtbar, Erklärung im title und in der Auswahlleiste) */
.gt-wahl label.gesperrt { cursor: not-allowed; }
.gt-wahl label.gesperrt input { cursor: not-allowed; opacity: .35; filter: grayscale(1); }
.gt-wahl label.gesperrt .gt-wahl-text { color: var(--granit); font-size: .9rem; }
.gt-wahl-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gt-kauf { text-align: right !important; }
.gt-kauf .kaufen { white-space: nowrap; line-height: 1.1; }
/* Tabelle bis 1279 px (80em): Kurztext „Bei Amazon“ (Makro amazon_knopf, kurz=True), damit alle Spalten ohne Scrollen passen.
   Alle Umbrüche der Gesamttabelle in em (= Standardschrift des Browsers): Mit größerer Browserschrift wächst die Tabelle mit,
   die Umbrüche wandern mit (18 px: Tabelle ab 1197 px, 20 px ab 1330 px). layout_pruefen.mjs prüft 16/18/20/24 px. */
@media (max-width: 79.99em) {
  .gt-kauf .kaufen-lang { display: none; }
  .gt-kauf .kaufen-kurz { display: inline; }
  .gesamt-tabelle *:is(th, td) { padding-inline: .38rem; }
}
/* Preisklasse („€€€ · gehoben“) immer einzeilig, auch in der Tabelle; zwischen 1064 und 1099 px schmalere Zellen, damit es passt */
.gesamt .preisklasse { white-space: nowrap; }
@media (min-width: 66.5em) and (max-width: 68.74em) {
  .gesamt-tabelle *:is(th, td) { padding-inline: .3rem; }
}
.gesamt-tabelle [data-feld="packmass"] { min-width: 6rem; }
.gesamt-tabelle tr { scroll-margin-top: 1.5rem; }
/* Tabelle (ab 1064 px = 66.5em): Spaltenköpfe kleben oben, damit nach einem Sprung auf #modell-… (Link aus dem Finder) und beim
   Scrollen klar bleibt, welche Zahl was ist. Dafür darf der Rahmen kein Scroll-Container sein (overflow: visible; die Tabelle
   passt ab 66.5em ohne Scrollen, auch mit Ersatzschrift und größerer Browserschrift, das prüft layout_pruefen.mjs; die
   Tabelle braucht gut 56em, mit Langtext 62em. Passt sie trotzdem nicht, z. B. bei einer Mindestschriftgröße, setzt
   vergleich.js .zu-breit: Der Rahmen scrollt dann selbst, statt die Seite zu verbreitern). Die Kopfzeile der Seite klebt nicht, also top: 0. Zielzeile und
   Tastaturfokus landen unter dem Kopf: scroll-padding-top der Seite (5rem, site.css) ist höher als der Kopf (gut 3 rem),
   scroll-margin-top der Zeilen gibt Luft darüber. Unter der Auswahlleiste (z-index 5) und der Zurück-Leiste (15). */
@media (min-width: 66.5em) {
  .gesamt-rahmen { overflow: visible; }
  .gesamt-rahmen.zu-breit { overflow-x: auto; }
  .gesamt-tabelle thead th { position: sticky; top: 0; z-index: 4; box-shadow: 0 1px 0 var(--kiefer); }
}

.gesamt-mehr { display: flex; justify-content: center; }

/* „Zurück zu deiner Empfehlung“ (nur mit ?finder=… aus dem Finder, vergleich.js): schmale Leiste über die ganze Breite unten,
   fest positioniert (verschiebt nichts, CLS). Ihr Platz ist reserviert: padding-bottom am body (das Seitenende und der letzte
   Amazon-Knopf lassen sich darüber scrollen) und scroll-padding-bottom (der Tastaturfokus landet nie darunter). Die
   Auswahlleiste klebt darüber, die mobile Kaufleiste entfällt (die Empfehlung aus dem Finder ist der Weg zurück).
   Bewusst nie oben: Dort läge sie über Kopfzeile und Logo. */
.gesamt-zurueck { position: fixed; inset: auto 0 0 0; z-index: 15; display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .4rem 16px; background: var(--kiefer); color: var(--nebel); border-top: 2px solid var(--nebel);
  font: 700 1.05rem/1.1 var(--display); text-decoration: none; box-shadow: 0 -4px 14px rgba(21, 42, 34, .2); }
.gesamt-zurueck::before { content: ""; width: .5rem; height: .5rem; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); flex: none; }
.gesamt-zurueck:hover { background: var(--granit); color: var(--nebel); }
.gesamt-zurueck:focus-visible { outline: 3px solid var(--wegweiser); outline-offset: -5px; }
body:has(.gesamt-zurueck) { padding-bottom: 3rem; }
body:has(.gesamt-zurueck) .kaufleiste { display: none; }
body:has(.gesamt-zurueck) .gesamt-auswahl { bottom: 3rem; }
html:has(.gesamt-zurueck) { scroll-padding-bottom: 4rem; }
/* Tastaturfokus nicht unter der klebenden Auswahlleiste (WCAG 2.4.11): Abstand unten = Höhe der Leiste
   (--gesamt-auswahl-h setzt vergleich.js, Ersatzwert für den ersten Moment) plus Luft, mit Zurück-Leiste auch deren Höhe */
html:has(#gesamt-auswahl:not([hidden])) { scroll-padding-bottom: calc(var(--gesamt-auswahl-h, 7rem) + 1rem); }
html:has(#gesamt-auswahl:not([hidden])):has(.gesamt-zurueck) { scroll-padding-bottom: calc(var(--gesamt-auswahl-h, 7rem) + 4rem); }
.gesamt-mehr .gesamt-knopf { width: 100%; max-width: 24rem; }
.gesamt-leer { background: var(--nebel); border-radius: 5px; padding: 1.2rem; }
.gesamt .gesamt-leer p { margin: 0 0 .8rem; }
.gesamt-quelle { font-size: .88rem; line-height: 1.5; color: var(--daemmerung); margin-top: 1.2rem !important; }
.gesamt .kaufen-hinweis { margin-top: .3rem !important; }

/* Auswahl-Leiste: klebt unten, solange die Tabelle im Bild ist */
.gesamt-auswahl { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
  background: var(--kiefer); color: var(--nebel); border-radius: 5px; padding: .6rem 1rem; box-shadow: 0 -4px 14px rgba(21, 42, 34, .18); }
.gesamt-auswahl p { margin: 0; font: 700 1.1rem/1.2 var(--display); }
.gesamt-auswahl div { display: flex; align-items: center; gap: 1rem; }
.gesamt-auswahl .gesamt-knopf { background: var(--papier); color: var(--kiefer); border-color: var(--papier); }
/* „Zum Vergleich“, während der offene Vergleich im Bild ist: unsichtbar, Platz bleibt (kein Layoutsprung der Leiste) */
.gesamt-auswahl .gesamt-knopf-weg { visibility: hidden; }
.gesamt-auswahl .gesamt-link { color: var(--nebel); }
.gesamt-auswahl :focus-visible { outline-color: var(--wegweiser); box-shadow: none; }
body:has(.gesamt-auswahl:not([hidden])) .kaufleiste.sichtbar { transform: translateY(110%); }

/* Direktvergleich */
.direkt { background: var(--nebel); border-left: 6px solid var(--wegweiser); border-radius: 5px; padding: clamp(1rem, 2.6vw, 1.6rem); scroll-margin-top: 1rem; }
.direkt:focus, .direkt:focus-visible { outline: none; box-shadow: none; }
.direkt h3 { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2rem); }
.gesamt .direkt-hinweis { margin: .4rem 0 1rem; font-size: .9rem; color: var(--daemmerung); }
.direkt table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.direkt *:is(th, td) { text-align: left; vertical-align: top; padding: .55rem .5rem; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.direkt thead th { font: 800 1.2rem/1.08 var(--display); vertical-align: bottom; border-bottom: 2px solid var(--kiefer); overflow-wrap: normal; hyphens: auto; }
.direkt thead th:first-child { width: 8rem; }
.direkt thead a { text-decoration: none; }
.direkt tbody th { font-weight: 400; font-size: .88rem; color: var(--daemmerung); }
.direkt td strong { font-weight: 700; }
.direkt .kaufen { white-space: normal; line-height: 1.1; }
.direkt-grenze td { font-size: .9rem; line-height: 1.45; overflow-wrap: break-word; hyphens: auto; }
.direkt-mehr { display: inline-block; margin-top: .55rem; font-size: .92rem; }
.direkt-kauf td { border-bottom: 0; }
.direkt-kauf-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
.direkt-kauf-inhalt .direkt-mehr { margin-top: 0; }
.direkt-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin-top: 1.2rem; }
.direkt-aktionen p { margin: 0; flex-basis: 100%; font-size: .95rem; color: var(--kiefer); min-height: 1.2em; overflow-wrap: anywhere; }
.direkt-link { flex-basis: 100%; display: flex; flex-direction: column; gap: .3rem; }
.direkt-link[hidden] { display: none; }
.direkt-link label { font-size: .88rem; color: var(--daemmerung); }
.direkt-link input { width: 100%; min-width: 0; font: inherit; font-size: .95rem; padding: .5rem .6rem; border: 1px solid var(--linie); border-radius: 4px; background: var(--papier); color: var(--kiefer); }

/* Direktvergleich gestapelt (nur bei 3 Modellen unter 600 px, siehe unten) */
.direkt-stapel { display: none; }
.direkt-block { background: var(--papier); border: 1px solid var(--linie); border-radius: 5px; padding: .9rem 1rem 1rem; }
.direkt-block h4 { margin: 0 0 .6rem; font: 800 1.25rem/1.1 var(--display); }
.direkt-block h4 a { text-decoration: underline; text-underline-offset: 3px; }
.direkt-block dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; }
.direkt-block dl > div { min-width: 0; }
.direkt-block dt { font-size: .8rem; color: var(--daemmerung); }
.direkt-block dd { margin: 0; font-size: .98rem; overflow-wrap: break-word; }
.direkt-block .direkt-block-grenze { grid-column: 1 / -1; }
.direkt-block-grenze dd { font-size: .9rem; line-height: 1.45; }
.direkt-block-kauf { margin-top: .8rem; }
.direkt-block-kauf .kaufen { width: 100%; text-align: center; }

/* Tablet und Handy: Karten statt Tabelle (gleiche Grenze in static/js/vergleich.js: schmal) */
@media (max-width: 66.49em) {
  .gesamt-rahmen { overflow: visible; }
  .gesamt-tabelle thead { display: none; }
  .gesamt-tabelle, .gesamt-tabelle tbody { display: block; }
  .gesamt-tabelle tbody { display: grid; gap: .8rem; }
  /* Karte als Flex mit Umbruch: Kopf = Name (minmax(0,1fr)) + Auswahl (auto), so breit wie ihr Text, nie über dem Namen.
     Ein unsichtbarer Umbruch (::before, order -1) schließt den Kopf ab, darunter je drei Werte, dann Packmaß und Knopf. */
  .gesamt-tabelle tbody tr { display: flex; flex-wrap: wrap; gap: .55rem .8rem; align-items: start;
    background: var(--papier); border: 1px solid var(--linie); border-radius: 5px; padding: .9rem 1rem 1rem; }
  .gesamt-tabelle tbody tr::before { content: ""; order: -1; flex: 0 0 100%; height: 0; margin-top: -.55rem; }
  .gesamt-tabelle tbody tr:hover { background: var(--papier); }
  .gesamt-tabelle tbody tr.gewaehlt, .gesamt-tabelle tbody tr:target { background: var(--flechte-hell); border-color: var(--kiefer); }
  .gesamt-tabelle *:is(th, td) { display: block; border: 0; padding: 0; min-width: 0; }
  .gt-modell { order: -3; flex: 1 1 0; align-self: center; font-size: 1.3rem; min-width: 0; overflow-wrap: break-word; }
  .gesamt-tabelle td.gt-wahl { order: -2; flex: 0 0 auto; align-self: center; width: auto; }
  .gesamt-tabelle td[data-label] { flex: 0 0 calc((100% - 1.6rem) / 3); }
  .gt-wahl label { display: inline-flex; gap: .45rem; align-items: center; font: 700 .98rem var(--display); color: var(--kiefer); white-space: nowrap; }
  .gt-wahl-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .gesamt-tabelle td[data-label]::before { content: attr(data-label); display: block; font-size: .78rem; line-height: 1.3; color: var(--daemmerung); }
  .gesamt-tabelle td[data-label] { font: 700 1.08rem/1.2 var(--display); }
  .gesamt-tabelle td[data-feld="packmass"] { order: 1; flex-basis: 100%; min-width: 0; }
  .gesamt-tabelle td.gt-kauf { order: 2; flex: 0 0 100%; text-align: left !important; }
  .gt-kauf .kaufen { max-width: none; width: 100%; text-align: center; white-space: nowrap; }
  .gt-kauf .kaufen-lang { display: inline; }
  .gt-kauf .kaufen-kurz { display: none; }
  .gesamt-tabelle tbody tr.gt-weiter { display: none; }
}
/* Tablet: zwei Karten nebeneinander */
@media (min-width: 40em) and (max-width: 66.49em) {
  .gesamt-tabelle tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-modell { font-size: 1.15rem; }
}
@media (max-width: 37.5em) {
  .direkt-3 { display: none !important; }
  .direkt-stapel { display: grid; gap: .8rem; }
}
@media (max-width: 35em) {
  .gesamt { border-width: 0; padding: 0; background: none; }
  .gesamt-filter { grid-template-columns: 1fr 1fr; padding: .9rem; }
  .gesamt-preis, .gesamt-sort, .gesamt-status { grid-column: 1 / -1; }
  .gesamt-preis label > span[aria-hidden] { min-width: 0; flex: 1; }
  .gesamt-preis div { display: grid; grid-template-columns: repeat(3, 1fr); }
  .direkt { padding: 1rem .8rem; }
  .direkt table, .direkt thead, .direkt tbody { display: block; }
  .direkt tr { display: grid; column-gap: .6rem; }
  .direkt-2 tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .direkt-3 tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .direkt thead th:first-child { display: none; }
  .direkt thead th { font-size: 1.05rem; padding: 0 0 .5rem; }
  .direkt tbody tr { border-bottom: 1px solid var(--linie); padding: .45rem 0; }
  .direkt tbody th { grid-column: 1 / -1; padding: 0 0 .15rem; border: 0; }
  .direkt tbody td { padding: 0; border: 0; font-size: .98rem; }
  .direkt .kaufen { font-size: .9rem; padding: .6rem 1.1rem .6rem .55rem; white-space: nowrap; }
  .direkt .kaufen-lang { display: none; }
  .direkt .kaufen-kurz { display: inline; }
  .direkt-grenze td { font-size: .84rem; }
  .direkt-mehr { font-size: .85rem; }
}
/* Im gestapelten Block ist Platz für den vollen Knopftext */
.direkt-block .kaufen-lang { display: inline; }
.direkt-block .kaufen-kurz { display: none; }
/* Desktop: vier Spalten (Tragkraft, Länge, Gewicht, Bauart / Sortieren doppelt breit, Preisklasse, Status) */
@media (min-width: 68.75em) {
  .gesamt-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gesamt-status { grid-column: span 1; }
}
/* Sehr wenig Platz in em (unter 320 px bei 16 px Schrift, also nur mit großer Browserschrift, z. B. 24 px bis 479 px):
   zwei statt drei Werte je Kartenzeile, damit die Preisklasse einzeilig bleibt; der Knopftext darf umbrechen */
@media (max-width: 19.99em) {
  .gesamt-tabelle td[data-label] { flex-basis: calc((100% - .8rem) / 2); }
  .gesamt-tabelle tbody { grid-template-columns: minmax(0, 1fr); }
  .gt-kauf .kaufen { white-space: normal; }
}
/* Sehr schmale Handys (320 px): Auswahlfelder etwas kompakter, damit kein Sortiereintrag abgeschnitten wird */
@media (max-width: 23.75em) {
  .gesamt-feld select { font-size: .94rem; padding-inline: .45rem; }
}