/* GKMB CSV to HTML
   Basis-Styling des Plugins. Farben, Abstände und Schriftgrößen kommen – sofern
   vorhanden – aus den CSS-Variablen des gkmb_template (variables.css), sonst
   greifen die Fallback-Werte.
   ========================================================================== */

.gkmb_csv2html,
.gkmb_csv2html form {
  display: grid;
  grid-gap: var(--g-gap-s, 0.75rem);
}

/* Während des Nachladens per fetch() */
.gkmb_csv2html.-loading {
  opacity: 0.6;
  transition: opacity 0.2s;
  pointer-events: none;
}

/* Filterbereich
   Jeder Filter ist eine Zelle desselben Rasters: Beschriftung, darunter das
   Feld. Ein Von-bis-Filter hat beide Felder nebeneinander, dazwischen ein
   Gedankenstrich – das ist eine Zeile statt vier.
   ========================================================================== */

/* Die Leiste, hinter der der Filter auf dem Handy verschwindet. Sie ist nur
   sichtbar, wenn das Plugin das Einklappen erlaubt und der Bildschirm schmal
   ist – sonst steht der Filter offen da wie eh und je. */
.gkmbcsvhtml_filtersummary {
  display: none;
}

.gkmb_csv2html.-collapsefilter .gkmbcsvhtml_filtersummary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: var(--g-gap-s, 0.75rem);
  border: 1px solid rgb(var(--c-neutral-light, 214, 214, 214));
  border-radius: var(--b-radius, 0);
  cursor: pointer;
  font-weight: var(--f-weight-sb, 600);
  list-style: none;
}

/* Safari zeigt den Aufklapppfeil sonst zusätzlich zum eigenen Zeichen. */
.gkmb_csv2html.-collapsefilter .gkmbcsvhtml_filtersummary::-webkit-details-marker {
  display: none;
}

.gkmb_csv2html.-collapsefilter .gkmbcsvhtml_filtersummarylabel::after {
  content: "\25BE";
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 0.15s ease;
}

.gkmb_csv2html.-collapsefilter .gkmbcsvhtml_filterbox[open] .gkmbcsvhtml_filtersummarylabel::after {
  transform: rotate(180deg);
}

.gkmb_csv2html.-collapsefilter .gkmbcsvhtml_filtersummarycount {
  font-weight: var(--f-weight-r, 400);
  font-variant-numeric: tabular-nums;
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

@media (prefers-reduced-motion: reduce) {
  .gkmb_csv2html.-collapsefilter .gkmbcsvhtml_filtersummarylabel::after {
    transition: none;
  }
}

.gkmbcsvhtml_filterarea {
  display: grid;
  grid-gap: var(--g-gap-s, 0.75rem);
}

.gkmbcsvhtml_filter {
  display: grid;
  grid-gap: 0.2rem;
  align-content: start;
}

.gkmbcsvhtml_filterlabel {
  font-weight: var(--f-weight-sb, 600);
}

.gkmbcsvhtml_filterrange {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 0.4rem;
  align-items: center;
}

.gkmbcsvhtml_filterrangedash {
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

.gkmbcsvhtml_textfield,
.gkmbcsvhtml_rangefield,
.gkmbcsvhtml_selectitemvalue {
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgb(var(--c-neutral-light, 215, 215, 215));
  border-radius: var(--b-radius-s, 3px);
  color: rgb(var(--c-neutral-darker, 41, 41, 41));
  font-family: inherit;
  font-size: var(--f-size, 100%);
}

.gkmbcsvhtml_textfield:focus,
.gkmbcsvhtml_rangefield:focus,
.gkmbcsvhtml_selectitemvalue:focus {
  outline: 2px solid rgb(var(--c-primary, 190, 24, 25));
  outline-offset: 1px;
}

/* Absende- und Zurücksetzen-Button
   ========================================================================== */

.gkmbcsvhtml_filterbuttonarea {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap-s, 0.75rem);
}

.gkmbcsvhtml_filterbutton,
.gkmbcsvhtml_resetbutton {
  padding: 0.5rem 1.5rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-family: inherit;
  font-size: var(--f-size, 100%);
  font-weight: var(--f-weight-sb, 600);
  cursor: pointer;
}

.gkmbcsvhtml_resetbutton {
  background: transparent;
  color: rgb(var(--c-primary, 190, 24, 25));
}

@media (hover: hover) {
  .gkmbcsvhtml_filterbutton:hover {
    border-color: rgb(var(--c-primary-dark, 146, 24, 25));
    background: rgb(var(--c-primary-dark, 146, 24, 25));
  }

  .gkmbcsvhtml_resetbutton:hover {
    background: rgb(var(--c-primary, 190, 24, 25));
    color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  }
}

/* Einheit: mm oder inch
   Zwei Buttons nebeneinander wie ein Umschalter; der aktive ist gefüllt.
   ========================================================================== */

.gkmbcsvhtml_unitswitch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: var(--g-gap-s, 0.75rem) 0;
}

