/* Shoppital (A.0.92.0) — der Online-Laden als Webseite in der Tafel (tafeln/shop.js, shop-seiten.js): oben die Adresse wie im
   Browser statt des Holzkopfs, darunter der Kopf in OP-Grün mit Zeichen, Suche und Einkaufswagen, die Leiste mit den Bereichen
   und ein weißes Blatt. Preise rot, Bestand grün/orange/rot, Sterne gelb, Blitzangebote mit rotem Schild; Luxus gold und
   Gehoben blau wie überall im Spiel (tafel.css .sorte-marke). Die Seite rollt für sich (data-rollt), Kopf und Leiste bleiben. */

.tafel.shop-tafel {
  --s-gruen: #0f5e57; --s-gruen2: #0b4842; --s-mint: #bff3e6; --s-papier: #fff; --s-grau: #f2f5f4; --s-linie: #d8e0de;
  --s-text: #1d2a2c; --s-leise: #56676a; --s-preis: #b3261e; --s-gut: #1d7438; --s-knapp: #ad5600; --s-leer: #b3261e;
  --s-stern: #f2a20c; --s-gelb: #ffd24d; --s-blitz: #c81d38; --s-link: #1b6a80;
  width: min(98%, 68em); height: min(100%, 48em); background: var(--s-papier); color: var(--s-text); border: 1px solid #93a3a0; border-radius: .55em;
}
/* Adressleiste */
.shop-tafel .tafel-kopf { background: linear-gradient(#eef1f0, #dde3e1); color: var(--s-text); padding: .3em .35em .3em .6em; border-bottom: 1px solid var(--s-linie); }
.shop-tafel .tafel-kopf h2 { flex: 1; min-width: 0; font-family: var(--schrift); font-weight: 700; font-size: .8em; letter-spacing: 0; padding: .22em .85em;
  border-radius: 999px; background: #fff; border: 1px solid var(--s-linie); color: var(--s-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-tafel .tafel-kopf h2::before { content: '🔒 '; font-size: .9em; }
.shop-tafel .tafel-zu { color: var(--s-text); width: 1.9em; height: 1.6em; border-radius: .35em; display: grid; place-items: center; }
.shop-tafel .tafel-zu:hover, .shop-tafel .tafel-zu:focus-visible { background: #d93a3a; color: #fff; outline: none; }
.shop-tafel .tafel-inhalt { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.shop-tafel .tafel-fuss { background: var(--s-grau); border-top: 1px solid var(--s-linie); }
.shop { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.shop-seite { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: .7em 1em 1em; }
.shop .knopf:focus-visible { outline: 2px solid #ffb200; outline-offset: 2px; }

/* Kopf: Zeichen, Suche, Einkaufswagen */
.shop-kopf { flex: none; display: flex; align-items: center; gap: .7em; padding: .45em .8em; background: var(--s-gruen); }
.shop .shop-logo { display: flex; align-items: center; gap: .35em; border: 0; background: none; color: #fff; padding: .1em .35em; border-radius: .4em; }
.shop .shop-logo:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.shop-zeichen { width: 1.9em; height: 1.9em; flex: none; }
.shop-name { font-family: var(--zier); font-weight: 700; font-size: 1.35em; color: #fff; line-height: 1; }
.shop-name b { color: var(--s-mint); font-weight: 700; }
.shop-suche { flex: 1; min-width: 0; display: flex; align-items: stretch; background: #fff; border-radius: .45em; overflow: hidden; border: 2px solid transparent; }
.shop-suche:focus-within { border-color: var(--s-gelb); }
.shop-suche input { flex: 1; min-width: 0; border: 0; outline: none; padding: .42em .7em; font: inherit; font-weight: 600; color: var(--s-text); background: transparent; user-select: text; -webkit-user-select: text; }
.shop-suche input::placeholder { color: #8a9896; }
.shop-suche span { padding: 0 .65em; display: grid; place-items: center; background: var(--s-gelb); }
.shop .shop-wagen { display: flex; align-items: center; gap: .3em; border: 1px solid transparent; background: none; color: #fff; padding: .2em .55em; border-radius: .4em; }
.shop .shop-wagen:hover:not(:disabled), .shop .shop-wagen.an { border-color: rgba(255, 255, 255, .55); background: none; }
.wagen-symbol { font-size: 1.3em; position: relative; line-height: 1; }
.wagen-zahl { position: absolute; top: -.45em; right: -.7em; min-width: 1.45em; height: 1.45em; padding: 0 .3em; border-radius: 999px; display: grid; place-items: center;
  background: var(--s-gelb); color: #2a2208; font: 700 .58em / 1 var(--zier); }
.shop-wagen:not(.voll) .wagen-zahl { display: none; }
.wagen-wort { margin-left: .35em; }

/* Leiste */
.shop-leiste { flex: none; display: flex; gap: .15em; padding: .2em .6em; background: var(--s-gruen2); overflow-x: auto; scrollbar-width: none; }
.shop .shop-reiter { border: 1px solid transparent; background: none; color: #e4f4f0; padding: .22em .6em; border-radius: .35em; white-space: nowrap; font-size: .88em; }
.shop .shop-reiter:hover:not(:disabled) { border-color: rgba(255, 255, 255, .5); background: none; }
.shop .shop-reiter.an { background: rgba(255, 255, 255, .15); color: #fff; font-weight: 800; }
.shop .shop-reiter.blitz { color: var(--s-gelb); }

/* Bausteine */
.shop .preis { color: var(--s-preis); font-weight: 800; }
.shop s { color: var(--s-leise); font-weight: 600; font-size: .85em; }
.sterne { font-size: .95em; letter-spacing: .04em; background: linear-gradient(90deg, var(--s-stern) calc(var(--wert) / 5 * 100%), #cad3d1 0);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.sterne-zahl { color: var(--s-link); font-weight: 700; }
.shop .lager { font-weight: 800; font-size: .82em; }
.shop .lager.gut { color: var(--s-gut); }
.shop .lager.knapp { color: var(--s-knapp); }
.shop .lager.leer { color: var(--s-leer); }
.lager-info { font-size: .82em; color: var(--s-leise); }
.blitz-marke { display: inline-block; background: var(--s-blitz); color: #fff; font-weight: 800; font-size: .78em; padding: .05em .45em; border-radius: .3em; }
.gebraucht-marke { display: inline-block; background: #ece5d6; color: #4d4335; border: 1px dashed #8b7d66; font-weight: 800; font-size: .78em; padding: 0 .45em; border-radius: .3em; }
.beansprucht { display: block; height: .4em; border-radius: 999px; background: #f4d7dc; overflow: hidden; }
.beansprucht i { display: block; height: 100%; background: var(--s-blitz); }
.shop .sorte-marke { margin-top: 0; font-size: .74em; justify-self: start; }
.sorte-marke.design.klasse-schlicht { background: #efebe3; border-color: #9a8f7c; color: #5c5446; }
.sorte-marke.design.klasse-gefaellig { background: #e6f2ee; border-color: #6aa597; color: #22574d; }
.sorte-marke.design.klasse-schick { background: #f6e7c9; border-color: #9a6a1c; color: #5a3a08; }
.shop .link { border: 0; background: none; padding: 0; color: var(--s-link); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; border-radius: .2em; }
.shop .link:hover:not(:disabled) { background: none; color: #0e4a5a; }
.shop-knopf { border-radius: 999px; padding: .45em .85em; font-weight: 800; border: 1px solid #c99a12; background: var(--s-gelb); color: #2a2208; }
.shop .shop-knopf:hover:not(:disabled) { background: #ffde73; border-color: #a77f0c; }
.shop .shop-knopf.klein { font-size: .84em; padding: .22em .7em; margin: 0; }
.shop .shop-knopf.an { background: #e6f2ee; border-color: #6aa597; color: #22574d; }
.chip { border-radius: 999px; padding: .14em .65em; font-size: .8em; background: #fff; border: 1px solid var(--s-linie); color: var(--s-text); }
.shop .chip:hover:not(:disabled) { background: #f6fbfa; border-color: #8fbfb6; }
.shop .chip.an { background: #e6f2ee; border-color: #6aa597; color: #22574d; font-weight: 800; }
.shop-leer { padding: 1.2em .4em; color: var(--s-leise); }

/* Startseite */
.shop-gruss { background: linear-gradient(90deg, #e7f6f2, #f7fbfa); border: 1px solid #cfe7e0; border-radius: .5em; padding: .55em .8em; margin-bottom: .7em; }
.shop-gruss p { margin: 0; }
.shop-gruss-klein { font-size: .84em; color: var(--s-leise); margin-top: .15em !important; }
.shop-reihe { margin: .2em 0 .9em; }
.shop-reihe h4, .shop-gruppe h4, .shop-block h4 { font-family: var(--zier); color: var(--s-text); font-size: 1em; margin: .3em 0 .45em; display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.shop-reihe h4 small, .shop-gruppe h4 small { font-family: var(--schrift); font-weight: 600; font-size: .78em; color: var(--s-leise); }
.shop-reihe h4 .mehr { margin-left: auto; font-family: var(--schrift); font-size: .8em; }
.shop-bedarf { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: .55em; }
.bedarf-karte { border: 1px solid #efd18b; background: #fffaf0; border-radius: .5em; padding: .5em .65em; display: grid; gap: .3em; align-content: start; }
.bedarf-karte ul { list-style: none; font-size: .88em; display: grid; gap: .1em; }
.bedarf-karte .shop-knopf { justify-self: start; }
.shop-abteilungen { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr)); gap: .45em; }
.shop .shop-abteilung { display: grid; gap: .05em; justify-items: start; text-align: left; padding: .45em .6em; background: #fff; border: 1px solid var(--s-linie); border-radius: .5em; color: var(--s-text); }
.shop .shop-abteilung:hover:not(:disabled) { border-color: #8fbfb6; background: #f6fbfa; }
.abt-bilder { font-size: 1.2em; letter-spacing: .08em; }
.shop-abteilung small { color: var(--s-leise); font-size: .78em; }

/* Kacheln */
.shop-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2em, 1fr)); gap: .55em; }
.shop .shop-kachel { display: flex; flex-direction: column; align-items: stretch; gap: .2em; text-align: left; padding: .5em .55em .55em; min-width: 0;
  background: #fff; border: 1px solid var(--s-linie); border-radius: .5em; color: var(--s-text); }
.shop .shop-kachel:hover:not(:disabled) { border-color: #8fbfb6; background: #fff; box-shadow: 0 .25em .7em rgba(15, 94, 87, .16); }
/* Bilder in festen Kästen: Breite und Höhe 100 % mit object-fit — max-height in % greift in einem Raster ohne feste Zeile nicht */
.kachel-bild { display: block; height: 5.4em; margin-bottom: .15em; background: var(--s-grau); border-radius: .35em; }
.kachel-bild img, .produkt-bild img, .extra-bild img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.kachel-bild .emoji, .produkt-bild .emoji, .extra-bild .emoji { display: grid; place-items: center; height: 100%; font-size: 2.3em; }
.kachel-name { font-weight: 800; font-size: .9em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kachel-sterne { font-size: .85em; }
.shop-kachel small { font-size: .76em; color: var(--s-leise); }
.shop-kachel.leer .kachel-bild { opacity: .5; filter: grayscale(.7); }
.shop .shop-kachel.guete-3 { border-color: #d9b354; box-shadow: inset 0 0 0 1px #f1d98f; }
.shop .shop-kachel.guete-2 { border-color: #9cc7d1; }
.shop-gruppe { margin-bottom: .8em; }

/* Listen */
.liste-kopf { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; margin-bottom: .55em; }
.liste-kopf h3 { font-family: var(--zier); font-size: 1.15em; color: var(--s-text); margin: 0; }
.liste-kopf > small { color: var(--s-leise); }
.liste-wahl { display: flex; gap: .3em; flex-wrap: wrap; margin-left: auto; }

/* Produktseite */
.brotkrumen { font-size: .82em; color: var(--s-leise); margin-bottom: .45em; }
.produkt { display: grid; grid-template-columns: minmax(9em, 14em) minmax(0, 1fr) minmax(11em, 14.5em); gap: 1em; align-items: start; }
.produkt-bild { display: block; background: var(--s-grau); border-radius: .5em; aspect-ratio: 1; border: 1px solid var(--s-linie); }
.produkt-bild.guete-3 { border-color: #d9b354; background: radial-gradient(circle at 50% 40%, #fffbe9, #f6edcc); }
.produkt-bild.guete-2 { border-color: #9cc7d1; }
.produkt-info h3 { font-family: var(--schrift); font-weight: 800; font-size: 1.15em; line-height: 1.25; color: var(--s-text); margin-bottom: .2em; }
.produkt-info p { margin-bottom: .3em; }
.produkt-info h5 { font-family: var(--zier); font-size: .92em; margin: .4em 0 .2em; }
.marke { font-size: .85em; color: var(--s-link); font-weight: 700; }
.varianten-titel { font-size: .88em; }
.varianten { display: flex; flex-wrap: wrap; gap: .35em; margin: .2em 0 .45em; }
.shop .variante { display: grid; justify-items: center; gap: .05em; width: 5.7em; padding: .3em .2em .25em; background: #fff; border: 1px solid var(--s-linie); border-radius: .4em; position: relative; color: var(--s-text); }
.shop .variante:hover:not(:disabled) { background: #f6fbfa; border-color: #8fbfb6; }
.shop .variante.an { border-color: var(--s-gruen); box-shadow: inset 0 0 0 2px var(--s-gruen); background: #fff; }
.variante img { height: 2.7em; max-width: 4.8em; object-fit: contain; }
.variante small { font-size: .7em; line-height: 1.1; text-align: center; }
.variante b { font-size: .78em; color: var(--s-preis); }
.punkt { position: absolute; top: .3em; right: .3em; width: .5em; height: .5em; border-radius: 50%; }
.punkt.da { background: var(--s-gut); }
.punkt.weg { background: #c5cdcb; }
.punkte { padding-left: 1.15em; display: grid; gap: .28em; font-size: .92em; }
.kaufbox { border: 1px solid var(--s-linie); border-radius: .5em; padding: .65em .7em; display: grid; gap: .4em; background: #fff; }
.kaufbox p { margin: 0; }
.preis-gross { font-size: 1.6em; font-weight: 800; color: var(--s-preis); line-height: 1.1; }
.lieferung { font-size: .82em; color: var(--s-leise); }
.menge { display: flex; align-items: center; justify-content: space-between; gap: .4em; font-size: .9em; }
.menge .stepper b { min-width: 4.2em; }
.kaufbox-notiz { font-size: .85em; color: var(--s-gut); font-weight: 700; }
.kaufbox-konto { font-size: .8em; color: var(--s-leise); }
.shop-block { margin-top: .9em; padding-top: .5em; border-top: 1px solid var(--s-linie); }
.shop-block .zeile { border-bottom-color: var(--s-linie); }
.shop-block .zeile span { color: var(--s-leise); }
.shop-block .gebraucht { font-size: .85em; color: var(--s-leise); margin: .2em 0; }
.tabelle-rollt { overflow-x: auto; }
.shop-vergleich { width: 100%; border-collapse: collapse; font-size: .88em; }
.shop-vergleich th, .shop-vergleich td { padding: .3em .45em; border-bottom: 1px solid var(--s-linie); text-align: left; white-space: nowrap; }
.shop-vergleich th { color: var(--s-leise); font-weight: 700; font-size: .9em; }
.shop-vergleich tr.an td { background: #eef8f5; font-weight: 800; }
.shop-extras { list-style: none; display: grid; gap: .45em; }
.shop-extras li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .45em .55em; border: 1px solid var(--s-linie); border-radius: .5em; background: #fff; }
.shop-extras li.an { border-color: var(--s-blitz); box-shadow: inset 0 0 0 1px var(--s-blitz); }
.extra-bild { display: block; width: 3.6em; height: 3.2em; background: var(--s-grau); border-radius: .35em; }
.extra-text p { margin: .1em 0 0; font-size: .85em; }
.extra-satz { font-style: italic; color: var(--s-leise); }
.extra-kauf { display: grid; justify-items: end; gap: .25em; }
.extra-kauf .knopf { margin: 0; }
.rez-schnitt { font-size: .9em; }
.rezension { padding: .5em 0; border-bottom: 1px solid var(--s-linie); font-size: .9em; }
.rezension p { margin: .12em 0; }
.rez-wer { display: flex; align-items: center; gap: .4em; }
.rez-wer small { color: var(--s-leise); }
.rez-kopf { width: 1.7em; height: 1.7em; border-radius: 50%; background: #d7e6e3; color: #2d5a53; display: grid; place-items: center; font-weight: 800; font-size: .85em; }
.rez-gekauft { color: var(--s-knapp); font-size: .78em; font-weight: 800; }
.wagen-summe { margin-top: .6em; text-align: right; }

/* schmal (Handy hochkant gibt es nicht — aber Handy quer und kleine Fenster) */
@media (max-width: 900px) {
  .produkt { grid-template-columns: minmax(7em, 10em) minmax(0, 1fr); }
  .kaufbox { grid-column: 1 / -1; }
}
@media (max-height: 520px) {
  .tafel.shop-tafel { height: 100%; }
  .shop-tafel .tafel-kopf { padding: .12em .3em .12em .5em; }
  .shop-tafel .tafel-kopf h2 { padding: .08em .7em; }
  .shop-kopf { padding: .2em .5em; gap: .45em; }
  .shop-zeichen { width: 1.45em; height: 1.45em; }
  .shop-name { font-size: 1.05em; }
  .shop-suche input { padding: .22em .6em; }
  .shop-leiste { padding: .08em .5em; }
  .shop .shop-reiter { padding: .1em .5em; font-size: .82em; }
  .wagen-wort { display: none; }
  .shop-seite { padding: .5em .7em .7em; }
  .shop-raster { grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); gap: .4em; }
  .kachel-bild { height: 4em; }
  .produkt { grid-template-columns: minmax(7em, 9em) minmax(0, 1fr); }
  .kaufbox { grid-column: 1 / -1; }
}

/* ── A.0.93.0: zwei Läden ───────────────────────────────────────────
   Das Möbelhaus Sitzfleisch (tafeln/moebelhaus-seiten.js) in Pflaume und Messing statt OP-Grün und Gelb, Überschriften in der
   Zeitungsschrift Playfair (Ausstellungskatalog statt Versandhändler), Kacheln mit Wand und Boden wie in einer Ausstellung.
   Dazu für beide: die Schilder der neuen Ausführungen, Packungen, der Verweis auf den anderen Laden. */
.tafel.shop-tafel.laden-sitzfleisch {
  --s-gruen: #5b2546; --s-gruen2: #461a36; --s-mint: #f3d38b; --s-gelb: #e9bd5c; --s-grau: #f5f2f3; --s-linie: #e3d9dd;
  --s-text: #2b1d24; --s-leise: #6d5a63; --s-preis: #8c1f45; --s-link: #7b3560;
}
.laden-sitzfleisch .shop-name { font-family: 'Playfair Display', 'PT Serif', Georgia, serif; font-weight: 900; font-size: 1.4em; letter-spacing: .01em; }
.laden-sitzfleisch .shop-reihe h4, .laden-sitzfleisch .shop-gruppe h4, .laden-sitzfleisch .liste-kopf h3, .laden-sitzfleisch .shop-block h4,
.laden-sitzfleisch .produkt-info h5 { font-family: 'Playfair Display', 'PT Serif', Georgia, serif; font-weight: 700; }
.laden-sitzfleisch .shop-kachel:hover:not(:disabled) { border-color: var(--s-gelb); box-shadow: 0 .25em .7em rgba(91, 37, 70, .18); }
.laden-sitzfleisch .kachel-bild { height: 6.6em; background: linear-gradient(#f8f5f6 72%, #e8dde2 72%); }
.laden-sitzfleisch .produkt-bild { background: linear-gradient(#f8f5f6 74%, #e8dde2 74%); }
.laden-sitzfleisch .chip.an, .laden-sitzfleisch .shop-knopf.an { background: #f6eaf0; border-color: #b0738f; color: #5b2546; }
.laden-sitzfleisch .shop-vergleich tr.an td { background: #f8eef3; }
.laden-sitzfleisch .variante.an { border-color: var(--s-gruen); box-shadow: inset 0 0 0 2px var(--s-gruen); }
.sf-gruss { border-left: .35em solid var(--s-gelb); background: #faf6f7; padding: .6em .9em; margin-bottom: .8em; border-radius: 0 .5em .5em 0; }
.sf-gruss p { margin: 0; font-size: .92em; }
.sf-gruss .sf-spruch { font: 900 1.35em / 1.15 'Playfair Display', 'PT Serif', Georgia, serif; color: var(--s-gruen); margin-bottom: .2em; }
.sf-raeume { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: .6em; }
.shop .sf-raum { display: grid; gap: .1em; justify-items: start; text-align: left; padding: 0 0 .5em; background: #fff; border: 1px solid var(--s-linie);
  border-radius: .55em; overflow: hidden; color: var(--s-text); }
.sf-raum .raum-bild { display: block; width: 100%; height: 5.6em; background: var(--s-grau); }
.sf-raum .raum-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.sf-raum b { padding: .3em .6em 0; font: 700 1.02em / 1.2 'Playfair Display', 'PT Serif', Georgia, serif; }
.sf-raum small { padding: 0 .6em; color: var(--s-leise); font-size: .78em; }
.shop .sf-raum:hover:not(:disabled) { border-color: var(--s-gelb); background: #fff; box-shadow: 0 .3em .8em rgba(91, 37, 70, .18); }
.sf-raumwahl { display: flex; flex-wrap: wrap; gap: .3em; margin-bottom: .6em; }
.sf-banner { position: relative; height: 7.5em; border-radius: .6em; overflow: hidden; margin-bottom: .7em; background: var(--s-gruen); }
.sf-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.sf-banner div { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4em .9em .6em; background: linear-gradient(transparent, rgba(40, 14, 30, .86)); }
.sf-banner h3 { font: 900 1.45em / 1.05 'Playfair Display', 'PT Serif', Georgia, serif; margin: 0; color: #fff; }
.sf-banner p { margin: .15em 0 0; font-size: .88em; color: #f3e6ec; }
.sf-stand { margin: 0 0 .8em; padding-top: 0; border-top: 0; }
.sf-deine { list-style: none; display: grid; gap: .2em; font-size: .88em; }
.sf-raster { grid-template-columns: repeat(auto-fill, minmax(10.4em, 1fr)); }

/* beide Läden: Verweis auf den anderen, Packungen, Schilder der neuen Ausführungen */
.shop .shop-reiter.nebenan { margin-left: auto; color: var(--s-mint); font-style: italic; }
.shop-nebenan { border: 1px dashed var(--s-linie); background: var(--s-grau); border-radius: .5em; padding: .45em .7em; margin: 0 0 .7em; font-size: .9em; }
.shop-nebenan .shop-knopf { margin-left: .4em; }
.kachel-bild, .produkt-bild, .extra-bild, .variante { position: relative; }
.packung-zahl { position: absolute; right: .3em; bottom: .25em; background: #2a2208; color: #ffd24d; font: 700 .78em / 1 var(--zier); padding: .18em .42em; border-radius: .3em; }
.variante .packung-zahl { font-size: .6em; right: .2em; bottom: auto; top: 1.6em; }
.sorte-marke.klasse-billig { background: #eef0f0; border-color: #9aa6a8; color: #4a5658; }
.sorte-marke.klasse-basics { background: #fff; border-color: #0f5e57; color: #0f5e57; }
.sorte-marke.klasse-profi { background: #1d3f73; border-color: #142d54; color: #fff; }
.sorte-marke.klasse-robust { background: #5f6b73; border-color: #444e55; color: #fff; }
.sorte-marke.klasse-farbe { background: #fdeaf3; border-color: #c2588f; color: #7d2a57; }
.sorte-marke.klasse-ueberholt { background: #e5f3e2; border-color: #4f8a45; color: #2d5a27; }
.sorte-marke.klasse-sonder { background: #f3e8ff; border-color: #8b4fd6; color: #5a2a99; }
.sorte-marke.klasse-pack { background: #fff4cc; border-color: #c99a12; color: #5a4306; }
.shop .shop-kachel.klasse-sonder { border-color: #c7a6ee; box-shadow: inset 0 0 0 1px #e6d6fa; }
.auffaellig { grid-template-columns: repeat(auto-fill, minmax(10.4em, 1fr)); }
.auffaellig .kachel-bild { height: 7em; }