/* ==========================================================================
   FONTS
   Drop your own font files into assets/fonts/ and update the paths below.
   Drogowskaz Engschrift is used here as the display/headline face.
   Falls back to a clean monospace stack if the file isn't present yet.
   ========================================================================== */

@font-face {
  font-family: "Drogowskaz Engschrift";
  /* Reihenfolge = Vorrang: woff2 (24 KB) vor woff (32 KB) vor ttf (64 KB).
     Der Browser nimmt das erste Format, das er versteht. */
  src: url("assets/fonts/DrogowskazEngschrift.woff2") format("woff2"),
       url("assets/fonts/DrogowskazEngschrift.woff")  format("woff"),
       url("assets/fonts/DrogowskazEngschrift.ttf")   format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Drogowskaz Engschrift", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Courier New", monospace;

  /* Warmes Papierbeige statt Reinweiss. Der Unterschied ist klein, die Wirkung
     nicht: die weissen Heftseiten im Flipbook wirken dadurch wie Blaetter, die
     auf einer Flaeche liegen, statt wie ein Loch im Layout. */
  --color-bg: #eeeeea;
  --color-fg: #000000;
  --color-fg-muted: #6b6b6b;
  --color-line: #dcdcd6;
  --color-hover: #e5e5df;
  --color-paper: #ffffff;   /* die Heftseiten selbst bleiben weiss */

  --header-height: 44px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-display);
  height: 100%;
  overflow: hidden; /* the two panels handle their own scroll */
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg);
  z-index: 100;
}

.marke {
  display: flex;
  align-items: center;
  gap: 10px;
}

.marke-logo {
  display: block;
  width: auto;
  height: calc(var(--header-height) - 14px);
}

.marke-titel {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}

.header-nav {
  display: flex;
  gap: 20px;
  font-size: 12px;
  text-transform: lowercase;
}

.header-nav a {
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.header-nav a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Standcode — nur waehrend der Bauphase. Vor dem Livegang entfernen. */
.standcode {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  color: var(--color-fg-muted);
  cursor: default;
}

/* ==========================================================================
   LAYOUT — two independently scrollable panels
   ========================================================================== */

.layout {
  display: flex;
  margin-top: var(--header-height);
  height: calc(100vh - var(--header-height));
}

.index-panel {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* hide scrollbars visually but keep them functional, matches the reference's clean look */
.index-panel::-webkit-scrollbar {
  width: 6px;
}
.index-panel::-webkit-scrollbar-thumb {
  background: var(--color-line);
}

.index-panel {
  flex: 0 0 42%;
  border-right: 1px solid var(--color-line);
  padding: 24px 20px 80px 20px;
}

/* ==========================================================================
   INDEX LIST
   ========================================================================== */

.index-list {
  display: flex;
  flex-direction: column;
}

.index-row {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 16px;
  padding: 3px 6px;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 2px;

  /* Button-Reset: anlesbare Zeilen sind <button>, die uebrigen <div>.
     Beide muessen identisch aussehen. */
  width: 100%;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  appearance: none;
}

/* Nur Beitraege, die in der Leseprobe vorkommen, sind anklickbar. Der Rest
   ist Inhaltsverzeichnis: er zeigt, was im Heft steht, ohne es zu zeigen —
   und tritt dafuer leicht zurueck. */
.index-row.ist-anlesbar {
  cursor: pointer;
}

.index-row:not(.ist-anlesbar) {
  opacity: 0.7;   /* 23.08.2026: von 0.55 angehoben — der Unterschied soll da sein, aber leiser */
}

.index-row.ist-anlesbar:hover {
  background: var(--color-hover);
}

.index-row.ist-anlesbar:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: -2px;
}

/* Den Punkt-Marker vor anlesbaren Zeilen gab es bis 23.08.2026 — er sollte den
   Unterschied auch ohne Maus zeigen. Seit nicht anlesbare Zeilen zuruecktreten
   (oben), ist der Unterschied auf einen Blick da, und die Redaktion wollte den
   Punkt nicht. Ohne ihn stehen alle Titel buendig am linken Rand. */

/* Die Titelspalte besteht aus dem Text, der sich verschieben laesst, und —
   fest am rechten Spaltenrand, immer sichtbar — der Serienmarke, falls es eine
   gibt. Stuende die Marke einfach hinter dem Text, verschwaende sie bei langen
   Titeln hinter dem Zellenrand; so stehen die Marken untereinander buendig. */
.index-row .col-title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  /* Der rechte Rand der Titelspalte reicht 6 px in die Spaltenluecke hinein:
     so steht der Titel 14 px von den Seitenzahlen weg (Redaktion, 23.08.2026;
     das Raster allein gaebe 20 px, seit die Seitenzelle 4 px eingerueckt ist).
     Raster und Nachbarspalten bleiben, wie sie sind. */
  margin-right: -6px;
}