.gkmbcsvhtml_unitlabel {
  margin-right: var(--g-gap-s, 0.75rem);
  font-weight: var(--f-weight-sb, 600);
}

.gkmbcsvhtml_unitbutton {
  min-width: 4rem;
  padding: 0.35rem 1rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  background: transparent;
  color: rgb(var(--c-primary, 190, 24, 25));
  font-family: inherit;
  font-size: var(--f-size, 100%);
  font-weight: var(--f-weight-sb, 600);
  cursor: pointer;
}

.gkmbcsvhtml_unitbutton:first-of-type {
  border-radius: var(--b-radius-s, 3px) 0 0 var(--b-radius-s, 3px);
}

.gkmbcsvhtml_unitbutton:last-of-type {
  margin-left: -1px;
  border-radius: 0 var(--b-radius-s, 3px) var(--b-radius-s, 3px) 0;
}

.gkmbcsvhtml_unitbutton.-active {
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  cursor: default;
}

.gkmbcsvhtml_unitbutton:focus-visible {
  outline: 2px solid rgb(var(--c-primary, 190, 24, 25));
  outline-offset: 2px;
}

@media (hover: hover) {
  .gkmbcsvhtml_unitbutton:not(.-active):hover {
    background: rgb(var(--c-neutral-lighter, 240, 240, 240));
  }
}

/* Trefferzahl, aktive Filter, „Alle Treffer übernehmen“, Spaltenwahl
   Eine Zeile über der Tabelle. Jeder gesetzte Filter ist ein Etikett; das x
   hebt genau diesen Filter auf.
   ========================================================================== */

.gkmbcsvhtml_resultbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--g-gap-s, 0.75rem);
  align-items: center;
}

.gkmbcsvhtml_resultcount {
  margin: 0;
  font-weight: var(--f-weight-sb, 600);
  font-variant-numeric: tabular-nums;
}

.gkmbcsvhtml_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* list-style auch am li: Projekt-Stylesheets setzen den Punkt oft dort */
.gkmbcsvhtml_chip {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gkmbcsvhtml_chip::before {
  content: none;
}

.gkmbcsvhtml_chipbutton {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.2rem 0.4rem 0.2rem 0.7rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: 999px;
  background: rgb(var(--c-neutral-lightest, 255, 255, 255));
  color: rgb(var(--c-neutral-darker, 41, 41, 41));
  font-family: inherit;
  font-size: var(--f-size-s-1, 88%);
  line-height: 1.3;
  cursor: pointer;
}

.gkmbcsvhtml_chiplabel {
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

.gkmbcsvhtml_chipvalue {
  font-weight: var(--f-weight-sb, 600);
}

.gkmbcsvhtml_chipcross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-size: 1.1em;
  line-height: 1;
}

.gkmbcsvhtml_chipbutton:focus-visible,
.gkmbcsvhtml_addall:focus-visible,
.gkmbcsvhtml_columnchoosersummary:focus-visible {
  outline: 2px solid rgb(var(--c-primary, 190, 24, 25));
  outline-offset: 2px;
}

.gkmbcsvhtml_resultactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap-s, 0.75rem);
  align-items: center;
  margin-left: auto;
}

.gkmbcsvhtml_resultactions:empty {
  display: none;
}

.gkmbcsvhtml_addall {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 1rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-family: inherit;
  font-size: var(--f-size, 100%);
  font-weight: var(--f-weight-sb, 600);
  cursor: pointer;
}

.gkmbcsvhtml_addalldone {
  margin: 0;
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

/* Das Menü der Spalten: ein details, das über der Tabelle aufklappt */

.gkmbcsvhtml_columnchooser {
  position: relative;
}

.gkmbcsvhtml_columnchooser[hidden] {
  display: none;
}

.gkmbcsvhtml_columnchoosersummary {
  padding: 0.4rem 1rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  color: rgb(var(--c-primary, 190, 24, 25));
  font-weight: var(--f-weight-sb, 600);
  list-style: none;
  cursor: pointer;
}

.gkmbcsvhtml_columnchoosersummary::-webkit-details-marker {
  display: none;
}

.gkmbcsvhtml_columnchoosersummary::after {
  content: "\25BE";
  margin-left: 0.4rem;
}

.gkmbcsvhtml_columnchooserlist {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 0.3rem;
  min-width: 14rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(var(--c-neutral-light, 215, 215, 215));
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-neutral-lightest, 255, 255, 255));
  box-shadow: 0 6px 18px rgb(0 0 0 / 15%);
}

.gkmbcsvhtml_columnchooseritem {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
}

.gkmbcsvhtml_columnchooserreset {
  justify-self: start;
  margin-top: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(var(--c-primary, 190, 24, 25));
  font-family: inherit;
  font-size: var(--f-size-s-1, 88%);
  text-decoration: underline;
  cursor: pointer;
}

/* Eine Spalte, die der Besucher (oder das Plugin) ausgeblendet hat */

.gkmb_csv2html .ce-table .-columnhidden {
  display: none;
}

@media (hover: hover) {
  .gkmbcsvhtml_chipbutton:hover {
    background: rgb(var(--c-neutral-lighter, 240, 240, 240));
  }

  .gkmbcsvhtml_addall:hover {
    border-color: rgb(var(--c-primary-dark, 146, 24, 25));
    background: rgb(var(--c-primary-dark, 146, 24, 25));
  }
}

/* Suchbegriff in der Tabelle */

.gkmbcsvhtml_mark {
  padding: 0 0.05em;
  border-radius: 2px;
  background: rgb(var(--c-highlight, 255, 230, 120));
  color: inherit;
}

/* Hinweis bei null Treffern
   ========================================================================== */

.gkmbcsvhtml_emptyhint {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: 1rem 1.2rem;
  border: 1px solid rgb(var(--c-neutral-light, 215, 215, 215));
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-neutral-lighter, 240, 240, 240));
}

.gkmbcsvhtml_emptyhint p {
  margin: 0;
}

.gkmbcsvhtml_emptyhinttitle {
  font-weight: var(--f-weight-sb, 600);
}

.gkmbcsvhtml_emptyhintlist {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gkmbcsvhtml_emptyhintlist li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gkmbcsvhtml_emptyhintlist li::before {
  content: none;
}

.gkmbcsvhtml_emptyhintbutton {
  padding: 0.4rem 1rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-family: inherit;
  font-size: var(--f-size, 100%);
  text-align: left;
  cursor: pointer;
}

@media (hover: hover) {
  .gkmbcsvhtml_emptyhintbutton:hover {
    border-color: rgb(var(--c-primary-dark, 146, 24, 25));
    background: rgb(var(--c-primary-dark, 146, 24, 25));
  }
}

/* Rückmeldung nach einem Klick auf den Anfragekorb
   Unten in der Mitte über der Seite, wie man es von Apps kennt. Ohne
   JavaScript bleibt sie stehen, mit ihm blendet sie nach einigen Sekunden aus.
   ========================================================================== */

.gkmbcsvhtml_notice {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  z-index: 1000;
  display: flex;
  gap: 1rem;
  align-items: center;
  max-width: calc(100vw - 2rem);
  padding: 0.7rem 0.8rem 0.7rem 1.1rem;
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-neutral-darker, 41, 41, 41));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  box-shadow: 0 6px 18px rgb(0 0 0 / 25%);
  transform: translateX(-50%);
  transition: opacity 0.3s, transform 0.3s;
}