.index-row .col-titeltext {
  flex: 1 1 auto;
  min-width: 0;
}

/* Zeilen, die weder Titel noch Gattung haben — sie zeigen nur ein Gedankenstrich. */
.col-titeltext.ist-offen {
  color: var(--color-fg-muted);
}

/* Die Gattung als kleine Marke am rechten Rand der Titelspalte — Zeichnung,
   Fotografie, Liste … und ebenso die Serien, die die Redaktion mit # kennzeichnet
   (#Sexkolumne, #onRepeat). Hairline-Rahmen wie der Standcode, gedaempft, kein
   Akzent. Fest am Spaltenrand, damit sie auch bei langen Titeln sichtbar bleibt
   und die Marken ueber die Zeilen buendig stehen. */
.col-gattung {
  display: inline-block;
  flex: none;
  padding: 0 5px;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-fg-muted);
  vertical-align: 1px;
}

.index-leer,
.book-fehler {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-fg-muted);
  max-width: 320px;
}

.book-fehler {
  text-align: center;
}

/* Titel und Namen, die nicht in ihre Spalte passen, werden nicht mit „…"
   abgeschnitten, sondern lassen sich in der Zelle waagerecht verschieben —
   dieselbe Logik wie im Ausgaben-Menue, nur leiser: ein schmales Ausblenden
   an der Kante, an der es weitergeht, keine Pfeile. Trackpad und Finger
   schieben von selbst, die Maus durch Ziehen (script.js). Die Klassen
   .schnitt-links / .schnitt-rechts setzt script.js nur fuer Zellen, die
   tatsaechlich ueber den Rand laufen. */