.gkmbcsvhtml_notice.-hidden {
  opacity: 0;
  transform: translate(-50%, 0.5rem);
}

.gkmbcsvhtml_notice[hidden] {
  display: none;
}

.gkmbcsvhtml_noticeundo {
  padding: 0.3rem 0.8rem;
  border: 1px solid currentColor;
  border-radius: var(--b-radius-s, 3px);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--f-size, 100%);
  font-weight: var(--f-weight-sb, 600);
  white-space: nowrap;
  cursor: pointer;
}

.gkmbcsvhtml_noticeclose {
  padding: 0 0.3rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.gkmbcsvhtml_noticeclose[hidden] {
  display: none;
}

.gkmbcsvhtml_noticeundo:focus-visible,
.gkmbcsvhtml_noticeclose:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Die Plugin-Klasse -loading nimmt Klicks weg - die Rückmeldung darf während
   des Nachladens nicht mitverblassen, sie steht schließlich über der Seite. */
.gkmb_csv2html.-loading .gkmbcsvhtml_notice {
  opacity: 0;
}

@media (hover: hover) {
  .gkmbcsvhtml_noticeundo:hover {
    background: rgb(var(--c-neutral-lightest, 255, 255, 255));
    color: rgb(var(--c-neutral-darker, 41, 41, 41));
  }
}

@media (prefers-reduced-motion: reduce) {
  .gkmbcsvhtml_notice {
    transition: none;
  }
}

/* Feststehende Spalten
   Beim seitlichen Scrollen bleiben die ersten Spalten stehen. Das JavaScript
   misst ihre Breiten und setzt die Abstände; ohne es steht wenigstens die erste
   Spalte fest. Der Hintergrund ist bewusst schwach gewichtet (:where), damit
   die Zebrastreifen eines Projekts gewinnen – nur wo keine sind, braucht die
   Zelle einen eigenen, damit der Inhalt nicht durchscheint.
   ========================================================================== */

.gkmb_csv2html .ce-table[data-sticky]:not([data-sticky="0"]):not(.-stickyready) > * > tr > :first-child,
.gkmb_csv2html .ce-table .gkmbcsvhtml_sticky {
  position: sticky;
  left: 0;
  z-index: 1;
}

.gkmb_csv2html .ce-table th.gkmbcsvhtml_sticky,
.gkmb_csv2html .ce-table[data-sticky]:not([data-sticky="0"]):not(.-stickyready) > thead > tr > :first-child {
  z-index: 3;
}

.gkmb_csv2html :where(.ce-table td.gkmbcsvhtml_sticky),
.gkmb_csv2html :where(.ce-table[data-sticky]:not([data-sticky="0"]):not(.-stickyready) > tbody > tr > td:first-child) {
  background: rgb(var(--c-neutral-lightest, 255, 255, 255));
}

.gkmb_csv2html .ce-table .gkmbcsvhtml_sticky.-last {
  box-shadow: 6px 0 6px -6px rgb(0 0 0 / 25%);
}

/* Seitenbrowser
   Aufbau und Werte wie im Projekt-Template (ul.f3-widget-paginator), damit die
   Darstellung mit und ohne gkmb_template gleich ist. Die Seiten sind Buttons,
   damit Filter und Sortierung beim Seitenwechsel erhalten bleiben.
   ========================================================================== */

.gkmb_csv2html ul.f3-widget-paginator {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.gkmb_csv2html ul.f3-widget-paginator li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 5px 5px 0;
  background: rgb(var(--c-neutral-lighter, 240, 240, 240));
  list-style-type: none;
}

.gkmb_csv2html ul.f3-widget-paginator button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--f-size, 100%);
  cursor: pointer;
}

.gkmb_csv2html ul.f3-widget-paginator li.current {
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
}

.gkmb_csv2html ul.f3-widget-paginator li.disabled {
  background: none;
}

@media (hover: hover) {
  .gkmb_csv2html ul.f3-widget-paginator li:not(.disabled):hover {
    background: rgb(var(--c-primary, 190, 24, 25));
    color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  }
}

/* Tabelle
   ========================================================================== */

.gkmb_csv2html .ce-table-scroll {
  overflow-x: auto;
}

.gkmb_csv2html .ce-table {
  width: 100%;
  border-collapse: collapse;
}

.gkmb_csv2html .ce-table td,
.gkmb_csv2html .ce-table th {
  white-space: nowrap;
}

/* gkmb_base gibt jeder Zelle einer ce-table 150px Mindestbreite. Das ist für
   eine Inhaltstabelle mit wenigen Spalten richtig, zwingt eine Lagerliste mit
   vierzehn Spalten aber auf über 2000px – hier zählt die Breite des Inhalts.

   Maße untereinander lassen sich nur vergleichen, wenn die Ziffern gleich
   breit sind: 0,410 über 0,045 über 1,200. Mit proportionalen Ziffern steht
   jede Zeile ein paar Pixel versetzt und das Auge sucht die Kommastelle,
   statt die Werte zu lesen. */
.gkmb_csv2html .ce-table td {
  min-width: inherit;
  font-variant-numeric: tabular-nums;
}

/* Zusatzinformationen
   ========================================================================== */

.gkmb_csv2html .lastChange,
.gkmb_csv2html .copyright {
  font-size: var(--f-size-s-1, 88%);
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

/* Dateilink in einer Zelle
   Ein Zellenwert, der auf eine vorhandene Datei zeigt (z. B. ein Datenblatt),
   wird als Download-Link mit Icon dargestellt statt als Text.
   ========================================================================== */

.gkmbcsvhtml_filelink {
  display: inline-flex;
  color: rgb(var(--c-primary, 190, 24, 25));
}

.gkmbcsvhtml_fileicon {
  width: 1.35em;
  height: 1.35em;
}

@media (hover: hover) {
  .gkmbcsvhtml_filelink:hover {
    color: rgb(var(--c-primary-dark, 146, 24, 25));
  }
}

/* Anfragekorb
   Spalte in der Liste, Anfrage-Button mit Zähler und das eigene Zähler-Plugin
   für einen Platz außerhalb der Liste (z. B. neben dem Hauptmenü).
   ========================================================================== */

.gkmbcsvhtml_basketbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap-s, 0.75rem);
  align-items: center;
}

.gkmbcsvhtml_basketlink {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 1.5rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-weight: var(--f-weight-sb, 600);
  text-decoration: none;
}

.gkmbcsvhtml_basketicon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* Symbol mit der Anzahl als Plakette an der oberen rechten Ecke */

.gkmbcsvhtml_basketsymbol {
  position: relative;
  display: inline-flex;
  flex: none;
}