.index-row .col-titeltext,
.index-row .col-cat,
.index-row .col-names {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.index-row .col-titeltext::-webkit-scrollbar,
.index-row .col-cat::-webkit-scrollbar,
.index-row .col-names::-webkit-scrollbar {
  display: none;
}

.index-row .schnitt-rechts {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 14px);
          mask-image: linear-gradient(to left, transparent, #000 14px);
}

.index-row .schnitt-links {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14px);
          mask-image: linear-gradient(to right, transparent, #000 14px);
}

.index-row .schnitt-links.schnitt-rechts {
  -webkit-mask-image: linear-gradient(to right,
                        transparent, #000 14px, #000 calc(100% - 14px), transparent);
          mask-image: linear-gradient(to right,
                        transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

/* Seitenzahl und Name in derselben Schwaerze wie der Titel — entschieden am
   23.08.2026 (vorher gedaempft). Der Unterschied zwischen anlesbar und nicht
   kommt allein aus der Zuruecknahme der ganzen Zeile. */
.index-row .col-cat,
.index-row .col-names {
  color: inherit;
}

/* Die Seitenspalte: das Raster bleibt 1fr 60px 1fr, damit Titel und Name
   keinen Pixel wandern — nur die Zelle selbst beginnt 4 px weiter rechts und
   ist noch 30 px breit (Redaktion: 10 px waren zu weit, 0 zu wenig). Eine
   Seitenzahl passt, bei Serien („012, 015, …") schiebt sich der Rest; mehr
   soll man hier gar nicht sehen. Das Ausblenden ist schmaler als in den
   breiten Spalten, sonst bliebe von 30 px nichts. */
.index-row .col-cat {
  margin-left: 4px;
  margin-right: 26px;
}

.index-row .col-cat.schnitt-rechts {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 8px);
          mask-image: linear-gradient(to left, transparent, #000 8px);
}

.index-row .col-cat.schnitt-links {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8px);
          mask-image: linear-gradient(to right, transparent, #000 8px);
}

.index-row .col-cat.schnitt-links.schnitt-rechts {
  -webkit-mask-image: linear-gradient(to right,
                        transparent, #000 8px, #000 calc(100% - 8px), transparent);
          mask-image: linear-gradient(to right,
                        transparent, #000 8px, #000 calc(100% - 8px), transparent);
}

/* ==========================================================================
   DAS HEFT — ein Canvas, sonst nichts

   Die frueheren Regeln fuer .slot, .leaf, .spine und .page-canvas sind
   entfallen: das Blaettern wird nicht mehr aus DOM-Elementen mit
   3D-Transformationen zusammengesetzt, sondern gezeichnet. Siehe flipbook.js.
   ========================================================================== */

.book-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-bg);
  padding: 24px;
  overflow: hidden;         /* die Buehne scrollt nicht, sie ist eine Flaeche */
  min-width: 0;
}

/* Die Buehne gibt dem Canvas seinen Platz. flipbook.js misst genau diesen
   Kasten aus, deshalb darf hier nichts anderes drinstehen. */
.book-stage {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-canvas {
  display: block;
  /* Senkrecht darf gescrollt werden, waagerecht gehoert die Geste dem Heft.
     Ohne das kaempfen Blaettern und Seitenscrollen auf dem Handy gegeneinander. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.book-canvas:active {
  cursor: grabbing;
}

.book-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--color-fg-muted);
  flex: 0 0 auto;
}

.book-btn {
  width: 44px;              /* Daumenmass — 30 px waren zu klein zum Treffen */
  height: 44px;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 15px;
  border-radius: 2px;
  color: inherit;
}

.book-btn:hover:not(:disabled) {
  background: var(--color-hover);
}

.book-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.page-indicator {
  min-width: 150px;
  text-align: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
  html, body { overflow: auto; height: auto; min-height: 100%; }

  .layout {
    flex-direction: column;
    height: auto;
    margin-top: var(--header-height);
  }

  .index-panel,
  .book-panel {
    flex: none;
    width: 100%;
    overflow: visible;
  }

  .index-panel {
    border-right: none;
    border-bottom: 1px solid var(--color-line);
    max-height: 40vh;
    height: auto;
  }

  .book-panel {
    /* dvh statt vh: bei iOS Safari waechst und schrumpft die Adressleiste, und
       vh rechnet mit dem groessten Zustand — das Heft waere unten abgeschnitten. */
    height: 70dvh;
    min-height: 380px;
    padding: 12px;
  }
}
/* ==========================================================================
   AUSGABEN-MENUE — eine Zeile, die nach rechts laeuft

   „Ausgabe 01 | Ausgabe 02 | Aus…": bricht nie um, schneidet nie hart ab.
   Wird die Zeile breiter als die Spalte, laesst sie sich schieben — Trackpad
   und Finger koennen das von selbst (der Streifen ist ein gewoehnlicher
   Bildlaufkasten), die Maus durch Ziehen, die Tastatur ueber Tab und
   Pfeiltasten (script.js). Am Rand blendet die Zeile zum Grund aus: das
   angeschnittene Wort im Ausblenden ist der Hinweis, dass es weitergeht.
   Dazu ein Pfeil, der nur erscheint, wenn es in seiner Richtung noch etwas
   gibt. Die Klassen .ist-schiebbar, .kann-zurueck, .kann-vor setzt script.js.
   ========================================================================== */

.issue-menu {
  position: relative;
  margin-bottom: 18px;
  font-size: 13px;
}

.issue-strip {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* Luft fuer den Fokusrahmen der Knoepfe, ohne die Zeile zu verschieben —
     overflow-y: hidden wuerde ihn sonst oben und unten abschneiden. */
  padding-block: 3px;
  margin-block: -3px;
  /* Die Bildlaufleiste waere hier ein Fremdkoerper; dass es weitergeht, zeigt
     die Zeile auf ihre Art. Scrollen geht trotzdem. */
  scrollbar-width: none;
  /* Wer per Tastatur auf eine Ausgabe springt, soll sie nicht halb im
     Ausblenden finden. */
  scroll-padding-inline: 40px;
  /* Am Ende der Zeile nicht die ganze Seite mitschieben. */
  overscroll-behavior-x: contain;
  user-select: none;
}

.issue-strip::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .issue-strip {
    scroll-behavior: smooth;
  }
}

/* Beim Ziehen mit der Maus muss die Zeile dem Zeiger unmittelbar folgen. */
.issue-strip.wird-gezogen {
  scroll-behavior: auto;
}

.issue-menu.ist-schiebbar .issue-strip {
  cursor: grab;
}

.issue-menu.ist-schiebbar .issue-strip.wird-gezogen {
  cursor: grabbing;
}

/* Ausblenden zum Grund — nur auf der Seite, auf der es weitergeht. Als Maske
   statt als aufgelegter Verlauf: so bleibt es richtig, egal welche Flaeche
   unter dem Menue liegt. */
.issue-menu.kann-zurueck .issue-strip {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px);
          mask-image: linear-gradient(to right, transparent, #000 40px);
}

.issue-menu.kann-vor .issue-strip {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 40px);
          mask-image: linear-gradient(to left, transparent, #000 40px);
}

.issue-menu.kann-zurueck.kann-vor .issue-strip {
  -webkit-mask-image: linear-gradient(to right,
                        transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right,
                        transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* Die Pfeile liegen ueber den ausgeblendeten Raendern, nicht daneben: so
   verschiebt ihr Auftauchen die Zeile nicht. Etwas hoeher als die Zeile, damit
   sie mit der Maus leichter zu treffen sind. */
.issue-pfeil {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 28px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  z-index: 1;
}

.issue-pfeil.ist-zurueck {
  left: 0;
  text-align: left;
}

.issue-pfeil.ist-vor {
  right: 0;
  text-align: right;
}

.issue-pfeil:hover {
  color: var(--color-fg-muted);
}

.issue-pfeil:focus-visible,
.issue-btn:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

/* Der senkrechte Strich zwischen den Ausgaben. Mit Linienfarbe war er auf dem
   beigen Grund praktisch unsichtbar — er soll dezent sein, aber da. */
.issue-sep {
  color: var(--color-fg-muted);
  user-select: none;
}

.issue-btn {
  flex: none;               /* nie zusammendruecken, lieber ueber den Rand */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.issue-btn:hover {
  text-decoration: underline;
}

.issue-btn.active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.issue-intro {
  max-width: 600px;
  font-size: 12.5px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Die Liste erscheint erst, wenn eine Ausgabe gewaehlt ist — davor steht hier
   der Einfuehrungstext. Geschaltet wird ueber das hidden-Attribut, und die
   Regel darunter ist noetig, weil display:flex sonst hidden ueberstimmt. */
.index-list {
  display: flex;
  flex-direction: column;
}

.index-list[hidden] {
  display: none;
}

/* ==========================================================================
   KONTAKT, IMPRESSUM, DATENSCHUTZ — Text in der linken Spalte

   Derselbe Ort wie Intro und Beitragsliste; die Schaltflaechen dazu stehen
   unten links (nav.fuss). Inhalt kommt aus den Daten.
   ========================================================================== */

.text-kasten {
  max-width: 600px;
  font-size: 12.5px;
  line-height: 1.6;
}

.text-kasten h2 {
  font-size: inherit;
  font-weight: normal;
  margin: 0 0 12px;
}

.text-kasten p {
  margin: 0 0 12px;
}

.text-kasten a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   FUSS — kontakt · datenschutz · impressum

   Klein, unten links, am Rand der linken Spalte. Shop und Insta bleiben oben:
   die gehoeren zum Verkauf, diese drei zur Pflicht. Der Fuss liegt ueber dem
   scrollenden Ende der Spalte; damit die Liste nicht hart unter ihm
   abbricht, laeuft sie in einem Verlauf aus (dieselbe Sprache wie Menue und
   Zellen). Die Spalte hat unten 80 px Luft, der letzte Eintrag bleibt also
   erreichbar.
   ========================================================================== */

.fuss {
  position: fixed;
  left: 0;
  bottom: 0;
  width: calc(42% - 1px);      /* bis an die Trennlinie der Spalte, nicht darueber */
  display: flex;
  gap: 20px;
  padding: 10px 20px 14px;
  font-size: 12px;
  text-transform: lowercase;
  background: var(--color-bg);
  z-index: 50;
}

.fuss::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 24px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}

.fuss-knopf {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-transform: lowercase;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.fuss-knopf:hover {
  opacity: 1;
  text-decoration: underline;
}

.fuss-knopf.active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fuss-knopf:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  /* Auf dem Handy scrollt die ganze Seite; der Fuss steht dann einfach am Ende. */
  .fuss {
    position: static;
    width: auto;
    padding: 16px 20px 24px;
  }
  .fuss::before {
    display: none;
  }
}

/* ==========================================================================
   SHOP — Angebot, Warenkorb, Bestellformular

   Dieselbe Typografie wie Intro und Listen; Knoepfe in der Formensprache der
   Gattungsmarken (Hairline, kein Akzent). Bestellt wird per Mail — das
   Formular sammelt nur, was in die Mail gehoert.
   ========================================================================== */

.shop-kasten {
  max-width: 600px;
  font-size: 12.5px;
  line-height: 1.6;
}

.shop-kasten h2 {
  font-size: inherit;
  font-weight: normal;
  margin: 0 0 12px;
}

.shop-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}

.shop-knopf {
  flex: none;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  padding: 0 6px;
  background: none;
  font: inherit;
  font-size: 11px;
  line-height: 1.6;
  color: inherit;
  cursor: pointer;
}

.shop-knopf:hover {
  background: var(--color-hover);
}

.shop-knopf:focus-visible,
.shop-bestellen:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

.shop-korb {
  margin: 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--color-line);
  border-radius: 2px;
}

.shop-korb-titel {
  margin: 0 0 6px;
  color: var(--color-fg-muted);
}

.shop-leer {
  margin: 0;
  color: var(--color-fg-muted);
}

.shop-korb-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.shop-summe {
  margin-top: 6px;
  border-top: 1px solid var(--color-line);
  padding-top: 6px;
}

.shop-formular {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.shop-feld span {
  display: block;
  font-size: 11px;
  color: var(--color-fg-muted);
  margin-bottom: 2px;
}

.shop-formular input,
.shop-formular select,
.shop-formular textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 2px;
  padding: 5px 7px;
}

.shop-formular .fehlt {
  outline: 2px solid var(--color-fg);
  outline-offset: 1px;
}

.shop-zahlarten {
  display: grid;
  gap: 6px;
}

.shop-zahlart {
  display: flex;
  gap: 8px;
  align-items: baseline;
  cursor: pointer;
}

.shop-zahlart input {
  flex: none;
  width: auto;   /* die 100 % der Formularfelder gelten nicht fuer Radioknoepfe */
}

.shop-bestellen {
  justify-self: start;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  padding: 8px 14px;
  background: var(--color-paper);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.shop-bestellen:hover {
  background: var(--color-hover);
}

.shop-hinweis {
  margin: 0;
  font-size: 11.5px;
  color: var(--color-fg-muted);
}