.gkmbcsvhtml_basketcount {
  position: absolute;
  top: 0;
  right: 0;
  /* Die Verschiebung bezieht sich auf die Plakette selbst: sie sitzt damit zu
     knapp der Hälfte außerhalb des Symbols und verdeckt es nicht. */
  transform: translate(45%, -45%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45em;
  height: 1.45em;
  padding: 0 0.25em;
  border-radius: 999px;
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-size: 0.6em;
  font-weight: var(--f-weight-sb, 600);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Im Tabellenkopf steht die Plakette auf der Markenfarbe – dort umgekehrt */

.gkmb_csv2html .ce-table th .gkmbcsvhtml_basketcount {
  background: rgb(var(--c-neutral-lightest, 255, 255, 255));
  color: rgb(var(--c-primary, 190, 24, 25));
}

@media (hover: hover) {
  a.gkmbcsvhtml_basketlink:hover {
    border-color: rgb(var(--c-primary-dark, 146, 24, 25));
    background: rgb(var(--c-primary-dark, 146, 24, 25));
  }
}

/* Sortieren über die Spaltenüberschrift
   Der Pfeil zeigt blass an, dass sich sortieren lässt, und deutlich, wonach
   gerade sortiert ist. Ein zweiter Klick dreht die Richtung um.
   ========================================================================== */

.gkmb_csv2html .ce-table th.gkmbcsvhtml_sortable {
  padding: 0;
}

.gkmbcsvhtml_sort {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  padding: 0.3rem 0.7rem;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.gkmbcsvhtml_sortarrow::before {
  content: '\2195';
  opacity: 0.4;
}

.gkmbcsvhtml_sortable.-sorted .gkmbcsvhtml_sortarrow::before {
  opacity: 1;
}

.gkmbcsvhtml_sortable.-asc .gkmbcsvhtml_sortarrow::before {
  content: '\2191';
}

.gkmbcsvhtml_sortable.-desc .gkmbcsvhtml_sortarrow::before {
  content: '\2193';
}

.gkmbcsvhtml_sort:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

@media (hover: hover) {
  .gkmbcsvhtml_sort:hover .gkmbcsvhtml_sortarrow::before {
    opacity: 1;
  }
}

/* Der Weg zur Anfrage steht im Kopf der eigenen Spalte */

.gkmbcsvhtml_baskethead {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.gkmbcsvhtml_baskethead .gkmbcsvhtml_basketicon {
  width: 1.35em;
  height: 1.35em;
}

.gkmbcsvhtml_baskethead {
  /* Platz für die Plakette, damit sie nicht am Zellenrand abgeschnitten wird */
  padding: 0.25em 0.35em 0 0;
}

/* Spalte in der Tabelle
   Sie bleibt beim seitlichen Scrollen am rechten Rand stehen – bei Listen mit
   vielen Spalten wäre sie sonst aus dem Bild geschoben. Dafür braucht die Zelle
   einen eigenen, deckenden Hintergrund; Projekte mit anderer Tabellengestaltung
   überschreiben ihn in ihrer csv2html.css.
   ========================================================================== */

.gkmb_csv2html .ce-table .gkmbcsvhtml_basketcolumn {
  position: sticky;
  right: 0;
  z-index: 1;
  width: 1%;
  /* nur so breit wie das Symbol – die Spalte trägt keinen Text */
  padding-right: 0.35rem;
  padding-left: 0.35rem;
  text-align: center;
  background: rgb(var(--c-neutral-lighter, 240, 240, 240));
  /* Trennlinie zum durchlaufenden Inhalt, dazu ein schmaler Schatten. Die Linie
     ist bewusst ein innenliegender Schatten und kein border: Rahmen gehören bei
     border-collapse der Tabelle, nicht der Zelle – bei festgehaltenen Zellen
     lassen Browser sie deshalb gerne weg. */
  box-shadow:
    inset 2px 0 0 0 rgb(var(--c-neutral-lightest, 255, 255, 255)),
    -6px 0 6px -6px rgb(0 0 0 / 25%);
}

.gkmb_csv2html .ce-table th.gkmbcsvhtml_basketcolumn {
  z-index: 2;
  background: rgb(var(--c-primary, 190, 24, 25));
}

.gkmbcsvhtml_baskettoggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid rgb(var(--c-neutral-light, 215, 215, 215));
  border-radius: var(--b-radius-s, 3px);
  background: transparent;
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
  cursor: pointer;
}

.gkmbcsvhtml_baskettoggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Beide Symbole stehen im Markup, sichtbar ist das des aktuellen Zustands. */

.gkmbcsvhtml_baskettoggleicon {
  display: flex;
}

.gkmbcsvhtml_baskettoggleicon.-check,
.gkmbcsvhtml_baskettoggle.-in .gkmbcsvhtml_baskettoggleicon.-basket {
  display: none;
}

.gkmbcsvhtml_baskettoggle.-in .gkmbcsvhtml_baskettoggleicon.-check {
  display: flex;
}

.gkmbcsvhtml_baskettoggle.-in {
  border-color: rgb(var(--c-primary, 190, 24, 25));
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
}

.gkmbcsvhtml_baskettoggle:focus-visible {
  outline: 2px solid rgb(var(--c-primary, 190, 24, 25));
  outline-offset: 1px;
}

/* Beschriftungen, die im Markup stehen bleiben, aber keinen Platz einnehmen:
   die der Symbole und die Spaltenüberschriften, die im Plugin verborgen sind.
   Screenreader lesen sie weiterhin vor. */

.gkmbcsvhtml_hiddenlabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (hover: hover) {
  .gkmbcsvhtml_baskettoggle:hover {
    border-color: rgb(var(--c-primary, 190, 24, 25));
    background: rgb(var(--c-primary, 190, 24, 25));
    color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  }

  /* ein bereits gemerkter Artikel wird beim Zeigen dunkler, damit der Klick
     auch dort eine Rückmeldung hat */
  .gkmbcsvhtml_baskettoggle.-in:hover {
    border-color: rgb(var(--c-primary-dark, 146, 24, 25));
    background: rgb(var(--c-primary-dark, 146, 24, 25));
  }
}

/* Seite des Anfragekorbs
   ========================================================================== */

.gkmbcsvhtml_basketempty {
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

.gkmbcsvhtml_basketactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap-s, 0.75rem);
  align-items: center;
  justify-content: space-between;
}

.gkmbcsvhtml_basketback {
  font-weight: var(--f-weight-sb, 600);
}

.gkmbcsvhtml_basketclear {
  padding: 0.5rem 1.5rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  background: transparent;
  color: rgb(var(--c-primary, 190, 24, 25));
  font-family: inherit;
  font-size: var(--f-size, 100%);
  font-weight: var(--f-weight-sb, 600);
  cursor: pointer;
}

.gkmbcsvhtml_basketinquiry {
  padding: 0.5rem 1.5rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-weight: var(--f-weight-sb, 600);
  text-decoration: none;
}

.gkmbcsvhtml_basketremove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgb(var(--c-neutral-light, 215, 215, 215));
  border-radius: var(--b-radius-s, 3px);
  background: transparent;
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
  cursor: pointer;
}

.gkmbcsvhtml_basketremoveicon {
  width: 1.25rem;
  height: 1.25rem;
}

.gkmbcsvhtml_basketremove:focus-visible,
.gkmbcsvhtml_basketclear:focus-visible {
  outline: 2px solid rgb(var(--c-primary, 190, 24, 25));
  outline-offset: 1px;
}

@media (hover: hover) {
  .gkmbcsvhtml_basketremove:hover,
  .gkmbcsvhtml_basketclear:hover {
    border-color: rgb(var(--c-primary, 190, 24, 25));
    background: rgb(var(--c-primary, 190, 24, 25));
    color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  }
}

/* Zähler-Plugin außerhalb der Liste
   Kein eigener Button, sondern nur Symbol und Zahl – es sitzt in der Regel in
   einer Menüzeile und soll sich deren Gestaltung unterordnen.
   ========================================================================== */

.gkmb_csv2html_counter .gkmbcsvhtml_basketlink {
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  color: inherit;
}

.gkmb_csv2html_counter .gkmbcsvhtml_basketlink {
  gap: 0.45rem;
}

@media (hover: hover) {
  .gkmb_csv2html_counter a.gkmbcsvhtml_basketlink:hover {
    background: none;
    color: rgb(var(--c-primary, 190, 24, 25));
  }
}

/* Anfrageformular
   ========================================================================== */

.gkmbcsvhtml_inquirylayout {
  display: grid;
  grid-gap: var(--g-gap, 1.5rem);
}

.gkmbcsvhtml_inquiryfields {
  display: grid;
  grid-gap: var(--g-gap-s, 0.75rem);
}

.gkmbcsvhtml_inquirylabel {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: var(--f-weight-sb, 600);
}

.gkmbcsvhtml_inquiryrequired {
  margin-left: 0.15em;
  color: rgb(var(--c-primary, 190, 24, 25));
}

.gkmbcsvhtml_inquiryinput {
  width: 100%;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgb(var(--c-neutral-light, 215, 215, 215));
  border-radius: var(--b-radius-s, 3px);
  color: rgb(var(--c-neutral-darker, 41, 41, 41));
  font-family: inherit;
  font-size: var(--f-size, 100%);
}

.gkmbcsvhtml_inquiryinput:focus {
  outline: 2px solid rgb(var(--c-primary, 190, 24, 25));
  outline-offset: 1px;
}

.gkmbcsvhtml_inquiryfield.-error .gkmbcsvhtml_inquiryinput,
.gkmbcsvhtml_inquiryother.-error .gkmbcsvhtml_inquiryinput {
  border-color: rgb(var(--c-primary, 190, 24, 25));
}

/* "Sonstiges Land": das Textfeld unter der Länderliste */
.gkmbcsvhtml_inquiryother {
  margin-top: var(--g-gap-s, 0.75rem);
}

.gkmbcsvhtml_inquiryother[hidden] {
  display: none;
}

.gkmbcsvhtml_inquiryfielderror,
.gkmbcsvhtml_inquiryerror {
  margin: 0.3rem 0 0;
  color: rgb(var(--c-primary, 190, 24, 25));
  font-size: var(--f-size-s-1, 88%);
}

.gkmbcsvhtml_inquiryerror {
  padding: 0.7rem 1rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  font-size: var(--f-size, 100%);
}

.gkmbcsvhtml_inquirycheckbox {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.gkmbcsvhtml_inquiryactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap-s, 0.75rem);
  align-items: center;
}

.gkmbcsvhtml_inquirysubmit {
  padding: 0.5rem 1.5rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-primary, 190, 24, 25));
  color: rgb(var(--c-neutral-lightest, 255, 255, 255));
  font-family: inherit;
  font-size: var(--f-size, 100%);
  font-weight: var(--f-weight-sb, 600);
  cursor: pointer;
}

.gkmbcsvhtml_inquiryhint,
.gkmbcsvhtml_inquirysummary {
  font-size: var(--f-size-s-1, 88%);
}

/* Captcha, sofern in der Extension-Konfiguration eingeschaltet */
.gkmbcsvhtml_inquirycaptcha {
  min-height: 78px;
}

/* Das Feld gegen automatische Programme: für Menschen unsichtbar, für
   Bildschirmleser ohnehin ausgenommen (aria-hidden). */

.gkmbcsvhtml_inquirytrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.gkmbcsvhtml_inquirysummary {
  padding: 0.7rem 1rem 0.9rem;
  background: rgb(var(--c-neutral-lighter, 240, 240, 240));
  border-radius: var(--b-radius-s, 3px);
}

.gkmbcsvhtml_inquirysummarytitle {
  margin: 0 0 0.7rem;
}

/* Ein Artikel ist ein gerahmter Block, keine Aufzählung: Überschrift mit der
   Nummer in Klammern, darunter die Werte mit senkrechten Strichen getrennt. */

.gkmbcsvhtml_inquiryarticle {
  padding: 0.35rem 0.7rem 0.45rem;
  border-radius: var(--b-radius-s, 3px);
  background: rgb(var(--c-neutral-lightest, 255, 255, 255));
}

.gkmbcsvhtml_inquiryarticle + .gkmbcsvhtml_inquiryarticle {
  margin-top: 0.5rem;
}

.gkmbcsvhtml_inquiryarticlename {
  margin: 0;
  font-weight: var(--f-weight-sb, 600);
}

.gkmbcsvhtml_inquiryarticlevalues {
  margin: 0.15rem 0 0;
  color: rgb(var(--c-neutral-dark, 74, 74, 74));
}

.gkmbcsvhtml_inquiryarticleseparator {
  margin: 0 0.4em;
  opacity: 0.5;
}

.gkmbcsvhtml_inquirysummarycount {
  margin: 0.7rem 0 0;
  font-weight: var(--f-weight-sb, 600);
}

.gkmbcsvhtml_inquirysent {
  padding: 0.7rem 1rem;
  border: 1px solid rgb(var(--c-primary, 190, 24, 25));
  border-radius: var(--b-radius-s, 3px);
  font-weight: var(--f-weight-sb, 600);
}

@media (hover: hover) {
  .gkmbcsvhtml_inquirysubmit:hover {
    border-color: rgb(var(--c-primary-dark, 146, 24, 25));
    background: rgb(var(--c-primary-dark, 146, 24, 25));
  }
}

@media (min-width: 768px) {
  .gkmbcsvhtml_filterarea {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Breite Bildschirme haben Platz genug: Der Filter steht offen, die Leiste
     zum Aufklappen wird nicht gebraucht. */
  .gkmb_csv2html.-collapsefilter .gkmbcsvhtml_filtersummary {
    display: none;
  }

  /* Formular und Auswahl nebeneinander */
  .gkmbcsvhtml_inquirylayout {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}


@media (min-width: 1080px) {
  .gkmbcsvhtml_filterarea {
    grid-template-columns: repeat(3, 1fr);
  }
}